JavaFXのTableViewのセルに対してCSSのクラスを追加することはできるのか、ということを調べました。調べた結果、ひとつの方法がわかったのでそれを紹介します。途中は基本的な作りの紹介と説明です。本質的な部分は一番最後に登場します。

使ったCSSと画面

画面は以下です。TableViewは2つの列、firstNameの列、lastNameの列から構成されます。

赤い背景色のセルはCSSのクラスが追加されたセルです。以下のCSSファイルを適用しています。

app.css

.tableCellClass {
    -fx-background-color: red;
}

tableCellClassというクラスの要素について、背景色を赤くするというCSSです。

画面起動時に以下の動作をして、セルにクラスを追加しています。

firstNameの列は、内容が「a」で終わる場合、CSSのクラス「tableCellClass」を追加。
lastNameの列は、内容が「n」で終わる場合、CSSのクラス「tableCellClass」を追加。

TableViewの行に対応するクラス

以下のクラスをTableViewの行に対応させています。

Person

public class Person {

    private String firstName;
    private String lastName;

    public Person(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public String getFirstName() {
        return firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

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

}

app.fxml

画面を構成するfxmlは以下です。stylesheets要素がCSSを指定する箇所です。

app.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.URL?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane prefHeight="231.0" prefWidth="236.0"
  xmlns="http://javafx.com/javafx/" xmlns:fx="http://javafx.com/fxml/1"
  fx:controller="test.AppController">
  <stylesheets>
    <URL value="@app.css" />
  </stylesheets>
  <center>
    <AnchorPane prefHeight="200.0" prefWidth="200.0"
      BorderPane.alignment="CENTER">
      <children>
        <TableView fx:id="tableView" prefHeight="200.0" prefWidth="200.0"
          AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0"
          AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
          <columns>
            <TableColumn fx:id="colFirstName" prefWidth="75.0"
              text="firstName" />
            <TableColumn fx:id="colLastName" prefWidth="75.0"
              text="lastName" />
          </columns>
        </TableView>
      </children>
    </AnchorPane>
  </center>
</BorderPane>

起動クラス

起動するためのクラスが以下です。

Main.java

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class Main extends Application {

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

    @Override
    public void start(Stage stage) {
            BorderPane root;
            try {
                root = (BorderPane)FXMLLoader.load(getClass().getResource("app.fxml"));
                Scene scene = new Scene(root);
                stage.setScene(scene);
                stage.show();
            } catch (IOException e) {
                e.printStackTrace();
            }

    }
}

セルにCSSのクラスを設定する

以下が画面をコントロールをするクラスです。

AppController.java

import java.net.URL;
import java.util.ResourceBundle;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;

public class AppController implements Initializable {

    @FXML TableView<Person> tableView;
    @FXML TableColumn<Person, String> colFirstName;
    @FXML TableColumn<Person, String> colLastName;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

        // 列の自動調整
        tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        // 列の紐づけ
        colFirstName.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));
        colLastName.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));

        ObservableList<Person> data =
                FXCollections.observableArrayList(
                        new Person("Jacob", "Smith"),
                        new Person("Isabella", "Johnson"),
                        new Person("Ethan", "Williams"),
                        new Person("Emma", "Jones"),
                        new Person("Michael", "Brown")
                );
        tableView.setItems(data);

        // セルのコールバックを設定
        colFirstName.setCellFactory(tableColumn -> {
            return new TableCell<Person, String>() {
                @Override protected void updateItem(final String item, final boolean empty) {
                    super.updateItem(item, empty);

                    if (empty || item == null) {
                        setText(null);
                        setGraphic(null);
                    } else {
                        setText(item.toString());

                        // 対象外にスタイル設定されていた場合、削除する。
                        getStyleClass().remove("tableCellClass");

                        // スタイルを設定する。
                        if (item.endsWith("a")) {
                            getStyleClass().add("tableCellClass");
                        }
                    }

                }
            };
        });

        colLastName.setCellFactory(tableColumn -> {
            return new TableCell<Person, String>() {
                @Override
                protected void updateItem(final String item, final boolean empty) {
                    super.updateItem(item, empty);

                    if (empty || item == null) {
                        setText(null);
                        setGraphic(null);
                    } else {
                        setText(item.toString());

                        // 対象外にスタイル設定されていた場合、削除する。
                        getStyleClass().remove("tableCellClass");

                        // スタイルを設定する。
                        if (item.endsWith("n")) {
                            getStyleClass().add("tableCellClass");
                        }
                    }

                }
            };
        });

    }

}

上記のTableColumn#setCellFactory()メソッドを呼び出している部分が、今回のポイントです。セルに変更があった場合、Cell#updateItem()メソッドが呼び出されるようです。それを利用して、クラスの設定を記述しています。「getStyleClass().add("tableCellClass");」の箇所です。

updateItem()メソッドの書き方ですが、API仕様書のCellのページに標準的な実装が記載されてました。以下が標準的のようです。

例

 protected void updateItem(T item, boolean empty) {
     super.updateItem(item, empty);

     if (empty || item == null) {
         setText(null);
         setGraphic(null);
     } else {
         setText(item.toString());
     }
 }

上記のelseの方にクラスの設定を記述しているのですが、その前に「getStyleClass().remove("tableCellClass");」を記述しています。これはセルにクラスが残ってしまうのを回避するためです。列のヘッダー部分をクリックするとソート処理が行われ、表示順序が変わります。そのときにセルに残ったクラスを削除する処理です。