Kensoft PH
  • Download
    • KenshotApplication
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
  • Download
    • KenshotApplication
  • Contact
  • About
Java Quiz
No Result
View All Result
Kensoft PH
No Result
View All Result
Home Java

How to use the Table View in JavaFX | 100% Perfect Tutorial

June 17, 2023
in Java
Reading Time: 10 mins read
0
table view in javafx web
936
VIEWS
Share on FacebookShare on TwitterShare via Email

One of the greatest and most useful control in JavaFX is TableView. Table View in JavaFX is used to display and edit data in a tabular form. In this tutorial, I will show you the process of creating and using the JavaFX TableView and by the end of this tutorial, you learn how to use the Table View in JavaFX and create a simple application that will allow the user to insert, edit and remove data from the TableView.

JavaFX Table View is similar to Google Sheets or Microsoft Excel which displays data in rows and columns. The table view in JavaFX consists of three main parts which are the table itself which is the container of the table columns and data. The other part is the table column, which defines the column of data that is displayed, edited or removed.

Contents

Toggle
  • How to use the Table View in JavaFX
    • How to insert new data into Table View in JavaFX
    • How to edit data from the TableView in JavaFX
      • Output
    • How to delete data from JavaFX TableView
  • How to use the Table View in JavaFX with FXML
      • Main.java
      • Person.java
      • table-view.fxml
      • TableViewController.java
  • YouTube Video

How to use the Table View in JavaFX

Alright, to create and implement this control in our JavaFX application, you need to create a table view object using the TableView class. After you’ve created the TableView, you’ll need to add it to the SceneGraph to make it visible in our application. But tableview itself isn’t enough to make our table work out, so we also need to create the TableColumn and add it to our table view.

Okay, let’s dive into creating the table in our JavaFX program. In the following example, we’ll use the TableView class to create a TableView control. The example code given below will create a table view that will use objects of the Person class as its items. As you’ve read about Person class, you need to create another class called Person.

Let’s get started! Please take a look at the given code below to see how to create a Table View in JavaFX without using the FXML file and the controller Class. Later in this example, I will also show you how to create the table view with FXML or you can watch my YouTube video below.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TableView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

import java.io.IOException;

public class Main extends Application {
    @Override
    public void start(Stage stage) {

        TableView<Person> tableView = new TableView<>(Person.getInitialList());
        tableView.getColumns().addAll(Person.getFistNameCol(), Person.getLastNameCol(), Person.getOriginCol());
        tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        StackPane layout = new StackPane(tableView);

        Scene scene = new Scene(layout, 400, 400);
        stage.setScene(scene);
        stage.setTitle("TableView in JavaFX");

        stage.show();
    }

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

The following code below will be the person class that is used in the main class. Make sure to create a new class named Person and copy the code below.

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableColumn;
import javafx.scene.control.cell.PropertyValueFactory;

public class Person {
    private String firstName;
    private String lastName;
    private String origin;

    public String getFirstName() {
        return firstName;
    }

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

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

    public void setOrigin(String origin) {
        this.origin = origin;
    }

    public String getLastName() {
        return lastName;
    }

    public String getOrigin() {
        return origin;
    }

    public static ObservableList<Person> getInitialList() {
        Person p1 = new Person("Chris", "James", "US");
        Person p2 = new Person("James", "Brown", "US");
        Person p3 = new Person("Jake", "Buck", "US");
        Person p4 = new Person("Blake", "David", "US");
        return FXCollections.observableArrayList(p1, p2, p3, p4);
    }

    public static TableColumn<Person, String> getFistNameCol(){
        TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");
        fNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));
        return fNameCol;
    }

    public static TableColumn<Person, String> getLastNameCol(){
        TableColumn<Person, String> lNameCol = new TableColumn<>("Last Name");
        lNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));
        return lNameCol;
    }

    public static TableColumn<Person, String> getOriginCol(){
        TableColumn<Person, String> originCol = new TableColumn<>("Origin");
        originCol.setCellValueFactory(new PropertyValueFactory<>("origin"));
        return originCol;
    }

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

The output of this code will be showing the table view in JavaFX and displays four dummy person names from the Person class.

Table View in JavaFX

Alright, as you can see in the code from the Person class, there are methods called getFirsNameCol(), getLastNameCol() and getOriginCol(). These methods are used to create the TableColumn if you wondered how to create the table column in this way of creating the table view in JavaFX. Okay let’s take one of the TableColumn methods to explain how it works.

  1. In this line of code public static TableColumn<Person, String> getOriginCol() declares a getOriginCol() method that returns the Table Column and has two parameters indicating the Person class and String which is used for displaying string type data and is associated with the Person class.
  2. This line of code TableColumn<Person, String> originCol = new TableColumn<>("Origin"); creates a new TableColumn object named originCol and the TableColumn constructor takes the string which is “Origin” that represents the table column header text or the title of the table column.
  3. This code is responsible for retrieving the the data to show or display in the table column cell. originCol.setCellValueFactory(new PropertyValueFactory<>("origin"));
  4. and the return originCol; returns the originCol object as the result of its method which is getOriginCol();

The following lines of code are to display the data in our Table View in JavaFX, you’ll need to create the Table View in your main class. You can take a look at the given code below. The code will create the TableView and add the TableColumn objects from the Person class.

TableView<Person> tableView = new TableView<>(Person.getInitialList());
tableView.getColumns().addAll(Person.getFistNameCol(), Person.getLastNameCol(), Person.getOriginCol());

How to insert new data into Table View in JavaFX

In this example of our Table view in JavaFX, you will learn how to insert new data and we’ll assume that we have a JavaFX Button handling this block of code below. We will still use the Person class for the data. Please proceed to the following code below to see how it works.

Person newData = new Person(txtFName.getText(), txtLName.getText(), txtOrigin.getText());
table.getItems().add(newData);

How to edit data from the TableView in JavaFX

You already know how to add new data in the JavaFX TableView and next basic part that you need to know is by editing the data by selecting it directly from the Table View in JavaFX. I’m going to put the edit code in a method and you need to call this method inside the initialize() method. Don’t forget to make the Table View in JavaFX editable to true. tableView.setEditable(true);

private void editData(){
    firstName.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
    firstName.setOnEditCommit(event ->{
        Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
        person.setFirstName(event.getNewValue());
        System.out.println(person.getLastName() + "'s Name was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
    });

    lastName.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
    lastName.setOnEditCommit(event ->{
        Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
        person.setLastName(event.getNewValue());
        System.out.println(person.getFirstName() + "'s Last Name was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
    });

    origin.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
    origin.setOnEditCommit(event ->{
        Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
        person.setOrigin(event.getNewValue());
        System.out.println("Origin was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
    });
}

Output

Table View In JavaFX

How to delete data from JavaFX TableView

Let’s proceed to deleting data into table view in JavaFX since you already know how to add and edit data in TableView. Let’s assume that these lines of code below are handled by a button.

    TableView.TableViewSelectionModel<Person> selectionModel = table.getSelectionModel();
    if(selectionModel.isEmpty()){
        System.out.println("You need select a data before deleting.");
    }

    ObservableList<Integer> list = selectionModel.getSelectedIndices();
    Integer[] selectedIndices = new Integer[list.size()];
    selectedIndices = list.toArray(selectedIndices);

    Arrays.sort(selectedIndices);

    for(int i = selectedIndices.length - 1; i >= 0; i--){
        selectionModel.clearSelection(selectedIndices[i].intValue());
        table.getItems().remove(selectedIndices[i].intValue());
    }

How to use the Table View in JavaFX with FXML

In this example, I’ll provide with you the code for creating the table view in JavaFX with FXML file. You can also watch my Youtube video below to see how it works. The first code snippet will be the Main class and to be followed by the Person.java, the fxml file and its controller class.

Main.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.TableView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

import java.io.IOException;

public class Main extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("table-view.fxml"));
        Scene scene = new Scene(loader.load());
        stage.setTitle("JavaFX TableView");
        stage.setScene(scene);


        // these lines of code here will be creating the tableview without using an FXML file
        /*TableView<Person> tableView = new TableView<>(Person.getInitialList());
        tableView.getColumns().addAll(Person.getFistNameCol(), Person.getLastNameCol(), Person.getOriginCol());
        tableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

        StackPane layout = new StackPane(tableView);

        Scene scene = new Scene(layout, 400, 400);
        stage.setScene(scene);
        stage.setTitle("TableView in JavaFX");*/
        // end

        stage.show();
    }

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

Person.java

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableColumn;
import javafx.scene.control.cell.PropertyValueFactory;

public class Person {
    private String firstName;
    private String lastName;
    private String origin;

    public String getFirstName() {
        return firstName;
    }

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

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

    public void setOrigin(String origin) {
        this.origin = origin;
    }

    public String getLastName() {
        return lastName;
    }

    public String getOrigin() {
        return origin;
    }

    // this code is for retrieving any data without using the FXML
    public static ObservableList<Person> getInitialList() {
        Person p1 = new Person("Chris", "James", "US");
        Person p2 = new Person("James", "Brown", "US");
        Person p3 = new Person("Jake", "Buck", "US");
        Person p4 = new Person("Blake", "David", "US");
        return FXCollections.observableArrayList(p1, p2, p3, p4);
    }

    public static TableColumn<Person, String> getFistNameCol(){
        TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");
        fNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));
        return fNameCol;
    }

    public static TableColumn<Person, String> getLastNameCol(){
        TableColumn<Person, String> lNameCol = new TableColumn<>("Last Name");
        lNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));
        return lNameCol;
    }

    public static TableColumn<Person, String> getOriginCol(){
        TableColumn<Person, String> originCol = new TableColumn<>("Origin");
        originCol.setCellValueFactory(new PropertyValueFactory<>("origin"));
        return originCol;
    }

    // end of the code without using an FXML file

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

table-view.fxml

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="474.0" prefWidth="617.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.kensoftph.tableview.TableViewController">
   <center>
      <TableView fx:id="table" editable="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
        <columns>
          <TableColumn fx:id="firstName" prefWidth="75.0" text="First name" />
          <TableColumn fx:id="lastName" prefWidth="75.0" text="Last name" />
            <TableColumn fx:id="origin" prefWidth="75.0" text="Origin" />
        </columns>
         <columnResizePolicy>
            <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
         </columnResizePolicy>
      </TableView>
   </center>
   <top>
      <VBox alignment="CENTER" prefHeight="96.0" prefWidth="617.0" BorderPane.alignment="CENTER">
         <children>
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="10.0">
               <children>
                  <TextField fx:id="txtFName" promptText="First name" />
                  <TextField fx:id="txtLName" promptText="Last name" />
                  <TextField fx:id="txtOrigin" promptText="Origin" />
               </children>
            </HBox>
            <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0" spacing="5.0">
               <children>
                  <Button mnemonicParsing="false" onAction="#btnInsert" text="Insert Data" />
                  <Button mnemonicParsing="false" onAction="#deleteData" text="Delete Data" />
               </children>
            </HBox>
         </children>
         <padding>
            <Insets bottom="15.0" />
         </padding>
      </VBox>
   </top>
</BorderPane>

TableViewController.java

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.control.cell.TextFieldTableCell;

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

public class TableViewController implements Initializable {

    @FXML
    private TableColumn<Person, String> firstName;

    @FXML
    private TableColumn<Person, String> lastName;

    @FXML
    private TableColumn<Person, String> origin;

    @FXML
    private TableView<Person> table;

    @FXML
    private TextField txtFName;

    @FXML
    private TextField txtLName;

    @FXML
    private TextField txtOrigin;

    ObservableList<Person> initialData(){
        Person p1 = new Person("Sample","Last Sample Name"," US");
        Person p2 = new Person("Test","Last Name"," PH");
        return FXCollections.observableArrayList(p1, p2);
    }

    @FXML
    private void btnInsert(ActionEvent event){

        if(!txtFName.getText().isEmpty() || !txtLName.getText().isEmpty() || !txtOrigin.getText().isEmpty()){
            Person newData = new Person(txtFName.getText(), txtLName.getText(), txtOrigin.getText());
            table.getItems().add(newData);
            txtFName.clear();
            txtLName.clear();
            txtOrigin.clear();
        }else{
            System.out.println("Fields should not be empty.");
        }
    }

    @FXML
    private void deleteData(ActionEvent event){
        TableView.TableViewSelectionModel<Person> selectionModel = table.getSelectionModel();
        if(selectionModel.isEmpty()){
            System.out.println("You need select a data before deleting.");
        }

        ObservableList<Integer> list = selectionModel.getSelectedIndices();
        Integer[] selectedIndices = new Integer[list.size()];
        selectedIndices = list.toArray(selectedIndices);

        Arrays.sort(selectedIndices);

        for(int i = selectedIndices.length - 1; i >= 0; i--){
            selectionModel.clearSelection(selectedIndices[i].intValue());
            table.getItems().remove(selectedIndices[i].intValue());
        }
    }

    @Override
    public void initialize(URL url, ResourceBundle resourceBundle) {
        firstName.setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));
        lastName.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));
        origin.setCellValueFactory(new PropertyValueFactory<Person, String>("origin"));

        table.setItems(initialData());

        editData();
    }

    private void editData(){
        firstName.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
        firstName.setOnEditCommit(event ->{
            Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
            person.setFirstName(event.getNewValue());
            System.out.println(person.getLastName() + "'s Name was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
        });

        lastName.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
        lastName.setOnEditCommit(event ->{
            Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
            person.setLastName(event.getNewValue());
            System.out.println(person.getFirstName() + "'s Last Name was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
        });

        origin.setCellFactory(TextFieldTableCell.<Person>forTableColumn());
        origin.setOnEditCommit(event ->{
            Person person = event.getTableView().getItems().get(event.getTablePosition().getRow());
            person.setOrigin(event.getNewValue());
            System.out.println("Origin was updated to "+ event.getNewValue() +" at row "+ (event.getTablePosition().getRow() + 1));
        });
    }
}

That’s it! You can also copy these codes for Table View in JavaFX and test it! If you want to learn this tutorial Table View in JavaFX via video, you can watch the youtube video below.

YouTube Video

YouTube video
YouTube video
Previous Post

JavaFX DirectoryChooser: 100% Perfect Step-By-Step Guide

Next Post

How to use the TreeView in JavaFX | 100% Perfect Tutorial

KENSOFT

KENSOFT

What’s up! Kent is my name. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java

Related tutorials

How to Use the JavaFX Pie Chart 100% For Beginners
Java

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
205
How to Connect to an API Using JavaFX
Java

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
216
JavaFX SQLite Database CRUD Tutorial
Java

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024
590
Next Post
TreeView in JavaFX

How to use the TreeView in JavaFX | 100% Perfect Tutorial

How to Play Video in JavaFX MediaPlayer from a File

How to Play Video in JavaFX MediaPlayer from a File

JavaFX Music Player

JavaFX Music Player Tutorial with JavaFX Media Player

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tools

Multi-platform installer builder

Java profiler

  • Trending
  • Comments
  • Latest
MySQL database using XAMPP

How to connect Java to MySQL database using Xampp server | 100% best for beginners

October 27, 2020 - Updated on January 23, 2023
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

April 11, 2021 - Updated on July 3, 2022
JavaFX 17

How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

November 15, 2021 - Updated on December 13, 2021
hide and show password in jPasswordField

JPasswordField in Java Hide or Show Password | 100% best for beginners

April 2, 2021 - Updated on September 21, 2022
Failed to automatically set up a JavaFX Platform

Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

3DES in Java and AES in Java

How to use AES and 3DES in Java | 100% best for beginners

JavaFX Splash Screen

How to create JavaFX Splash Screen | 100% best for beginners

set up JavaFX and Scene Builder

How to set up JavaFX and Scene Builder in NetBeans IDE | 100% best for beginners

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024
How to take a screenshot on PC using Kenshot

How to Take a Screenshot on PC Using Kenshot: A Full Guide

January 18, 2024 - Updated on October 6, 2024

Latest Tutorials

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024

Popular Tutorials

  • MySQL database using XAMPP

    How to connect Java to MySQL database using Xampp server | 100% best for beginners

    0 shares
    Share 0 Tweet 0
  • Failed to automatically set up a JavaFX Platform SOLVED Apache NetBeans 12.3 | Best way

    0 shares
    Share 0 Tweet 0
  • How To install JDK 17 and JavaFX 17 on NetBeans IDE | Best

    0 shares
    Share 0 Tweet 0
Facebook Instagram Youtube Github LinkedIn Discord
Kensoft PH

What’s up! I'm Kent. The name KENSOFT is derived from the words Kent and Software. My programming language of choice is Java, which I use to create computer applications. In a company, I created applications and a website.

Categories

Website

Check the status

Privacy Policy

Terms and Condition

Sitemap

Latest Tutorials

How to Use the JavaFX Pie Chart 100% For Beginners

How to Use the JavaFX Pie Chart 100% For Beginners

June 12, 2024 - Updated on October 6, 2024
How to Connect to an API Using JavaFX

How to Connect to an API Using JavaFX

May 26, 2024 - Updated on September 28, 2024
JavaFX SQLite Database CRUD Tutorial

JavaFX SQLite Database CRUD Tutorial | Note Application

May 26, 2024 - Updated on September 28, 2024

© 2024 Made With Love By KENSOFT PH

No Result
View All Result
  • Download
    • Kenshot
  • Contact
  • About
  • Java Quiz

© 2024 Made With Love By KENSOFT PH

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.