What Is a TableView?

TableView is a powerful control to display and edit data in a tabular form from a data model. A TableView consists of rows and columns. A cell is an intersection of a row and a column. Cells contain the data values. Columns have headers that describe the type of data they contain. Columns can be nested. Resizing and sorting of column data have built-in support. Figure 13-1 shows a TableView with four columns that have the header text Id, First Name, Last Name, and Birth Date. It has five rows, with each row containing data for a person. For example, the cell in the fourth row and third column contains the last name Boyd.

The TableView class represents a TableView control. The TableColumn class represents a column in a TableView. Typically, a TableView contains multiple instances of TableColumn. A TableColumn consists of cells, which are instances of the TableCell class. A TableColumn uses two properties to populate cells and render values in them. It uses a cell value factory to extract the value for its cells from the list of items. It uses a cell factory to render data in a cell. You must specify a cell value factory for a TableColumn to see some data in it. A TableColumn uses a default cell factory that knows how to render text and a graphic node.

The TableRow class inherits from the IndexedCell class. An instance of TableRow represents a row in a TableView. You would almost never use this class in an application unless you want to provide a customized implementation for rows. Typically, you customize cells, not rows.

An instance of the TableCell class represents a cell in a TableView. Cells are highly customizable. They display data from the underlying data model for the TableView. They are capable of displaying data as well as graphics.

The TableColumn, TableRow, and TableCell classes contain a tableView property that holds the reference of the TableView that contains them. The tableView property contains null when the TableColumn does not belong to a TableView.

A TablePosition represents the position of a cell. Its getRow() and getColumn() methods return the indexes of the row and column, respectively, to which the cell belongs.

The TableViewFocusModel class is an inner static class of the TableView class. It represents the focus model for the TableView to manage focus for rows and cells.

The TableViewSelectionModel class is an inner static class of the TableView class. It represents the selection model for the TableView to manage selection for rows and cells.

Like ListView and TreeView controls, TableView is virtualized. It creates just enough cells to display the visible content. As you scroll through the content, the cells are recycled. This helps keep the number of nodes in the scene graph to a minimum. Suppose you have 10 columns and 1000 rows in a TableView, and only 10 rows are visible at a time. An inefficient approach would be to create 10,000 cells, one cell for each piece of data. The TableView creates only 100 cells, so it can display ten rows with ten columns. As you scroll through the content, the same 100 cells will be recycled to show the other visible rows. Virtualization makes it possible to use TableView with a large data model without performance penalty for viewing the data in a chunk.

Subsequent sections will walk you through the steps to display and edit data in a TableView.

Creating a TableView

When you add the preceding TableView to a scene, it displays a placeholder, as shown in Figure 13-2. The placeholder lets you know that you need to add columns to the TableView. There must be at least one visible leaf column in the TableView data.

Adding Columns to a TableView

An instance of the TableColumn class represents a column in a TableView. A TableColumn is responsible for displaying and editing the data in its cells. A TableColumn has a header that can display header text, a graphic, or both. You can have a context menu for a TableColumn, which is displayed when the user right-clicks inside the column header. Use the contextMenu property to set a context menu.

The TableColumn<S, T> class is a generic class. The S parameter is the item type, which is of the same type as the parameter of the TableView. The T parameter is the type of data in all cells of the column. For example, an instance of the TableColumn<Person, Integer> may be used to represent a column to display the ID of a Person, which is of int type; an instance of the TableColumn<Person, String> may be used to represent a column to display the first name of a person, which is of String type. The following snippet of code creates a TableColumn with First Name as its header text:

TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");

A TableColumn needs to know how to get the value (or data) for its cells from the model. To populate the cells, you need to set the cellValueFactory property of the TableColumn. If the model for a TableView contains objects of a class that is based on JavaFX properties, you can use an object of the PropertyValueFactory class as the cell value factory, which takes the property name. It reads the property value from the model and populates all of the cells in the column, as in the following code:

// Use the firstName property of Person object to populate the column cells

PropertyValueFactory<Person, String> fNameCellValueFactory =

        new PropertyValueFactory<>("firstName");

fNameCol.setCellValueFactory(fNameCellValueFactory);

You need to create a TableColumn object for each column in the TableView and set its cell value factory property. The next section will explain what to do if your item class is not based on JavaFX properties, or you want to populate the cells with computed values.

The last step in setting up a TableView is to add TableColumns to its list of columns. A TableView stores references of its columns in an ObservableList<TableColumn> whose reference can be obtained using the getColumns() method of the TableView:

// Add the First Name column to the TableView

table.getColumns().add(fNameCol);

That is all it takes to use a TableView in its simplest form, which is not so “simple” after all! The program in Listing 13-2 shows how to create a TableView with a model and add columns to it. It uses the PersonTableUtil class to get the list of persons and columns. The program displays a window as shown in Figure 13-3.

// SimplestTableView.java

package com.jdojo.control;

import com.jdojo.mvc.model.Person;

import javafx.application.Application;

import javafx.scene.Scene;

import javafx.scene.control.TableView;

import javafx.scene.layout.VBox;

import javafx.stage.Stage;

public class SimplestTableView extends Application {

        public static void main(String[] args) {

                Application.launch(args);

        }

        @Override

        public void start(Stage stage) {

                // Create a TableView with a list of persons

                TableView<Person> table =

                         new TableView<>(PersonTableUtil.getPersonList());

                // Add columns to the TableView

                table.getColumns().addAll(

                         PersonTableUtil.getIdColumn(),

                         PersonTableUtil.getFirstNameColumn(),

                         PersonTableUtil.getLastNameColumn(),

                         PersonTableUtil.getBirthDateColumn());

                VBox root = new VBox(table);

                root.setStyle("""

                         -fx-padding: 10;

                   -fx-border-style: solid inside;

                   -fx-border-width: 2;

                   -fx-border-insets: 5;

                   -fx-border-radius: 5;

                   -fx-border-color: blue;""");

                Scene scene = new Scene(root);

                stage.setScene(scene);

                stage.setTitle("Simplest TableView");

                stage.show();

        }

}

Listing 13-2

Using TableView in Its Simplest Form

TableView supports nesting of columns. For example, you can have two columns, First and Last, nested inside a Name column. A TableColumn stores the list of nested columns in an observable list whose reference can be obtained using the getColumns() method of the TableColumn class. The innermost nested columns are known as leaf columns . You need to add the cell value factories for the leaf columns. Nested columns only provide visual effects. The following snippet of code creates a TableView and adds an Id column and two leaf columns, First and Last, that are nested in the Name column. The resulting TableView is shown in Figure 13-4. Note that you add the topmost columns to the TableView, not the nested columns. TableView takes care of adding all nested columns for the topmost columns. There is no limit on the level of column nesting.

// Create a TableView with data

TableView<Person> table = new TableView<>(PersonTableUtil.getPersonList());

// Create leaf columns - Id, First and Last

TableColumn<Person, String> idCol = new TableColumn<>("Id");

idCol.setCellValueFactory(new PropertyValueFactory<>("personId"));

TableColumn<Person, String> fNameCol = new TableColumn<>("First");

fNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));

TableColumn<Person, String> lNameCol = new TableColumn<>("Last");

lNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));

// Create Name column and nest First and Last columns in it

TableColumn<Person, String> nameCol = new TableColumn<>("Name");

nameCol.getColumns().addAll(fNameCol, lNameCol);

// Add columns to the TableView

table.getColumns().addAll(idCol, nameCol);

The following methods in the TableView class provide information about visible leaf columns:

TableColumn<S,?> getVisibleLeafColumn(int columnIndex)

ObservableList<TableColumn<S,?>> getVisibleLeafColumns()

int getVisibleLeafIndex(TableColumn<S,?> column)

The getVisibleLeafColumn() method returns the reference of the column for the specified column index. The column index is counted only for the visible leaf column, and the index starts at zero. The getVisibleLeafColumns() method returns an observable list of all visible leaf columns. The getVisibleLeafIndex() method returns the column reference for the specified column index of a visible leaf column.

Customizing TableView Placeholder

TableView displays a placeholder when it does not have any visible leaf columns or content. Consider the following snippet of code that creates a TableView and adds columns to it:

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

table.getColumns().addAll(PersonTableUtil.getIdColumn(),

                   PersonTableUtil.getFirstNameColumn(),

                   PersonTableUtil.getLastNameColumn(),

                   PersonTableUtil.getBirthDateColumn());

Figure 13-5 shows the results of the preceding TableView. Columns and a placeholder are displayed, indicating that the TableView does not have data.

You can replace the built-in placeholder using the placeholder property of the TableView. The value for the property is an instance of the Node class. The following statement sets a Label with a generic message as a placeholder:

table.setPlaceholder(new Label("No visible columns and/or data exist."));

You can set a custom placeholder to inform the user of the specific condition that resulted in showing no data in the TableView. The following statement uses binding to change the placeholder as the conditions change:

table.placeholderProperty().bind(

    new When(new SimpleIntegerProperty(0)

                 .isEqualTo(table.getVisibleLeafColumns().size()))

            .then(new When(new SimpleIntegerProperty(0)

                              .isEqualTo(table.getItems().size()))

                      .then(new Label("No columns and data exist."))

                      .otherwise(new Label("No columns exist.")))

            .otherwise(new When(new SimpleIntegerProperty(0)

                           .isEqualTo(table.getItems().size()))

                           .then(new Label("No data exist."))

                           .otherwise((Label)null)));

Populating a TableColumn with Data

Cells in a row of a TableView contain data related to an item such as a person, a book, and so forth. Data for some cells in a row may come directly from the attributes of the item or they may be computed.

TableView has an items property of the ObservableList<S> type. The generic type S is the same as the generic type of the TableView. It is the data model for the TableView. Each element in the items list represents a row in the TableView. Adding a new item to the items list adds a new row to the TableView. Deleting an item from the items list deletes the corresponding row from the TableView.

Tip

Whether updating an item in the items list updates the corresponding data in the TableView depends on how the cell value factory for the column is set up. I will discuss examples of both kinds in this section.

The following snippet of code creates a TableView in which a row represents a Person object. It adds data for two rows:

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

Person p1 = new Person("John", "Jacobs", null);

Person p2 = new Person("Donna", "Duncan", null);

table.getItems().addAll(p1, p2);

Adding items to a TableView is useless unless you add columns to it. Among several other things, a TableColumn object defines

• Header text and graphic for the column

• A cell value factory to populate the cells in the column

The TableColumn class gives you full control over how cells in a column are populated. The cellValueFactory property of the TableColumn class is responsible for populating cells of the column. A cell value factory is an object of the Callback class, which receives a TableColumn.CellDataFeatures object and returns an ObservableValue.

The CellDataFeatures class is a static inner class of the TableColumn class, which wraps the reference of the TableView, TableColumn, and the item for the row for which the cells of the column are being populated. Use the getTableView(), getTableColumn(), and getValue() methods of the CellDataFeatures class to get the reference of the TableView, TableColumn, and the item for the row, respectively.

When the TableView needs the value for a cell, it calls the call() method of the cell value factory object of the column to which the cell belongs. The call() method is supposed to return the reference of an ObservableValue object, which is monitored for any changes. The returned ObservableValue object may contain any type of object. If it contains a node, the node is displayed as a graphic in the cell. Otherwise, the toString() method of the object is called, and the returned string is displayed in the cell.

The following snippet of code creates a cell value factory using an anonymous class. The factory returns the reference of the firstName property of the Person class. Note that a JavaFX property is an ObservableValue.

import static javafx.scene.control.TableColumn.CellDataFeatures;

...

// Create a String column with the header "First Name" for Person object

TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");

// Create a cell value factory object

Callback<CellDataFeatures<Person, String>, ObservableValue<String>> fNameCellFactory =

  new Callback<CellDataFeatures<Person, String>, ObservableValue<String>>() {

    @Override

    public ObservableValue<String> call(CellDataFeatures<Person,

            String> cellData) {

      Person p = cellData.getValue();

      return p.firstNameProperty();

}};

// Set the cell value factory

fNameCol.setCellValueFactory(fNameCellFactory);

Using a lambda expression to create and set a cell value factory comes in handy. The preceding snippet of code can be written as follows:

TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");

fNameCol.setCellValueFactory(cellData ->

    cellData.getValue().firstNameProperty());

When a JavaFX property supplies values for cells in a column, creating the cell value factory is easier if you use an object of the PropertyValueFactory class . You need to pass the name of the JavaFX property to its constructor. The following snippet of code does the same as the code shown earlier. You would take this approach to create TableColumn objects inside the utility methods in the PersonTableUtil class .

TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");

fNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));

Tip

Using JavaFX properties as the value supplied for cells has a big advantage. The TableView keeps the value in the property and the cell in sync. Changing the property value in the model automatically updates the value in the cell.

TableColumn also supports POJO (Plain Old Java Object) as items in the TableView. The disadvantage is that when the model is updated, the cell values are not automatically updated. You use the same PropertyValueFactory class to create the cell value factory. The class will look for the public getter and setter methods with the property name you pass. If only the getter method is found, the cell will be read-only. For an xxx property, it tries looking for getXxx() and setXxx() methods using the JavaBeans naming conventions. If the type of xxx is boolean, it also looks for the isXxx() method. If a getter or a setter method is not found, a runtime exception is thrown. The following snippet of code creates a column with the header text Age Category:

TableColumn<Person, Person.AgeCategory> ageCategoryCol =

    new TableColumn<>("Age Category");

ageCategoryCol.setCellValueFactory(new PropertyValueFactory<>("ageCategory"));

It indicates that the item type is Person and the column type is Person.AgeCategory. It passes ageCategory as the property name into the constructor of the PropertyValueFactory class. First, the class will look for an ageCategory property in the Person class. The Person class does not have this property. Therefore, it will try using the Person class as a POJO for this property. Then it will look for getAgeCategory() and setAgeCategory() methods in the Person class. It finds only the getter method, getAgeCategory(), and hence it will make the column read-only.

The values in the cells of a column do not necessarily have to come from JavaFX or POJO properties. They can be computed using some logic. In such cases, you need to create a custom cell value factory and return a ReadOnlyXxxWrapper object that wraps the computed value. The following snippet of code creates an Age column that displays a computed age in years:

TableColumn<Person, String> ageCol = new TableColumn<>("Age");

ageCol.setCellValueFactory(cellData -> {

        Person p = cellData.getValue();

        LocalDate dob = p.getBirthDate();

        String ageInYear = "Unknown";

        if (dob != null) {

                long years = YEARS.between(dob, LocalDate.now());

                if (years == 0) {

                        ageInYear = "< 1 year";

                } else if (years == 1) {

                        ageInYear = years + " year";

                } else {

                        ageInYear = years + " years";

                }

        }

        return new ReadOnlyStringWrapper(ageInYear);

});

This completes the different ways of setting the cell value factory for cells of a column in a TableView. The program in Listing 13-3 creates cell value factories for JavaFX properties, a POJO property, and a computed value. It displays a window as shown in Figure 13-6.

// TableViewDataTest.java

// ...find in the book's download area

Listing 13-3

Setting Cell Value Factories for Columns

Cells in a TableView can display text and graphics. If the cell value factory returns an instance of the Node class, which could be an ImageView, the cell displays it as graphic. Otherwise, it displays the string returned from the toString() method of the object. It is possible to display other controls and containers in cells. However, a TableView is not meant for that, and such uses are discouraged. Sometimes, using a specific type of control in a cell, for example, a check box, to show or edit a boolean value provides a better user experience. I will cover such customization of cells shortly.

Using a Map As Items in a TableView

Sometimes, data in a row for a TableView may not map to a domain object, for example, you may want to display the result set of a dynamic query in a TableView. The items list consists of an observable list of Map. A Map in the list contains values for all columns in the row. You can define a custom cell value factory to extract the data from the Map. The MapValueFactory class is especially designed for this purpose. It is an implementation of the cell value factory, which reads data from a Map for a specified key.

Showing and Hiding Columns

By default, all columns in a TableView are visible. The TableColumn class has a visible property to set the visibility of a column. If you turn off the visibility of a parent column, a column with nested columns, all of its nested columns will also be invisible:

TableColumn<Person, String> idCol = new TableColumn<>("Id");

// Make the Id column invisible

idCol.setVisible(false);

...

// Make the Id column visible

idCol.setVisible(true);

Sometimes, you may want to let the user control the visibility of columns. The TableView class has a tableMenuButtonVisible property. If it is set to true, a menu button is displayed in the header area:

// Create a TableView

TableView<Person> table = create the TableView here...

// Make the table menu button visible

table.setTableMenuButtonVisible(true);

Clicking the menu button displays a list of all leaf columns. Columns are displayed as radio menu items that can be used to toggle their visibility. Figure 13-7 shows a TableView with four columns. Its tableMenuButtonVisible property is set to true. The figure shows a menu with all column names with a check mark. The menu is displayed when the menu button is clicked. The check marks beside the column names indicate that the columns are visible. Clicking the column name toggles its visibility.

Sorting Data in a TableView

TableView has built-in support for sorting data in columns. By default, it allows users to sort data by clicking column headers. It also supports sorting data programmatically. You can also disable sorting for a column or all columns in a TableView.

Sorting Data by Users

By default, data in all columns in a TableView can be sorted. Users can sort data in columns by clicking the column headers. The first click sorts the data in ascending order. The second click sorts the data in descending order. The third click removes the column from the sort order list.

By default, single column sorting is enabled. That is, if you click a column, the records in the TableView are sorted based on the data only in the clicked column. To enable multicolumn sorting, you need to press the Shift key while clicking the headers of the columns to be sorted.

TableView displays visual clues in the headers of the sorted columns to indicate the sort type and the sort order. By default, a triangle is displayed in the column header indicating the sort type. It points upward for the ascending sort type and downward for the descending sort type. The sort order of a column is indicated by dots or a number. Dots are used for the first three columns in the sort order list. A number is used for the fourth column onward. For example, the first column in the sort order list displays one dot, the second two dots, the third three dots, the fourth a number 4, the fifth a number 5, and so forth.

Figure 13-8 shows a TableView with four columns. The column headers are showing the sort type and sort orders. The sort types are descending for Last Name and ascending for others. The sort orders are 1, 2, 3, and 4 for Last Name, First Name, Birth Date, and Id, respectively. Notice that dots are used for the sort orders in the first three columns, and a number 4 is used for the Id column because it is fourth on the sort order list. This sorting is achieved by clicking column headers in the following order: Last Name (twice), First Name, Birth Date, and Id.

Customizing Data Rendering in Cells

A cell in a TableColumn is an instance of the TableCell class, which displays the data in the cell. A TableCell is a Labeled control, which is capable of displaying text, a graphic, or both.

You can specify a cell factory for a TableColumn. The job of a cell factory is to render the data in the cell. The TableColumn class contains a cellFactory property , which is a Callback object. Its call() method is passed in the reference of the TableColumn to which the cell belongs. The method returns an instance of TableCell. The updateItem() method of the TableCell is overridden to provide the custom rendering of the cell data.

TableColumn uses a default cell factory if its cellFactory property is not specified. The default cell factory displays the cell data depending on the type of the data. If the cell data comprise a node, the data are displayed in the graphic property of the cell. Otherwise, the toString() method of the cell data is called, and the returned string is displayed in the text property of the cell.

You can also use the preceding technique to display images in cells. In the updateItem() method , create an ImageView object for the image and display it using the setGraphic() method of the TableCell. TableCell contains tableColumn, tableRow, and tableView properties that store the references of its TableColumn, TableRow, and TableView, respectively. These properties are useful to access the item in the data model that represents the row for the cell.

Please explore the API documentation for other subclasses of the TableCell and how to use them. For example, you can display a combo box with a list of choices in the cells of a column. Users can select one of the choices as the cell data.

Listing 13-5 has a complete program to show how to use custom cell factories. It displays a window as shown in Figure 13-9. The program uses a cell factory to format the birth date in mm/dd/yyyy format and a cell factory to display whether a person is a baby using a check box.

// TableViewCellFactoryTest.java

// ...find in the book's download area

Listing 13-5

Using a Custom Cell Factory for a TableColumn

Selecting Cells and Rows in a TableView

Editing Data in a TableView

The onEditStart event is fired when a cell in the column enters editing mode. The onEditCommit event is fired when the user successfully commits the editing, for example, by pressing the Enter key in a TextField. The onEditCancel event is fired when the user cancels the editing, for example, by pressing the Esc key in a TextField.

The events are represented by an object of the TableColumn.CellEditEvent class. The event object encapsulates the old and new values in the cell, the row object from the items list of the TableView, TableColumn, TablePosition indicating the cell position where the editing is happening, and the reference of the TableView. Use the methods of the CellEditEvent class to get these values.

Editing Data Using a TextField

A TextFieldTableCell renders a TextField inside the cell when the cell is being edited where the user can modify the data. It renders the cell data in a Label when the cell is not being edited.

Clicking a selected cell or double-clicking an unselected cell puts the cell into editing mode, which displays the cell data in a TextField. Once the cell is in editing mode, you need to click in the TextField (one more click!) to put the caret in the TextField so you can make changes. Notice that you need a minimum of three clicks to edit a cell, which is a pain for those users who have to edit a lot of data. Let’s hope that the designers of the TableView API will make data editing less cumbersome in future releases.

If you are in the middle of editing a cell data, press the Esc key to cancel editing, which will return the cell to nonediting mode and reverts to the old data in the cell. Pressing the Enter key commits the data to the underlying data model if the TableColumn is based on a Writable ObservableValue.

If you are editing a cell using a TextFieldTableCell, moving the focus to another cell, for example, by clicking another cell, cancels the editing and puts the old value back in the cell. This is not what a user expects. At present, there is no easy solution for this problem. You will have to create a subclass of TableCell and add a focus change listener, so you can commit the data when the TextField loses focus.

Use the forTableColumn() static method of the TextFieldTableCell class to get a cell factory that uses a TextField to edit cell data. The following snippet of code shows how to do it for a First Name String column:

TableColumn<Person, String> fNameCol = new TableColumn<>("First Name");

fNameCol.setCellFactory(TextFieldTableCell.<Person>forTableColumn());

Sometimes , you need to edit nonstring data using a TextField, for example, for a date. The date may be represented as an object of the LocalDate class in the model. You may want to display it in a TextField as a formatted string. When the user edits the date, you want to commit the data to the model as a LocalDate. The TextFieldTableCell class supports this kind of object-to-string and vice versa conversion through a StringConverter. The following snippet of code sets a cell factory for a Birth Date column with a StringConverter, which converts a string to a LocalDate and vice versa. The column type is LocalDate. By default, the LocalDateStringConverter assumes a date format of mm/dd/yyyy.

TableColumn<Person, LocalDate> birthDateCol = new TableColumn<>("Birth Date");

LocalDateStringConverter converter = new LocalDateStringConverter();

birthDateCol.setCellFactory(

    TextFieldTableCell.<Person, LocalDate>forTableColumn(converter));

The program in Listing 13-6 shows how to edit data in a TableView using different types of controls. The TableView contains Id, First Name, Last Name, Birth Date, Baby, and Gender columns. The Id column is noneditable. The First Name, Last Name, and Birth Date columns use TextFieldTableCell, so they can be edited using a TextField . The Baby column is a noneditable computed field and is not backed by the data model. It uses CheckBoxTableCell to render its values. The Gender column is an editable computed field. It is not backed by the data model. It uses a ComboBoxTableCell that presents the user a list of values (Male and Female) in editing mode. When the user selects a value, the value is not saved to the data model. It stays in the cell. An onEditCommit event handler is added that prints the gender selection on the standard output. The program displays a window as shown in Figure 13-10, where it can be seen that you have already selected a gender value for all persons. The Birth Date value for the fifth row is being edited.

// TableViewEditing.java

// ...find in the book's download area

Listing 13-6

Editing Data in a TableView

Adding and Deleting Rows in a TableView

Adding and deleting rows in a TableView are easy. Note that each row in a TableView is backed by an item in the items list. Adding a row is as simple as adding an item in the items list. When you add an item to the items list, a new row appears in the TableView at the same index as the index of the added item in the items list. If the TableView is sorted, it may need to be resorted after adding a new row. Call the sort() method of the TableView to resort the rows after adding a new row.

You can delete a row by removing its item from the items list. An application provides a way for the user to indicate the rows that should be deleted. Typically, the user selects one or more rows to delete. Other options are to add a Delete button to each row or to provide a Delete check box to each row. Clicking the Delete button should delete the row. Selecting the Delete check box for a row indicates that the row is marked for deletion.

Most of the logic in the code is simple. The deleteSelectedRows() method implements the logic to delete the selected rows. When you remove an item from the items list, the selection model does not remove its index. Suppose the first row is selected. If you remove the first item from the items list, the second row, which becomes the first row, is selected. To make sure that this does not happen, you clear the selection for the row before you remove it from the items list. You delete rows from last to first (higher index to lower index) because when you delete an item from the list, all of the items after the deleted items will have different indexes. Suppose you have selected rows at indexes 1 and 2. Deleting a row at index 1 first changes the index of the index 2 to 1. Performing deletion from last to first takes care of this issue.

Scrolling in a TableView

The scrollTo() method scrolls the row with the specified index or item to the view. The scrollToColumn() and scrollToColumnIndex() methods scroll to the specified column and columnIndex, respectively.

Resizing a TableColumn

Whether a TableColumn is resizable by the user is specified by its resizable property. By default, a TableColumn is resizable. How a column in a TableView is resized is specified by the columnResizePolicy property of the TableView. The property is a Callback object. Its call() method takes an object of the ResizeFeatures class, which is a static inner class of the TableView class. The ResizeFeatures object encapsulates the delta by which the column is resized, the TableColumn being resized, and the TableView. The call() method returns true if the column was resized by the delta amount successfully. Otherwise, it returns false.

CONSTRAINED_RESIZE_POLICY ensures that the sum of the width of all visible leaf columns is equal to the width of the TableView. Resizing a column adjusts the width of all columns to the right of the resized column. When the column width is increased, the width of the rightmost column is decreased up to its minimum width. If the increased width is still not compensated, the width of the second rightmost column is decreased up to its minimum width and so on. When all columns to the right have their minimum widths, the column width cannot be increased any more. The same rule applies in the opposite direction when a column is resized to decrease its width.

Styling a TableView with CSS

The cell-selection pseudo-class is applied when the cell-level selection is enabled, whereas the row-selection pseudo-class is applied for row-level selection. The constrained-resize pseudo-class is applied when the column resize policy is CONSTRAINED_RESIZE_POLICY.

Summary

TableView is a control that is used to display and edit data in a tabular form. A TableView consists of rows and columns. The intersection of a row and a column is called a cell. Cells contain the data values. Columns have headers that describe the type of data they contain. Columns can be nested. Resizing and sorting of column data have built-in support. The following classes are used to work with a TableView control: TableView, TableColumn, TableRow, TableCell, TablePosition, TableView.TableViewFocusModel, and TableView.TableViewSelectionModel. The TableView class represents a TableView control. The TableColumn class represents a column in a TableView. Typically, a TableView contains multiple instances of TableColumn. A TableColumn consists of cells, which are instances of the TableCell class. A TableColumn is responsible for displaying and editing the data in its cells. A TableColumn has a header that can display header text, a graphic, or both. You can have a context menu for a TableColumn, which is displayed when the user right-clicks inside the column header. Use the contextMenu property to set a context menu.

The TableRow class inherits from the IndexedCell class. An instance of TableRow represents a row in a TableView. You almost never use this class in your application unless you want to provide a customized implementation for rows. Typically, you customize cells, not rows.

An instance of the TableCell class represents a cell in a TableView. Cells are highly customizable. They display data from the underlying data model for the TableView. They are capable of displaying data as well as graphics. Cells in a row of a TableView contain data related to an item such as a person, a book, and so forth. Data for some cells in a row may come directly from the attributes of the item, or they may be computed.

TableView has an items property of the ObservableList<S> type. The generic type S is the same as the generic type of the TableView. It is the data model for the TableView. Each element in the items list represents a row in the TableView. Adding a new item to the items list adds a new row to the TableView. Deleting an item from the items list deletes the corresponding row from the TableView.

The TableColumn, TableRow, and TableCell classes contain a tableView property that holds the reference of the TableView that contains them. The tableView property contains null when the TableColumn does not belong to a TableView.

A TablePosition represents the position of a cell. Its getRow() and getColumn() methods return the indexes of rows and columns, respectively, to which the cell belongs.

The TableViewFocusModel class is an inner static class of the TableView class. It represents the focus model for the TableView to manage focus for rows and cells.

The TableViewSelectionModel class is an inner static class of the TableView class. It represents the selection model for the TableView to manage selection for rows and cells.

By default, all columns in a TableView are visible. The TableColumn class has a visible property to set the visibility of a column. If you turn off the visibility of a parent column, a column with nested columns, all of its nested columns will be invisible.

You can rearrange columns in a TableView in two ways: by dragging and dropping columns to a different position or by changing their positions in the observable list of returned by the getColumns() method of the TableView class. The first option is available by default.

TableView has built-in support for sorting data in columns. By default, it allows users to sort data by clicking column headers. It also supports sorting data programmatically. You can also disable sorting for a column or all columns in a TableView.

TableView supports customization at several levels. It lets you customize the rendering of columns, for example, you can display data in a column using a check box, a combo box, or a TextField. You can also style a TableView using CSS.

The next chapter will discuss 2D shapes and how they can be added to a scene.