Hide empty cell of TableView with CSS

Similar to the post "Apply style sheet on ListView to hide empty cells", we can create our custom css to set a specific color for all empty.

Hide empty cell of TableView with CSS

Modify from last article "Detect mouse click on JavaFX TableView and get the details of the clicked item".

Create javafx_testtableview/style_tableview.css file, copy the code from Example 26-3 Setting Color for Empty Rows in a Table View of Customization of UI Controls.

.table-row-cell:empty {
    -fx-background-color: lightyellow;
}
 
.table-row-cell:empty .table-cell {
    -fx-border-width: 0px;
}

Apply css file on the TabletView, by calling:

tableView.getStylesheets().add("javafx_testtableview/style_tableview");

Also modify handle(MouseEvent t) of MyEventHandler to check IndexOutOfBoundsException on recordList.get(index).

package javafx_testtableview;

import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_TestTableView extends Application {

    public static class Record {

        private final SimpleIntegerProperty id;
        private final SimpleStringProperty name;
        private final SimpleStringProperty lastName;
        private final SimpleStringProperty email;

        private Record(int id, String name, String lastName, String email) {
            this.id = new SimpleIntegerProperty(id);
            this.name = new SimpleStringProperty(name);
            this.lastName = new SimpleStringProperty(lastName);
            this.email = new SimpleStringProperty(email);
        }

        public int getId() {
            return this.id.get();
        }

        public void setId(int id) {
            this.id.set(id);
        }

        public String getName() {
            return this.name.get();
        }

        public void setName(String name) {
            this.name.set(name);
        }

        public String getLastName() {
            return this.lastName.get();
        }

        public void setLastName(String lastName) {
            this.lastName.set(lastName);
        }

        public String getEmail() {
            return this.email.get();
        }

        public void setEmail(String email) {
            this.email.set(email);
        }
    }
    private TableView<Record> tableView = new TableView<>();
    private final ObservableList<Record> recordList = FXCollections.observableArrayList();

    private void prepareRecordList() {
        recordList.add(new Record(12, "William", "Austin", "xxx@xxx.xxx"));
        recordList.add(new Record(15, "Chris", "redfield", "yyy@yyy.yyy"));
        recordList.add(new Record(1, "Java", "Buddy", "javabuddy@abc.yyy"));
    }

    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(new Group());
        primaryStage.setTitle("http://java-buddy.blogspot.com/");
        primaryStage.setWidth(400);
        primaryStage.setHeight(500);

        prepareRecordList();

        tableView.setEditable(false);

        Callback<TableColumn, TableCell> integerCellFactory =
                new Callback<TableColumn, TableCell>() {
            @Override
            public TableCell call(TableColumn p) {
                MyIntegerTableCell cell = new MyIntegerTableCell();
                cell.addEventFilter(MouseEvent.MOUSE_CLICKED, new MyEventHandler());
                return cell;
            }
        };

        Callback<TableColumn, TableCell> stringCellFactory =
                new Callback<TableColumn, TableCell>() {
            @Override
            public TableCell call(TableColumn p) {
                MyStringTableCell cell = new MyStringTableCell();
                cell.addEventFilter(MouseEvent.MOUSE_CLICKED, new MyEventHandler());
                return cell;
            }
        };

        TableColumn colId = new TableColumn("ID");
        colId.setCellValueFactory(
                new PropertyValueFactory<Record, String>("id"));
        colId.setCellFactory(integerCellFactory);

        TableColumn colName = new TableColumn("Name");
        colName.setCellValueFactory(
                new PropertyValueFactory<Record, String>("name"));
        colName.setCellFactory(stringCellFactory);

        TableColumn colLastName = new TableColumn("Last Name");
        colLastName.setCellValueFactory(
                new PropertyValueFactory<Record, String>("lastName"));
        colLastName.setCellFactory(stringCellFactory);

        TableColumn colEmail = new TableColumn("Email");
        colEmail.setCellValueFactory(
                new PropertyValueFactory<Record, String>("email"));
        colEmail.setCellFactory(stringCellFactory);

        tableView.setItems(recordList);
        tableView.getColumns().addAll(colId, colName, colLastName, colEmail);

        tableView.getStylesheets().add("javafx_testtableview/style_tableview");

        final VBox vbox = new VBox();
        vbox.setSpacing(5);
        vbox.setPadding(new Insets(10, 0, 0, 10));
        vbox.getChildren().add(tableView);

        ((Group) scene.getRoot()).getChildren().addAll(vbox);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    class MyIntegerTableCell extends TableCell<Record, Integer> {

        @Override
        public void updateItem(Integer item, boolean empty) {
            super.updateItem(item, empty);
            setText(empty ? null : getString());
            setGraphic(null);
        }

        private String getString() {
            return getItem() == null ? "" : getItem().toString();
        }
    }

    class MyStringTableCell extends TableCell<Record, String> {

        @Override
        public void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            setText(empty ? null : getString());
            setGraphic(null);
        }

        private String getString() {
            return getItem() == null ? "" : getItem().toString();
        }
    }

    class MyEventHandler implements EventHandler<MouseEvent> {

        @Override
        public void handle(MouseEvent t) {
            TableCell c = (TableCell) t.getSource();
            int index = c.getIndex();

            try {
                Record item = recordList.get(index);
                System.out.println("id = " + item.getId());
                System.out.println("name = " + item.getName());
                System.out.println("lastName = " + item.getLastName());
                System.out.println("email = " + item.getEmail());
            } catch (IndexOutOfBoundsException exception) {
                //...
            }

        }
    }
}

Apply style sheet on ListView to hide empty cells

The default style of ListView will fill all cells, include empty cells, as shown in last article. You can create your own style sheets to override the styles in the default style sheet and to add your own styles. Typically style sheets that you create have an extension of .css and are located in the same directory as the main class for your JavaFX application.

In the case of the following file structure, using the code:

listView.getStylesheets().add("javafx_listview/style_listview");

To hide empty list cell, edit style_listview.css.

.list-cell:empty {
    visibility:hidden;
}

Full Java code:

package javafx_listview;

import java.util.ArrayList;
import java.util.List;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
 * @web http://java-buddy.blogspot.com/
 */
public class JavaFX_ListView extends Application {

    class MyObject {

        String day;
        int number;
        Color color;

        MyObject(String d, int n, Color c) {
            day = d;
            number = n;
            color = c;
        }

        String getDay() {
            return day;
        }

        int getNumber() {
            return number;
        }
        
        Color getColor(){
            return color;
        }
    }
    List<MyObject> myList;

    //Create dummy list of MyObject
    private void prepareMyList() {
        myList = new ArrayList<>();
        myList.add(new MyObject("Sunday", 50, Color.RED));
        myList.add(new MyObject("Monday", 60, Color.GREEN));
        myList.add(new MyObject("Tuesday", 20, Color.BLUE));
        myList.add(new MyObject("Wednesday", 90, Color.VIOLET));
        myList.add(new MyObject("Thursday", 30, Color.BLUEVIOLET));
        myList.add(new MyObject("Friday", 62, Color.AZURE));
        myList.add(new MyObject("Saturday", 65, Color.GOLD));

    }

    @Override
    public void start(Stage primaryStage) {

        primaryStage.setTitle("http://java-buddy.blogspot.com/");

        prepareMyList();
        ListView<MyObject> listView = new ListView<>();
        ObservableList<MyObject> myObservableList = FXCollections.observableList(myList);
        listView.setItems(myObservableList);
        
        listView.getStylesheets().add("javafx_listview/style_listview");

        listView.setCellFactory(new Callback<ListView<MyObject>, ListCell<MyObject>>() {
            @Override
            public ListCell<MyObject> call(ListView<MyObject> p) {

                ListCell<MyObject> cell = new ListCell<MyObject>() {
                    @Override
                    protected void updateItem(MyObject t, boolean bln) {
                        super.updateItem(t, bln);
                        
                        Rectangle rect = new Rectangle(100, 20);
                        if (t != null) {
                            setText(t.getDay() + ":" + t.getNumber());
                            Color col = t.getColor();
                            setTextFill(col);
                        }
                    }
                };

                return cell;
            }
        });


        StackPane root = new StackPane();
        root.getChildren().add(listView);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Output:

Apply style sheet on ListView to hide empty cells

Related:
- Hide empty cell of TableView with CSS