CODEWITHSUNDEEP
cssjavafxtableviewbackground-colortablerow
aymen mokhtar
aymen mokhtar

Reputation: 13

JavaFX TableView Rows color

I would like to update my TableView rows color depending on the data in the cell, so I used a pseeudoClass to reference the style in Css. the rows are colored as I wanted but, it lost the selection and the mouse hover effect, now I have a colored rows without any indication to the selected row. here is my code:

    PseudoClass myPseudoClass = PseudoClass.getPseudoClass("dtta_dep");
    PseudoClass myPseudoClass1 = PseudoClass.getPseudoClass("dtta_dest");
    fplTableView.setRowFactory(tv -> new TableRow<FlightPlan>() {
        @Override
        public void updateItem(FlightPlan item, boolean empty) {
            super.updateItem(item, empty);

               this.setFocused(true);
               this.setHover(true);
                System.out.println("myPseudoClass = "+myPseudoClass.getPseudoClassName());
                pseudoClassStateChanged(myPseudoClass, (! empty) && item.Dep_aerodomProperty().get().equalsIgnoreCase("DTTA"));
                pseudoClassStateChanged(myPseudoClass1, (! empty) && item.Dest_aerodomProperty().get().equalsIgnoreCase("DTTA"));


        }
    });
        getData();

        for (int i = 0; i < listF.size(); i++) {
            System.out.println(listF.get(i).Dep_aerodomProperty().get());
        }
      selectWithService();

    });

the css file :

     .table-row-cell {
    -fx-background-color: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
}
.table-row-cell:selected {
    -fx-background-color: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}

    .table-row-cell:dtta_dep .table-cell {
        -fx-text-fill: red;
        -fx-background-color:beige;
    } 
    .table-row-cell:dtta_dest .table-cell {
        -fx-text-fill: blue;
        -fx-background-color:greenyellow;
    }

Upvotes: 1

Views: 3138

Answers (1)

James_D
James_D

Reputation: 209225

Use -fx-background instead of -fx-background-color on the table-row-cell to set the non-selected background. You can use -fx-selection-bar to set the selected color. The text fill is defined in a table cell with the -fx-text-background-color color, (i.e. the text fill for text over a -fx-background), so you can override those for the text fill in the cells.

.table-row-cell {
    -fx-background: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
    -fx-selection-bar: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}

.table-row-cell:dtta_dep {
    -fx-text-background-color: red;
    -fx-background: beige;
} 
.table-row-cell:dtta_dest {
    -fx-text-background-color: blue;
    -fx-background:greenyellow;
}

Upvotes: 1

Related Questions