Adding a Table Navigator

The tableNavigator component displays a set of buttons for scrolling through the pages of data in an associated tablePane component. Do the following to associate a tableNavigator with a tablePane:

1. Place the tableNavigator on the same page as the tablePane.

2. Assign the <tableNavigator> element's tablePaneId attribute the id value of the <tablePane> element.

In the HomePage.cls XData Contents block, add a <tableNavigator> element. Assign its tablePaneId the value “contactTable”, the id value of the tablePane component:

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{  
...
   <vgroup width="90%">
   <tableNavigator id="contactNav" tablePaneId="contactTable"/>
   <tablePane 
       width="900px" 
      id="contactTable" 
      ...
   >
...
}