Channels ▼

Eric Bruno

Dr. Dobb's Bloggers

Coding the JavaFX TableView

June 12, 2012

At first glance, using the JavaFX 2 TableView control may seem confusing. But after you have the first "Aha!" moment with it, you'll see just how easy it is to use. Thanks to JavaFX binding and the new JavaFX Scene Builder, it's all cake. Here's a sample test app, with step-by-step explanations, that serve as a roadmap to building your own table-based JavaFX applications.

Step 1: Create the Project

If you have the latest Java SE 1.7 installed (Update 4), then you have JavaFX by default — it's bundled with it. Otherwise, you can download and install it separately here. Remember, you can develop JavaFX 2.0 applications with either Java SE 1.6 or 1.7.

After JavaFX is installed, create a new JavaFX project. This is very easy with the latest NetBeans, but you can use any IDE you'd like. For now, I'll assume you're using NetBeans.

Next, give the project a name, and NetBeans generates everything you need to begin. As a result, you'll get a small application with a main class that looks like this:

public class TestJavaFX extends Application {
    public static void main(String[] args) {
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
        StackPane root = new StackPane();
        primaryStage.setScene(new Scene(root, 300, 250));;

Step 2: Define the UI Layout

Before we modify any code, however, we'll need to define the UI layout. It's easiest to do this with the JavaFX Scene Builder, which I've written about in a previous Dr. Dobb's blog. Open Scene Builder and add a TableView control to the canvas. Drag four TableColumn controls onto the table, and assign them the text names: "ID", "Item Name", "Qty", and "Price", respectively. Finally, add a button control below the table, and name it "Add Item". We'll use this button to add items to the table for illustration. It should look like this:


Save your Scene Builder work, saving the resulting FXML file in the same directory as your application's source code. Next, in the Document section on the right side of the Scene Builder window, make sure you choose your project's main class as the controller. It's important that these steps be performed in that order.

Step 3: Add the Controls to the Code

Go back to NetBeans, and prepare to make some simple modifications to the code. First, add the following FXML control declarations to the main class:

    TableView<InvoiceEntry> invoiceTbl;
    TableColumn itemIdCol;
    TableColumn itemNameCol;
    TableColumn itemQtyCol;
    TableColumn itemPriceCol;
    Button addItemBtn;

Since InvoiceEntry isn't defined yet, this code won't compile. Create this class now as defined below, and then fix the imports so the code will compile (in NetBeans, right-click on the code and choose "Fix Imports" from the menu).


public class InvoiceEntry {
    public SimpleIntegerProperty itemId = new SimpleIntegerProperty();
    public SimpleStringProperty itemName = new SimpleStringProperty("<Name>"); 
    public SimpleStringProperty price = new SimpleStringProperty();
    public SimpleIntegerProperty qty = new SimpleIntegerProperty();
    public int invoiceId;

    public Integer getItemId() {
        return itemId.get();

    public String getItemName() {
        return itemName.get();

    public String getPrice() {
        return price.get();

    public Integer getQty() {
        return qty.get();

Note: It's very important that this class contains getter methods for the data items that map to columns in the table. This is how JavaFX performs its magic and reduces the code you need to write. It calls the getters automatically, as long as they conform to the normal JavaBeans naming patterns for class data.

Finally, add an empty onAddItem() method to map to the button, as shown here:

    public void onAddItem(ActionEvent event) {

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.



I too, have just come across this and am trying to make the example work. I wanted to compare against your sample at Unfortunately, it is no longer accessible. Can you get that reinstated?


I realise I am a little late but is there any chance you could repost the stand alone version as the link no longer works?


Sure, here's a link to the official Oracle tutorial for the JavaFX TableView control:

I hope this helps. For a basic introduction to JavaFX coding, here's Oracle's "Getting Started with JavaFX" Guide:

Additionally, here's a link to the JavaFX 8 API documentation:


Hey, Eric. Your steps and code samples are confusing for a JavaFX beginner and very different from the standalone sample project you've posted on your site. I was hoping for a simple tutorial to get started with.


I apologize that this blog didn't include a standalone sample project. I've posted one on my site that you can download and work with for yourself (link below). Thank you.


Hello Eric. I try to make this project using the Netbeans IDE and the Scene Buider and i don´t get make this project because i have some errors when i try to make or define the rows of the table.

i would appreciate if you can share the project for see the possible errors that i have and because i don´t get make this table view in javafx.
My emails is "[email protected]"
thanks you soo much.