Add a button to a cells in a TableView (JAVAFX)

Question

i am trying to add an edit Button to my table. when i click the button it will open a window with the item selected,I tried several approaches to add the button but no one

Answer 1

Here's one way you can do it.

package tablebuttoncolumndemo;

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TableButtonColumnDemo extends Application {

    @Override
    public void start(Stage primaryStage) {

        ObservableList data = FXCollections.observableArrayList(
                new EditableFileRow("A File"),
                new EditableFileRow("A Big File"),
                new EditableFileRow("A Lost File")
        );

        TableColumn editColumn = new TableColumn("Edit");
        editColumn.setCellValueFactory(new PropertyValueFactory<>("editButton"));
        TableColumn fileNameColumn = new TableColumn("File Name");
        fileNameColumn.setCellValueFactory(new PropertyValueFactory<>("fileName"));
        TableView table = new TableView();
        table.getColumns().addAll(editColumn, fileNameColumn);
        table.setItems(data);

        StackPane root = new StackPane();

        root.getChildren().add(table);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("Button Column Demo");
        primaryStage.setScene(scene);

        primaryStage.show();
    }

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

    public static class EditButton extends Button {

        public EditButton(String fileName) {
            super("Edit");
            setOnAction((event) -> {
                Alert alert = new Alert(AlertType.INFORMATION);
                alert.setTitle("Hey!");
                alert.setHeaderText(null);
                alert.setContentText("You're editing \"" + fileName + "\"");
                alert.showAndWait();
            });
        }
    }

    public static class EditableFileRow {

        private final SimpleStringProperty fileName;
        private final SimpleObjectProperty editButton;

        public EditableFileRow(String fileName) {
            this.fileName = new SimpleStringProperty(fileName);
            editButton = new SimpleObjectProperty(new EditButton(fileName));
        }

        public String getFileName() {
            return fileName.get();
        }

        public void setFileName(String fName) {
            fileName.set(fName);
        }

        public StringProperty fileNameProperty() {
            return fileName;
        }

        public EditButton getEditButton() {
            return editButton.get();
        }

        public void setEditButton(EditButton editButton) {
            this.editButton.set(editButton);
        }

        public ObjectProperty editButtonProperty() {
            return editButton;
        }

    }
}

Another way you can try is to put an image instead of a button, with a listener that detects clicks. I often use that method to indicate what type of file it is using different images for pdf's, excel files, text files, and so on.