JavaFX/TableView でカラムヘッダーを二段にする

JavaFX の TableView ウィジェットで、カラムヘッダー (TableColumn) の部分を二段にして、カラム名の他にカラムの属性を視覚的に設定できるような UI を作りたかったので、いろいろ調べてみたところ、やり方が判りました。どうやら、Nested Header と呼ぶらしいですが、ここでは一つのカラムに二つのタイトルヘッダーを二段にして表示する簡単なサンプルを紹介します。

動作環境は次の通りです。

• OS: Fedora 22 beta x86_64
• Java: Java(TM) SE Runtime Environment (build 1.8.0_45-b14)
• IDE: NetBeans IDE 8.0.2

リスト：TableViewTest1.java 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

package tableviewtest1;   import java.util.ArrayList; import java.util.List; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.TableColumn; import javafx.scene.control.TableView; import javafx.scene.layout.StackPane; import javafx.stage.Stage;   public class TableViewTest1 extends Application {       public static void main(String[] args) {         launch(args);     }       @Override     public void start(Stage primaryStage) {         TableView table = new TableView();         table.setEditable(true);           TableColumn C1Col = new TableColumn("C1");         TableColumn C2Col = new TableColumn("C2");         TableColumn C3Col = new TableColumn("C3");         table.getColumns().addAll(C1Col, C2Col, C3Col);           List<String> attr;         attr = new ArrayList<>();         attr.add("x");         attr.add("y");         attr.add("z");           List<TableColumn> listColHead = table.getColumns();         for (int i = 0; i < listColHead.size(); i++) {             TableColumn objColHead = listColHead.get(i);             TableColumn subCol = new TableColumn(attr.get(i));             subCol.setId("colattr");             objColHead.getColumns().addAll(subCol);         }           StackPane root = new StackPane();         root.getChildren().add(table);           Scene scene = new Scene(root, 300, 200);         scene.getStylesheets().add(TableViewTest1.class.getResource("TableViewTest1.css").toExternalForm());           primaryStage.setScene(scene);         primaryStage.show();     } }

ほんの少しですが CSS で修飾しています。

リスト：TableViewTest1.css 

1 2 3

#colattr {     -fx-font: 12px Times; }

実行例を以下に示します。

参考サイト

1. Using JavaFX UI Controls: Table View | JavaFX 2 Tutorials and Documentation
2. JavaFX Tutorial - JavaFX TableView