How to add a button to a single row in a one column TableView?

Question

I have a TableView with a single Column and I want to have a Button in the last row of that TableView/Column. The Button should be disabled until a row is selected and then it should be enabled. I've done numerous searches on this but everything I've found seems to be adding a button to every row within a multi-column table. Is there a quick way to do this?

Here are some sample images:

TableButtonView.fxml:

TableButtonController.java:

package tablebutton;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class TableButtonController implements Initializable {

    private WebView helpWebView;
    @FXML
    private TextField agencyTextField;
    @FXML
    private Button addButton;
    @FXML
    private TableView agencyTableView;
    @FXML
    private TableColumn agencyColumn;
    @FXML
    private Button okAgencyButton;
    @FXML
    private Button cancelAgencyButton;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        agencyColumn.setCellValueFactory(cellData -> 
                new ReadOnlyStringWrapper(cellData.getValue())
        );
        agencyColumn.setStyle( "-fx-alignment: CENTER;");

        ObservableList agencies = FXCollections.observableArrayList(
                    "AA","DL","LH");
        agencyTableView.getItems().addAll(agencies);
    }    

    @FXML
    private void onAdd(ActionEvent event) {
    }


    @FXML
    private void onOK(ActionEvent event) {
        // Just exit for now
        Stage stage = (Stage) okAgencyButton.getScene().getWindow();
        stage.close();
    }

    @FXML
    private void onCancel(ActionEvent event) {
        // Just exit for now
        Stage stage = (Stage) cancelAgencyButton.getScene().getWindow();
        stage.close();
    }

}

TableButton.java:

package tablebutton;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class TableButton extends Application {

    @Override
    public void start(Stage primaryStage) {
        try
        {
            FXMLLoader loader = new FXMLLoader(getClass().getResource("TableButtonView.fxml"));
            Scene scene = new Scene((Parent) loader.load());
            primaryStage.setScene(scene);
            primaryStage.setTitle("TableView Button Test");
            primaryStage.show();
        }
        catch (IOException ignored)
        {
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

jewelsea · Accepted Answer

Trying to put the button actually inside the TableView is problematic and not recommended. There is a technical difficulty in getting the button to render in the last row of the TableView (this is not trivial), and there are also potential usability issues (what if there are a lot of rows in the table and the table needs to be scrolled, does the remove button just scroll out of view? if so, then how would a user find it if they wanted to remove something).

Instead, don't put the button in the TableView:

Use a VBox which contains the the TableView and the Button.
Set appropriate constraints so that the Button butts right up under the TableView and is sized to the width of the TableView.
Bind the disable property of the Button to an empty selected items set.

Sample code:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Remover extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        ObservableList colors = FXCollections.observableArrayList(
                new NamedColor("red", Color.RED),
                new NamedColor("green", Color.GREEN),
                new NamedColor("blue", Color.BLUE),
                new NamedColor("indigo", Color.INDIGO)
        );

        TableView table = new TableView<>(colors);
        table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
        table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
        TableColumn colorNames = new TableColumn<>("Colors");
        colorNames.setCellValueFactory(new PropertyValueFactory<>("name"));
        table.getColumns().add(colorNames);

        Button remove = new Button("Remove");
        remove.disableProperty().bind(
                Bindings.isEmpty(
                        table.getSelectionModel().getSelectedItems()
                )
        );
        remove.setMaxWidth(Double.MAX_VALUE);
        remove.setOnAction(event ->
                table.getItems()
                        .removeAll(
                                table.getSelectionModel().getSelectedItems()
                        )
        );

        VBox layout = new VBox(table, remove);
        layout.setPadding(new Insets(10));

        stage.setScene(new Scene(layout));
        stage.show();
    }

    public static void main(String[] args) {
        launch(Remover.class);
    }

    public static class NamedColor {
        private String name;
        private Color color;

        public NamedColor(String name, Color color) {
            this.name = name;
            this.color = color;
        }

        public String getName() {
            return name;
        }

        public Color getColor() {
            return color;
        }
    }
}

How to add a button to a single row in a one column TableView?

Answers (1)

Related Questions