Implement TableRow Expander Column in JavaFX TableView? | ControlsFX

by
In this tutorial, you will learn how to use controlsFX API based feature. In this tutorial, we will learn how to implement a table row expander column in JavaFX. It is a very useful feature for the table view, with the help of this feature we can provide the way to edit row data at the same place.See the below images:

I have explained the implementation step by step.

Prerequisite:

1) Need to download contorlsfx.jar from below link

I am sharing code snippet below.

 

# Inside initialize method :

 
 TableRowExpanderColumn<Person>
expanderColumn = new TableRowExpanderColumn<>(this::createEditor);
A method to create that extended column fields and save
action handling code:
private GridPane
createEditor(TableRowExpanderColumn.TableRowDataFeatures<Person> param) {
        GridPane
editor = new GridPane();

editor.setPadding(new Insets(10));

editor.setHgap(10);

editor.setVgap(5);
        Person
customer = param.getValue();
        TextField
nameField = new TextField(customer.getFirstName());
        TextField
emailField = new TextField(customer.getEmail());

editor.addRow(0, new Label(“Name”), nameField);

editor.addRow(1, new Label(“Email”), emailField);
        Button
saveButton = new Button(“Save”);

saveButton.setOnAction(event -> {

customer.setFirstName(nameField.getText());

customer.setEmail(emailField.getText());

param.toggleExpanded();
        });
        Button
cancelButton = new Button(“Cancel”);
        cancelButton.setOnAction(event ->
param.toggleExpanded());

editor.addRow(2, saveButton, cancelButton);
        return
editor;
    }
Table  RowExpanderColumn implementation with FXML
based project:
               
TableRowExpanderColumn<Person> expanderColumn = new
TableRowExpanderColumn<>(this::createEditor);
   
private Pane
createEditor(TableRowExpanderColumn.TableRowDataFeatures<Person>
arg)  {       
        try {    
            pane =
FXMLLoader.load(getClass().getResource(“extraNode.fxml”));
        } catch
(IOException ex) {

Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE,
null, ex);
        }
        return
pane;
    }
For more details please watch the below video tutorials:                   
How to implement TableRow Expander Column with FXML?
Kindly let us know if you have any doubts. Please leave a comment.

Happy Coding  🙂 

Leave a Comment