How can I style a TableView row adjacent to a selected row? - javafx

Question

How can I style a TableView row that is adjacent to the currently selected row?
The reason I want to do this is to change the color of the border around the row, both top and bottom, while the row is selected.
The way I currently style the cell borders (i.e., the table's grid) is by having a background color with a 1px inset on the bottom of the cell. Essentially, each cell draws its own bottom border.
This means that if I want to change both the "top" and bottom border of a selected row, I also need to be able to style the cell above the currently selected cell.

Answer 1

You can add a listener to the table row's index, and the table's selected index, which updates a custom CSS pseudoclass on the table row:
TableView<MyTableType> table = ... ;
PseudoClass beforeSelected = PseudoClass.getPseudoClass("before-selected");
table.setRowFactory(tv -> {
TableRow<MyTableType> row = new TableRow<>();
ChangeListener<Number> listener = (obs, oldValue, newValue) -> {
if (row.isEmpty()) {
row.pseudoClassStateChanged(beforeSelected, false);
} else {
row.pseudoClassStateChanged(beforeSelected,
row.getIndex() == table.getSelectionModel().getSelectedIndex() - 1);
}
};
row.indexProperty().addListener(listener);
table.getSelectionModel().selectedIndexProperty().addListener(listener);
return row ;
});
Then in your CSS file, you can style the table row preceding the selected row with the selector
.table-row-cell:before-selected {
/* styles here... */
}
Here's a complete working example:
import java.util.function.Function;
import javafx.application.Application;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.Property;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.css.PseudoClass;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableRow;
import javafx.scene.control.TableView;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class StyleTest extends Application {
#Override
public void start(Stage stage) throws Exception {
TableView<Item> table = new TableView<>();
PseudoClass beforeSelected = PseudoClass.getPseudoClass("before-selected");
table.setRowFactory(tv -> {
TableRow<Item> row = new TableRow<>();
ChangeListener<Number> listener = (obs, oldValue, newValue) -> {
if (row.isEmpty()) {
row.pseudoClassStateChanged(beforeSelected, false);
} else {
row.pseudoClassStateChanged(beforeSelected,
row.getIndex() == table.getSelectionModel().getSelectedIndex() - 1);
}
};
row.indexProperty().addListener(listener);
table.getSelectionModel().selectedIndexProperty().addListener(listener);
return row ;
});
table.getColumns().add(column("Item", Item::nameProperty));
table.getColumns().add(column("Value", Item::valueProperty));
for (int i=1 ; i <= 100 ; i++) {
table.getItems().add(new Item("Item "+i, i));
}
Scene scene = new Scene(new BorderPane(table));
scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());
stage.setScene(scene);
stage.show();
}
private static <S,T> TableColumn<S,T> column(String title, Function<S, Property<T>> prop) {
TableColumn<S,T> column = new TableColumn<>(title);
column.setCellValueFactory(cellData -> prop.apply(cellData.getValue()));
return column ;
}
public static class Item {
private final StringProperty name = new SimpleStringProperty();
private final IntegerProperty value = new SimpleIntegerProperty();
public Item(String name, int value) {
setName(name);
setValue(value);
}
public final StringProperty nameProperty() {
return this.name;
}
public final String getName() {
return this.nameProperty().get();
}
public final void setName(final String name) {
this.nameProperty().set(name);
}
public final IntegerProperty valueProperty() {
return this.value;
}
public final int getValue() {
return this.valueProperty().get();
}
public final void setValue(final int value) {
this.valueProperty().set(value);
}
}
public static void main(String[] args) {
Application.launch(args);
}
}
and an example style.css (which just colors the previous row green...):
.table-row-cell:before-selected {
-fx-background: #00b140 ;
}