Javafx: TableView change row color based on column value

Question

I have the following piece of code to update both the color of a column cell and its corresponding row:

    calltypel.setCellFactory(column -> {
        r         


        

Answer 1

After many searches i found the answer. You need to set an id for specific row in table and set the color in external css file depending on row id. Here is the example where i change the color of error rows to red. Java code:

resultsTable.setRowFactory(row -> new TableRow<Result>() {
            @Override
            public void updateItem(Result item, boolean empty) {
                super.updateItem(item, empty);
                if (item == null) {
                    setStyle("");
                } else if (item.getResultType().equalsIgnoreCase("Error")) {
                    this.setId("error");
                } else {
                    this.setId("not-error");
                }
            }
        });

CSS file:

#error .text{
    -fx-fill : red;
}

#not-error .text{
    -fx-fill : black;
}

Answer 2

The correct approach is to use setRowFactory of the Table:

table.setRowFactory(tv -> new TableRow<CustomItem>() {
    @Override
    protected void updateItem(CustomItem item, boolean empty) {
        super.updateItem(item, empty);
        if (item == null || item.getValue() == null)
            setStyle("");
        else if (item.getValue() > 0)
            setStyle("-fx-background-color: #baffba;");
        else if (item.getValue() < 0)
            setStyle("-fx-background-color: #ffd7d1;");
        else
            setStyle("");
    }
});

Answer 3

I recently did a little research about this subject. With the following code you can change the row color of a TableView based on a column value (I will try to explain it the best I can).

The first thing we have to do is to define the TableView and the Columns of this TableView:

private TableView<Person> personTable;
private TableColumn<Person, String> nameColumn;
private TableColumn<Person, String> lastNameColumn;

The next step is to define the Cell Factory of one of the columns:

nameColumn.setCellFactory(column -> {
    return new TableCell<Person, String>() {
        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty); //This is mandatory

            if (item == null || empty) { //If the cell is empty
                setText(null);
                setStyle("");
            } else { //If the cell is not empty

                setText(item); //Put the String data in the cell

                //We get here all the info of the Person of this row
                Person auxPerson = getTableView().getItems().get(getIndex());

                // Style all persons wich name is "Edgard"
                if (auxPerson.getName().equals("Edgard")) {
                    setTextFill(Color.RED); //The text in red
                    setStyle("-fx-background-color: yellow"); //The background of the cell in yellow
                } else {
                    //Here I see if the row of this cell is selected or not
                    if(getTableView().getSelectionModel().getSelectedItems().contains(auxPerson))
                        setTextFill(Color.WHITE);
                    else
                        setTextFill(Color.BLACK);
                }
            }
        }
    };
});

The logic of the code: the updateItem() method that we overwrite, it's called automatically when the underlying item changes.

We receive the data item (a String in this case) that has to be rendered. If the item is empty or null (an empty cell for example), we don't apply any style. Otherwise, we format the item, set the text of the cell, and also the colour and the background, depending on the Name of the Person.

If you want to apply this colour of the cell in the other columns of the table, we have to use 'Row Factory' instead of 'Cell Factory', but the logic of the code is similar:

personTable.setRowFactory(row -> new TableRow<Person>(){
    @Override
    public void updateItem(Person item, boolean empty){
        super.updateItem(item, empty);

        if (item == null || empty) {
            setStyle("");
        } else {
            //Now 'item' has all the info of the Person in this row
            if (item.getName().equals("Edgar")) {
                //We apply now the changes in all the cells of the row
                for(int i=0; i<getChildren().size();i++){
                    ((Labeled) getChildren().get(i)).setTextFill(Color.RED);
                    ((Labeled) getChildren().get(i)).setStyle("-fx-background-color: yellow");
                }                        
            } else {
                if(getTableView().getSelectionModel().getSelectedItems().contains(item)){
                    for(int i=0; i<getChildren().size();i++){
                        ((Labeled) getChildren().get(i)).setTextFill(Color.WHITE);;
                    }
                }
                else{
                    for(int i=0; i<getChildren().size();i++){
                        ((Labeled) getChildren().get(i)).setTextFill(Color.BLACK);;
                    }
                }
            }
        }
    }
});

This is the best way I found to apply the change of style in all the cells of the row. If you use the method "getTableRow()" inside the Cell Factory, you can't modify their cell children.

NOTE 1: If you want to change the style of the text, you have to work in the cell. If you try to do this changes directly on the row, has no effect.

NOTE 2: If you are using a separated CSS file, don't write something like this:

.table-cell {
    -fx-text-fill: Black;
}

Because if you do this, all the Java code has no effect.

Answer 4

private void customiseFactory(TableColumn<CallLogs, String> calltypel) {
    calltypel.setCellFactory(column -> {
        return new TableCell<CallLogs, String>() {
            @Override
            protected void updateItem(String item, boolean empty) {
                super.updateItem(item, empty);

                setText(empty ? "" : getItem().toString());
                setGraphic(null);

                TableRow<CallLogs> currentRow = getTableRow();

                if (!isEmpty()) {

                    if(item.equals("a")) 
                        currentRow.setStyle("-fx-background-color:lightcoral");
                    else
                        currentRow.setStyle("-fx-background-color:lightgreen");
                }
            }
        };
    });
}

This works!