10_Examples

Examples

In this section you will find some examples on how to use the NatTable.

Creating a basic grid

In this example we will create a basic grid that will show objects of type Person. You will need to the follow these steps to setup the grid:

1. Assemble the Layer stacks depending on the features you wish to enable. Every region has a layer stack backing it.
2. Add/modify configuration object to customize behaviour.

In this example we will create a grid with the following features enabled.

1. Reorder columns
2. Hide columns
3. Scrolling
4. Selection

Plugging data

The primary interface for providing data to NatTable is IDataProvider. The most common way of providing data to the table is to use a List data structure. This list contains an object for each row in the table. Each property of the row object is represented in a column.

In this example we are using a POJO named person to represent the data in a row.

public class Person { 
    private int id; 
    private String name; 
    private Date birthDate; 
    
    public Person(int id, String name, Date birthDate) { 
        this.id = id; 
        this.name = name; 
        this.birthDate = birthDate; 
    } 

    public int getId() {return id;} 
    public String getName() {return name;} 
    public Date getBirthDate() {return birthDate;} 
}

If you are using a List as your data structure, you can use the ListDataProvider out of the box. In this case our data provider will look like so

propertyNames = new String[] { "id", "name", "birthDate" }; 
new ListDataProvider(people, new ReflectiveColumnPropertyAccessor(propertyNames));

The ReflectiveColumnPropertyAccessor uses standard java getter methods to read data from the row object. If you wish to fetch data from your row object in specific ways, you can plugin a custom IColumnPropertyAccessor here.

Setting up the body region

In this stack we are plugging in the column reorder, column hide show, selection layer and scrolling functionality. The viewport is a window into the complete data set. In other words this is the rows/columns visible in the table. As you scroll the viewport moves over the underlying data set. The data provider should be wrapped up by the DataLayer. The DataLayer is always the lowermost layer in the stack. Its is responsible for providing data to the grid.

public class BodyLayerStack extends AbstractLayerTransform { 
    
    private SelectionLayer selectionLayer; 
    
    public BodyLayerStack(IDataProvider dataProvider) { 
        DataLayer bodyDataLayer = 
            new DataLayer(dataProvider); 
        ColumnReorderLayer columnReorderLayer = 
            new ColumnReorderLayer(bodyDataLayer); 
        ColumnHideShowLayer columnHideShowLayer = 
            new ColumnHideShowLayer(columnReorderLayer); 
        selectionLayer = 
            new SelectionLayer(columnHideShowLayer); 
        ViewportLayer viewportLayer = 
            new ViewportLayer(selectionLayer); 
        setUnderlyingLayer(viewportLayer); 
    } 
    
    public SelectionLayer getSelectionLayer() { 
        return selectionLayer; 
    } 
}

Setting up the column header region

Since the column header has a dependence on the body layer and hence inherits features from it. All it needs to do in most cases is to have a data provider. This data provider will supply data for the column labels.

public class ColumnHeaderLayerStack extends AbstractLayerTransform { 
    
    public ColumnHeaderLayerStack(IDataProvider dataProvider) { 
        DataLayer dataLayer = 
            new DataLayer(dataProvider); 
        ColumnHeaderLayer colHeaderLayer = 
            new ColumnHeaderLayer( 
                dataLayer, 
                bodyLayer, 
                bodyLayer.getSelectionLayer()); 
        setUnderlyingLayer(colHeaderLayer);
    } 
}

Setting up the row header layer

The row header is similar the column header. Note that the data layer also tracks the sizes of the rows/columns. Hence, you can set the default sizes in the constructor for the data layer.

public class RowHeaderLayerStack extends AbstractLayerTransform { 
    
    public RowHeaderLayerStack(IDataProvider dataProvider) { 
        DataLayer dataLayer = 
            new DataLayer(dataProvider, 50, 20); 
        RowHeaderLayer rowHeaderLayer = 
            new RowHeaderLayer( 
                dataLayer, 
                bodyLayer, 
                bodyLayer.getSelectionLayer()); 
        setUnderlyingLayer(rowHeaderLayer); 
    } 
}

Setting up the corner layer

The corner layer derives all its feature set from the column and row header layers. Hence, it can be set up very simply by passing in the dependents.

DefaultCornerDataProvider cornerDataProvider = 
    new DefaultCornerDataProvider(colHeaderDataProvider, rowHeaderDataProvider); 
CornerLayer cornerLayer = 
    new CornerLayer( 
        new DataLayer(cornerDataProvider), rowHeaderLayer, columnHeaderLayer);

Drum roll ...

Now we have setup layer stacks for all regions in the grid. These stacks need to be unified to work as a coherent whole. We do this by placing a grid layer on the top. This layer is set as the underlying layer for NatTable and we are all ready to go.

GridLayer gridLayer = 
    new GridLayer(bodyLayer, columnHeaderLayer, rowHeaderLayer, cornerLayer); 
NatTable natTable = new NatTable(parent, gridLayer);