How to define an editable TableCell in FXML?

Question

I followed this Oracle tutorial to create a TableView in FXML. However there is no info on how to make a cell editable. I have tried other tutorials suggesting to add something like firstNameCol.setOnEditCommit( new EventHandler ... into the controller code, but it didn't work. No matter how I click the mouse or punch the keyboard, the table cell does not change into the "editable textbox", as seen in here:

Here is my FXML definition of the table:

<TableView fx:id="tvAlgorithmSteps" editable="true" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="200.0" VBox.vgrow="ALWAYS">
    <columns>
        <TableColumn editable="true" prefWidth="150.0" sortable="false" text="Step">
            <cellValueFactory>
                <PropertyValueFactory property="stepName" />
            </cellValueFactory>
        </TableColumn>
        ...

The autocomplete allows me to set onEditCommit="" on the TableColumn in the FXML, but I have no idea what to put in there.

How should I edit the FXML to allow edits on the cells?

Answer 1

You need to use a cellFactory creating editable cells, e.g. TextFieldTableCells. If the PropertyValueFactory returns a writable property, onEditCommit shouldn't be necessary

<TableColumn editable="true" prefWidth="150.0" sortable="false" text="Step">
    <cellValueFactory>
        <PropertyValueFactory property="stepName" />
    </cellValueFactory>
    <cellFactory>
        <TextFieldTableCell fx:factory="forTableColumn" />
    </cellFactory>
</TableColumn>

You may need to add a processing instruction to import the TextFieldTableCell class to the beginning of the file (but after <?xml ...):

<?import javafx.scene.control.cell.TextFieldTableCell?>