Table View Tutorial and Questions

Why is there an extra column displayed in a Table View by default?

When we write code to add certain number of columns to a Table View (for example 4), there is always 5 columns displayed by default (5 in this case). If we do not want to see the extra column, we need to change the column re-size policy to CONSTRAINED RESIZE POLICY by invoking the following method on Table View.

setColumnResizePolicy(CONSTRAINED_RESIZE_POLICY);

However, please note that there are some differences between using Constrained and Un-Constrained re-size policies (UCRP) which can be observed while re-sizing a given column. If we use UCRP, width of all the columns to the right will be adjusted upon re-sizing a column. Otherwise, the right most column followed by second right most column’s width will be adjusted.

Steps involved in creating a Table View and populate the data:

While creating a table to render tabular data, we need to follow the following steps to show the data appropriately:

– Create an instance of Table View class and initialize various attributes such as re-size policy, preferred height, whether or not it is editable and to hide/show table menu button etc.

– Define a data model class with appropriate properties. These properties are similar to how we define plain data transfer objects but the datatypes of these properties are part of Java FX API.

– We must provide the get/set methods for all the properties defined inside the data model class. If a get/set method does not contain the exact property name, the column to which this property is mapped will not be rendered.

– Define various table columns and add them to Table View. In addition, set a value factory on all the columns with appropriate properties. In addition, it is always a good idea to provide the preferred width for all table columns.

– Initialize the data and set the records on the table view.

Why is the data not populated in one or more table view columns?

If a get/set method for a property does not contain the exact property name, the column to which this property is mapped will not be rendered. 

If a table column is not mapped to a property correctly while setting a value factory, the data may not show up in the table as we expect.

How to convert a read only table view to editable table view? 

– Make sure to set the editable property to true on table view.

– Set the appropriate cell factory on columns which must be editable. Depending on the cell factory set, appropriate editor will be provided while editing the table cells.

– Lastly, implement an event handler to access the new value and to update the data model.

How to change the label “No content in table” which is visible in a Table View?

When there are no rows visible in the table view, a label “No content available” is shown in the middle of the table view. This can be changed by using the following method: setPlaceHolder(Node node);

Why does a Table View show more rows than a table model has?

As per current implementation, Table View always shows more rows that what is defined inside the model if preferred height is not set to match the set number of rows. I think this behavior needs to be turned off by default. There is a way to control this behavior from CSS files but not sure if there is a way to control this behavior from code. If there isn’t one, we will definitely need one soon. After all, who wants to show/see the blank rows in a table view?

Advertisements

3 thoughts on “Table View Tutorial and Questions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s