Data Grid

The data grid component displays data in tabular format and enables you to style, filter and sort the data that is displayed. To create a simple data grid, perform the following steps:

  1. In the Outline, right-click the Stage and choose Insert > Components > Data Grid.
  2. Open the dataflow of the Stage and add a Table block to the dataflow. The Table block, by default, includes three rows of sample data.
  3. In the Outline, select the data grid and bind its Table property from the data property of the table that you added to the dataflow.
  4. The stage now displays the data grid containing the sample data from the dataflow table.

To style the table, expand the data grid in the Outline, select the component you want to style, and set its properties in the properties window. To enable users to select rows, set the data grid's Selection property. To enable users to sort the table, select Column 0 and set its Sortable property to true. To configure the order in which columns are displayed, set the data grid's Filter Type property to "whitelist" and enter a comma-separated list of column names in the Column Filter property.

Grouping Columns by Category

The following figure shows two pairs of columns grouped by category.

To group columns by category, perform the following steps:

  1. Set the data grid's Filter Type property to "whitelist" and, in the Column Filter property, enter a comma-separated list of column names, ordered so that the columns that you want to group are adjacent. For example, to create the grouping shown in the figure above, enter temp1,temp2,flow1,flow2.
  2. In the Outline, expand the data grid and delete Column 0. Click the Add Column button once for each column of data that you want to display and once for each category heading that you want to create. To duplicate the example in the figure above, create six columns.
  3. In the Outline, select all the columns that you created in the previous step and set their Type property to "Name".
  4. For the heading columns, set the Selector property to the text that you want displayed above the grouped columns. For the columns in each group, set the Selector property to the desired column heading text and set the Category property to the value that you assigned to the heading column's Selector property. To configure the example shown above, the settings are as follows:
    Column#Selector propertyCategory propertyRemark
    0Temp(blank)Group header for temperature
    1temp1TempFirst temperature column
    2temp2TempSecond temperature column
    3Flow(blank)Group header for flow
    4flow1FlowFirst flow column
    5flow2FlowSecond flow column
  5. To change the category text, edit the Label property for the heading columns.

Populating and Formatting Data Grid Columns

By default, when you add a data grid, it contains a single column editor under its Columns node (in the Outline). The Type property for this column editor is set to "All," and any changes that you make to its properties affect all the columns displayed in the data grid.

To set properties for individual columns, set Column 0's Type property to "Name" and set its Selector property to the name of the table column containing the data you want to display in this column. To add addition columns, click the Add Columns button in the Data Grid properties section.

To dynamically create, populate, and style data grid columns, use "repeater" columns, which are configured using a table that you create in the data grid dataflow. For example, the columns in the configuration table shown below defines the contents of a data grid as follows:

You can generate the configuration table dynamically, which enables you to define a data grid that displays the incoming data without requiring advance knowledge of its structure of the incoming data. The following example shows a dataflow that generates the configuration table based on a feed of earthquake data.

The preceding dataflow generates a list of columns that you can bind to the Data property of the data grid. To configure the table to include the header names, you must enable the withHeader property of the CSVParser block. The following figure shows the resulting configuration table.

Add the data grid, bind its Data property to the output of the csvParser block, and bind the output table of the tableGetColumns block to Column 0's Configuration Table property. To style individual columns, add logic to the dataflow to add columns to the configuration table for the desired settings and bind the columns to the settings.