javacssjavafxtableview

TableView style scrollbar filler column area


I couldn't find a way to style (set the background color) of the filler column area that appears when the (vertical) scrollbar spawns.

I am talking about this part:

filler column

It should be possible with either CSS or code styling. I created this MRE:

record Person(String name, int age) {
}

@Override
public void start(Stage stage) {
    TableView<Person> test = new TableView<>();
    test.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY_ALL_COLUMNS);

    // Create columns
    TableColumn<Person, String> nameColumn = new TableColumn<>("Name");
    nameColumn.setCellValueFactory(p -> new SimpleStringProperty(p.getValue().name));

    TableColumn<Person, Integer> ageColumn = new TableColumn<>("Age");
    ageColumn.setCellValueFactory(person -> new SimpleIntegerProperty(person.getValue().age).asObject());

    test.getColumns().addAll(nameColumn, ageColumn);
    ObservableList<Person> data = FXCollections.observableArrayList(
            new Person("John Doe", 30),
            new Person("Jane Doe", 28),
            new Person("Michael Smith", 35),
            new Person("Emma Johnson", 22),
            new Person("Olivia Williams", 27),
            new Person("Noah Brown", 31),
            new Person("Liam Jones", 29),
            new Person("Mason Garcia", 26),
            new Person("Lucas Miller", 24),
            new Person("Ethan Davis", 32),
            new Person("Ava Martinez", 21),
            new Person("Sophia Rodriguez", 25)
    );
    test.setItems(data);

    test.setMinHeight(500);
    stage.setScene(new Scene(test));
    stage.show();
}

Solution

  • The CSS reference for TableView suggests that you may be looking for the filler, a Region used by the column-header-background. A variation of this example illustrates the effect:

    TableView top right corner

    JavaFX code:

    table.getStylesheets().add("sample.css");
    

    sample.css

    .table-view .column-header-background .filler {
        -fx-background-color: red;
    }
    

    Related use cases may be found here. For reference, adding sample.css to your fragment produces a comparable result:

    TableView filler

    TableFiller.java

    import javafx.application.Application;
    import javafx.beans.property.SimpleIntegerProperty;
    import javafx.beans.property.SimpleStringProperty;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.scene.Scene;
    import javafx.scene.control.TableColumn;
    import javafx.scene.control.TableView;
    import javafx.stage.Stage;
    
    public class TableFiller extends Application {
    
        record Person(String name, int age) {}
    
        @Override
        public void start(Stage stage) {
            TableView<Person> test = new TableView<>();
            test.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY_ALL_COLUMNS);
            TableColumn<Person, String> nameColumn = new TableColumn<>("Name");
            nameColumn.setCellValueFactory(p -> new SimpleStringProperty(p.getValue().name));
            TableColumn<Person, Integer> ageColumn = new TableColumn<>("Age");
            ageColumn.setCellValueFactory(person -> new SimpleIntegerProperty(person.getValue().age).asObject());
            test.getColumns().addAll(nameColumn, ageColumn);
            ObservableList<Person> data = FXCollections.observableArrayList(
                new Person("John Doe", 30),
                new Person("Jane Doe", 28),
                new Person("Michael Smith", 35),
                new Person("Emma Johnson", 22),
                new Person("Olivia Williams", 27),
                new Person("Noah Brown", 31),
                new Person("Liam Jones", 29),
                new Person("Mason Garcia", 26),
                new Person("Lucas Miller", 24),
                new Person("Ethan Davis", 32),
                new Person("Ava Martinez", 21),
                new Person("Sophia Rodriguez", 25)
            );
            test.setItems(data);
            test.getStylesheets().add("sample.css");
            stage.setScene(new Scene(test));
            stage.show();
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    }