documentation/examples.html

<div id="midcolumn">
	<h3>Examples</h3>
	<div id="introText">
		<p>
			In this section you will find some examples on how to use the NatTable.
		</p>
	 </div>
	 
	<div id="doccontent">
		<div class="chapter">
			<h5>Creating a basic grid</h5>
			<div class="content">
				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:
				<ol>
					<li>Assemble the Layer stacks depending on the features you wish to enable. Every region has a layer stack backing it.</li>
					<li>Add/modify configuration object to customize behaviour.</li>
				</ol>
				In this example we will create a grid with the following features enabled.
				<ol>
					<li>Reorder columns</li>
					<li>Hide columns</li>
					<li>Scrolling</li>
					<li>Selection</li>
				</ol>

				<h6>Plugging data</h6>
				<p>The primary interface for providing data to NatTable is <span class="code">IDataProvider</span>. 
				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.</p>

				<p>In this example we are using a POJO named person to represent the data in a row.</p>
				<div class="codeBlock">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;}
}</div>
				<p>If you are using a List as your data structure, you can use the <span class="code">ListDataProvider</span> out of the box. 
				In this case our data provider will look like so</p>
				<div class="codeBlock">propertyNames = new String[] { "id", "name", "birthDate" };
new ListDataProvider(people, new ReflectiveColumnPropertyAccessor(propertyNames));</div>
				<p>The <span class="code">ReflectiveColumnPropertyAccessor</span> 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 
				<span class="code">IColumnPropertyAccessor</span> here.</p>

				<h6>Setting up the body region</h6>
				<p>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 
				<span class="code">DataLayer</span>. <span class="code">The DataLayer</span> is always the lowermost layer in the stack. 
				Its is responsible for providing data to the grid.</p>
				<div class="codeBlock">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;
	}
}</div>
				
				<h6>Setting up the column header region</h6>
				<p>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.</p>
				<div class="codeBlock">public class ColumnHeaderLayerStack extends AbstractLayerTransform {

	public ColumnHeaderLayerStack(IDataProvider dataProvider) {
		DataLayer dataLayer = new DataLayer(dataProvider);
		ColumnHeaderLayer colHeaderLayer = 
			new ColumnHeaderLayer(
				dataLayer, bodyLayer, bodyLayer.getSelectionLayer());
		setUnderlyingLayer(colHeaderLayer);
	}
}</div>
				
				<h6>Setting up the row header layer</h6>
				<p>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.</p>
				<div class="codeBlock">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);
	}
}</div>
				
				<h6>Setting up the corner layer</h6>
				<p>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.</p>
				<div class="codeBlock">DefaultCornerDataProvider cornerDataProvider = 
	new DefaultCornerDataProvider(colHeaderDataProvider, rowHeaderDataProvider);
CornerLayer cornerLayer = 
	new CornerLayer(
		new DataLayer(cornerDataProvider), rowHeaderLayer, columnHeaderLayer);</div>
				
				<h6>Drum roll ...</h6>
				<p>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.</p>
				<div class="codeBlock">GridLayer gridLayer = 
	new GridLayer(bodyLayer, columnHeaderLayer, rowHeaderLayer, cornerLayer);
NatTable natTable = new NatTable(parent, gridLayer);</div>
				
			</div>
		</div>
	</div>	
</div>