Skip to main content

Adding a Table Pane

Zen provides the tablePane component for displaying a table of data. The tablePane can retrieve data from Caché in a number of different ways. For this example, we configure the component to automatically generate an SQL query to retrieve the data. This requires that we do the following:

  • Set the value of the tableName attribute to the name of the Caché table that contains the data.

  • Add column components to the tablePane. The colName attribute specifies the name of a column of the data table. The tablePane uses this column name in its automatically generated SQL query. The column name also specifies which data column the column component displays.

Using Caché studio, add the following tablePane component to MVFILE.PersonPage.cls. Note that it must be placed between the opening and closing <page></page> tags within the XData Contents block.


<page xmlns="http://www.intersystems.com/zen" title="Zen Persons">
  <tablePane
    align="center"
    width="900px"
    id="personTable" 
    tableName="MVFILE.PERSON"
    maxRows="1000" 
    pageSize="10" 
    showRowNumbers="true" 
    showZebra="true" 
    useSnapshot="true"
    caption="PERSON"
    nowrap="false"
    onselectrow ="zenPage.displayForm(zenThis);"
    valueColumn="ID"
 >
   <column colName="ID" width="20" />
   <column header="ItemId" colName="ItemId" width="50" />
   <column header="Name" width="175"  colName="Name" filterType="text"/>
   <column header="Hair" width="100" colName="Hair"/>
   <column header="Age" width="30"  colName="Age"/>
   <column header="Phone" width="100" colName="Phone"/>
 </tablePane> 
</page>
        

Note the following about the tablePane definition:

  • The value of the tableName attribute is MVFILE.PERSON.

  • The onselectrow specifies a JavaScript method that executes when the user selects a row of the table. We add this JavaScript function later in the tutorial.

  • The valueColumn attribute sets the “value” of the tablePane. The tablePane getValue function returns the value in the valueColumn of the table row selected by the user.

  • The colName attribute of each column associates the component with a column in MVFILE.PERSON. These columns are also used in the SQL query automatically generated by the tablePane.

  • The filterType attribute of the “Name” column specifies that a search box appears above the column allowing the user to search the table using the NAME values.

Note:

For more information on the tablePane component, read Zen Tables in Using Zen Components.

For a more in depth example of displaying data with the tablePane component, read Part II: Displaying Data with a Table in the Zen QuickStart Tutorial.

FeedbackOpens in a new tab