TableView

TableView in JavaFX—it’s one of the most important UI controls for displaying tabular data.

1️⃣ What is TableView?

• TableView is a JavaFX control for showing a table of data in rows and columns.
• Each row represents an item/object.
• Each column (TableColumn) represents a property of that item.
• Often used with ObservableList for dynamic data updates.

2️⃣ Key Features

1. Columns (TableColumn) – define what property is displayed.
2. Rows – each row is an object of a class (like Person).
3. Editable – you can allow users to edit values directly.
4. Sortable – columns can be clicked to sort data.
5. Selection – can select rows or cells.

3️⃣ Simple Java Example

Using the previous Person class:

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TableViewExample extends Application {

    @Override
    public void start(Stage primaryStage) {

        TableView<Person> tableView = new TableView<>();

        // Create columns
        TableColumn<Person, String> firstNameCol = new TableColumn<>("First Name");
        firstNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));

        TableColumn<Person, String> lastNameCol = new TableColumn<>("Last Name");
        lastNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));

        TableColumn<Person, Integer> ageCol = new TableColumn<>("Age");
        ageCol.setCellValueFactory(new PropertyValueFactory<>("age"));

        tableView.getColumns().addAll(firstNameCol, lastNameCol, ageCol);

        // Sample data
        tableView.setItems(FXCollections.observableArrayList(
                new Person("Ahmed", "Khaldi", 26),
                new Person("Sara", "Benali", 22),
                new Person("Omar", "Fares", 30)
        ));

        VBox root = new VBox(tableView);
        Scene scene = new Scene(root, 400, 300);

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

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

✅ Explanation:

• TableView<Person>: Table of Person objects.
• TableColumn<Person, String>: Column for a string property of Person.
• PropertyValueFactory<>("firstName"): Maps column to getFirstName() method.
• ObservableList ensures table updates automatically if data changes.

4️⃣ FXML Example

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

<VBox xmlns="http://javafx.com/javafx/17.0.2" xmlns:fx="http://javafx.com/fxml"
      fx:controller="com.example.TableViewController"
      spacing="10" style="-fx-padding: 20;">

    <TableView fx:id="tableView">
        <columns>
            <TableColumn fx:id="firstNameCol" text="First Name"/>
            <TableColumn fx:id="lastNameCol" text="Last Name"/>
            <TableColumn fx:id="ageCol" text="Age"/>
        </columns>
    </TableView>

</VBox>

Controller

package com.example;

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

public class TableViewController {

    @FXML
    private TableView<Person> tableView;

    @FXML
    private TableColumn<Person, String> firstNameCol;
    @FXML
    private TableColumn<Person, String> lastNameCol;
    @FXML
    private TableColumn<Person, Integer> ageCol;

    @FXML
    public void initialize() {
        firstNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));
        lastNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));
        ageCol.setCellValueFactory(new PropertyValueFactory<>("age"));

        tableView.setItems(FXCollections.observableArrayList(
                new Person("Ahmed", "Khaldi", 26),
                new Person("Sara", "Benali", 22),
                new Person("Omar", "Fares", 30)
        ));
    }
}

5️⃣ Notes

• Editable Table: Use tableView.setEditable(true) and TableColumn.setCellFactory(...).
• Selection: tableView.getSelectionModel() lets you handle row selection.
• Dynamic updates: Adding/removing items from the ObservableList automatically updates the table.