TreeTableView

TreeTableColumn + TreeTableView` example with FXML included.

🌳 What is a TreeTableView in JavaFX?

🧱 Simple Definition

A TreeTableView is a UI control that combines:

👉 TreeView (hierarchy) + TableView (columns)

So you can display structured (nested) data in a table format.

🧠 How to think about it

Imagine this:

Company
 ├── IT Department
 │    ├── Ahmed (Developer)
 │    └── Sara (Tester)
 └── HR Department
      └── Ali (Manager)

👉 Now add columns like:

• Name
• Role
• Salary

That’s exactly what TreeTableView does.

⚙️ Key Idea

• Data is hierarchical (parent → child)
• Each row still has columns

🔁 Structure (Concept)

TreeTableView uses:

1. TreeItem (Nodes)

TreeItem<String> root = new TreeItem<>("Company");

👉 Represents each node (like folders/files)

2. Children

root.getChildren().add(child);

👉 Builds the hierarchy

3. Columns

TreeTableColumn<Person, String> nameColumn = new TreeTableColumn<>("Name");

👉 Like TableView columns

⚡ How it works

1. You create a root node
2. Add children nodes
3. Define columns
4. Bind data to columns
5. Show everything in TreeTableView

🔘 TreeTableView vs TableView

🔘 TreeTableView vs TreeView

🧩 Real Use Cases

Use TreeTableView when you need:

• 📁 File explorer (folders + file details)
• 🏢 Organization structure
• 🗂️ Database records with parent-child relations
• 📊 Complex structured data

⚠️ Important Note

👉 TreeTableView is more complex than:

• Button
• ChoiceBox
• CheckBox

Because:

• It requires data models
• Uses TreeItem + columns binding

🧠 Mental Model

Think:

“Table with expandable rows”

Java Version

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableView;
import javafx.scene.control.cell.TreeItemPropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TreeTableExample extends Application {

    public static class FileNode {
        private final String name;
        private final String type;

        public FileNode(String name, String type) {
            this.name = name;
            this.type = type;
        }

        public String getName() { return name; }
        public String getType() { return type; }
    }

    @Override
    public void start(Stage primaryStage) {
        TreeTableView<FileNode> treeTableView = new TreeTableView<>();

        // Columns
        TreeTableColumn<FileNode, String> nameCol = new TreeTableColumn<>("Name");
        nameCol.setCellValueFactory(new TreeItemPropertyValueFactory<>("name"));

        TreeTableColumn<FileNode, String> typeCol = new TreeTableColumn<>("Type");
        typeCol.setCellValueFactory(new TreeItemPropertyValueFactory<>("type"));

        treeTableView.getColumns().addAll(nameCol, typeCol);

        // Root node
        TreeItem<FileNode> root = new TreeItem<>(new FileNode("RootFolder", "Folder"));
        root.setExpanded(true);

        // Child nodes
        TreeItem<FileNode> child1 = new TreeItem<>(new FileNode("File1.txt", "File"));
        TreeItem<FileNode> child2 = new TreeItem<>(new FileNode("SubFolder", "Folder"));
        TreeItem<FileNode> child2File = new TreeItem<>(new FileNode("File2.txt", "File"));
        child2.getChildren().add(child2File);

        root.getChildren().addAll(child1, child2);

        treeTableView.setRoot(root);
        treeTableView.setShowRoot(true);

        VBox rootBox = new VBox(treeTableView);
        Scene scene = new Scene(rootBox, 400, 300);

        primaryStage.setScene(scene);
        primaryStage.setTitle("TreeTableColumn Example");
        primaryStage.show();
    }

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

FXML Version

tree_table_view.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.TreeTableColumn?>
<?import javafx.scene.control.TreeTableView?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx/17.0.2"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.TreeTableController"
      spacing="10" style="-fx-padding: 20;">
    
    <TreeTableView fx:id="treeTableView" showRoot="true">
        <columns>
            <TreeTableColumn fx:id="nameCol" text="Name"/>
            <TreeTableColumn fx:id="typeCol" text="Type"/>
        </columns>
    </TreeTableView>

</VBox>

TreeTableController.java

package com.example;

import javafx.fxml.FXML;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableView;
import javafx.scene.control.cell.TreeItemPropertyValueFactory;

public class TreeTableController {

    public static class FileNode {
        private final String name;
        private final String type;

        public FileNode(String name, String type) {
            this.name = name;
            this.type = type;
        }

        public String getName() { return name; }
        public String getType() { return type; }
    }

    @FXML
    private TreeTableView<FileNode> treeTableView;

    @FXML
    private TreeTableColumn<FileNode, String> nameCol;
    @FXML
    private TreeTableColumn<FileNode, String> typeCol;

    @FXML
    public void initialize() {
        // Map columns to properties
        nameCol.setCellValueFactory(new TreeItemPropertyValueFactory<>("name"));
        typeCol.setCellValueFactory(new TreeItemPropertyValueFactory<>("type"));

        // Root node
        TreeItem<FileNode> root = new TreeItem<>(new FileNode("RootFolder", "Folder"));
        root.setExpanded(true);

        // Child nodes
        TreeItem<FileNode> child1 = new TreeItem<>(new FileNode("File1.txt", "File"));
        TreeItem<FileNode> child2 = new TreeItem<>(new FileNode("SubFolder", "Folder"));
        TreeItem<FileNode> child2File = new TreeItem<>(new FileNode("File2.txt", "File"));
        child2.getChildren().add(child2File);

        root.getChildren().addAll(child1, child2);

        treeTableView.setRoot(root);
    }
}

✅ Key Points:

• TreeTableView + TreeTableColumn = hierarchical table.
• Use TreeItemPropertyValueFactory to link columns to model properties.
• Hierarchy is defined by TreeItem children.
• FXML version separates layout from controller logic.