JavaFX how to highlight TableColumn instead of TableRow when mouse is hovered to column - css

Question

I have tried to find a solution to highlight table column when mouse is on top of that column, but I have not been able to find a solution. Is someone already found some solution for that? I have already tried to take a look to css and components with ScenicView, but it is not helping very much.

Answer 1

If you're using Java 8, you can do this quite nicely using a CSS pseudoclass. The performance of CSS pseudoclasses is very good (anecdotally, at least, it is the fastest way to change the style of JavaFX controls), and since the table view only creates a small number of table cells, even for very large data sets, this should perform very well.
Define an external css class that sets the style of a table cell with a custom pseudoclass applied as follows:
.table-cell:column-hover {
-fx-background-color: -fx-cell-focus-inner-border, -fx-selection-bar ;
-fx-background-insets: 0, 0 0 1 0 ;
-fx-background: -fx-selection-bar ;
}
(The -fx-background-color here actually changes the background color: the -fx-background is just a trick to ensure the text fill stays a suitable color relative to the background.)
Now, for each column, define a boolean property. Create a cell factory for each column that sets the boolean property to true when the mouse moves over a cell, and sets it to false when the mouse moves off. Have each cell observe the boolean property and set the pseudoclass state for the cell when it changes.
Here's an example, using the usual Person table from the standard tutorial. The interesting code is in the createCol(...) method:
import java.util.function.Function;
import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ObservableValue;
import javafx.css.PseudoClass;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TableViewTest extends Application {
private static final PseudoClass COLUMN_HOVER_PSEUDO_CLASS = PseudoClass.getPseudoClass("column-hover");
#Override
public void start(Stage primaryStage) {
TableView<Person> table = new TableView<>();
TableColumn<Person, String> firstNameCol = createCol("First Name", Person::firstNameProperty, 150);
TableColumn<Person, String> lastNameCol = createCol("Last Name", Person::lastNameProperty, 150);
TableColumn<Person, String> emailCol = createCol("Email", Person::emailProperty, 200);
table.getItems().addAll(
new Person("Jacob", "Smith", "jacob.smith#example.com"),
new Person("Isabella", "Johnson", "isabella.johnson#example.com"),
new Person("Ethan", "Williams", "ethan.williams#example.com"),
new Person("Emma", "Jones", "emma.jones#example.com"),
new Person("Michael", "Brown", "michael.brown#example.com")
);
table.getColumns().add(firstNameCol);
table.getColumns().add(lastNameCol);
table.getColumns().add(emailCol);
VBox root = new VBox(15, table);
root.setAlignment(Pos.CENTER);
Scene scene = new Scene(root, 800, 600);
scene.getStylesheets().add("table-column-hover.css");
primaryStage.setScene(scene);
primaryStage.show();
}
private TableColumn<Person, String> createCol(String title,
Function<Person, ObservableValue<String>> mapper, double size) {
TableColumn<Person, String> col = new TableColumn<>(title);
col.setCellValueFactory(cellData -> mapper.apply(cellData.getValue()));
// Is the column being hovered over with the mouse?
BooleanProperty columnHover = new SimpleBooleanProperty();
col.setCellFactory(column -> {
// basic table cell:
TableCell<Person, String> cell = new TableCell<Person, String>() ;
cell.textProperty().bind(cell.itemProperty());
// when the mouse hovers over the cell, set the columnHover to indicate
// the mouse is over the column:
cell.hoverProperty().addListener((obs, wasHovered, isNowHovered) -> {
columnHover.set(isNowHovered);
});
// update the column-hover pseudoclass state for this cell when the column is hovered over
// note this will activate the pseudoclass when the mouse is over any cell in this column
columnHover.addListener((obs, columnWasHovered, columnIsNowHovered) ->
cell.pseudoClassStateChanged(COLUMN_HOVER_PSEUDO_CLASS, columnIsNowHovered)
);
return cell ;
});
col.setPrefWidth(size);
return col ;
}
public class Person {
private final StringProperty firstName = new SimpleStringProperty(this, "firstName");
private final StringProperty lastName = new SimpleStringProperty(this, "lastName");
private final StringProperty email = new SimpleStringProperty(this, "email");
public Person(String firstName, String lastName, String email) {
this.firstName.set(firstName);
this.lastName.set(lastName);
this.email.set(email);
}
public final StringProperty firstNameProperty() {
return this.firstName;
}
public final java.lang.String getFirstName() {
return this.firstNameProperty().get();
}
public final void setFirstName(final java.lang.String firstName) {
this.firstNameProperty().set(firstName);
}
public final StringProperty lastNameProperty() {
return this.lastName;
}
public final java.lang.String getLastName() {
return this.lastNameProperty().get();
}
public final void setLastName(final java.lang.String lastName) {
this.lastNameProperty().set(lastName);
}
public final StringProperty emailProperty() {
return this.email;
}
public final java.lang.String getEmail() {
return this.emailProperty().get();
}
public final void setEmail(final java.lang.String email) {
this.emailProperty().set(email);
}
}
public static void main(String[] args) {
launch(args);
}
}

Answer 2

I guess that is only possible with many "hacks".
The TableColumn only exists in the data model of the TableView, the view part that is rendered based on the model gets rendered in rows, not in columns. So each TableCell has a table row as parent - not a table column.
If it were implemented the other way round, the table gets rendered in columns we could easily achieve this.
Now if you really want to do this, you would have to do the following:
Write a custom TableCell and register it as the CellRenderer for all columns.
If your custom cell gets (un-)hovered, retrieve its column and notify all other cells that are in the same column.
But: This will slow your application down if the table grows larger and / or the computer where the application is running is slow.