The data grid component lets you display data from a source table, as a set of rows and columns. This page includes quick steps for creating data grids and answers to some frequently asked questions about data grids.
When you create a data grid, you use column editors to control which columns appear in the grid and to control some properties of those columns, such as sortability.
There are three types of column editors: All, Name, and Repeater.
By default, one All column editor is included in a new data grid component. The All type of column editor dictates that all of the columns from the source table are included in the grid, except for those that you filter out of the entire grid. The All column editor also lets you edit properties for all grid columns. Regarding column order, when you use the All column editor, grid columns will appear in the same order as source table columns, unless you use a whitelist filter—in that case, grid columns appear in the order specified in the Filter property. With the All column editor type, grid columns have the same column heading text as source table columns.
If you prefer, you can use Name column editors instead. Each Name column editor dictates that one specific table column is included in the grid, and each Name column editor also allows you to edit properties for that particular column, including the column heading text. When you use Name column editors, columns in the grid appear in the order that the column editors appear in the Outline, unless you use a whitelist filter. Just as with an All column editor, the column order in the whitelist filter overrides the column order elsewhere. Additionally, Name column editors allow you to create and manage categories.
Name column editors are also useful when creating column renderers. A column renderer displays a specified symbol in each cell of a column, using symbol parameters and data from the source table to affect each symbol instance. Column renderers are similar to repeaters. You can see two examples of column renderers in the FAQ, under "How do I put images in my data grid?" and "How do I clip content in my data grid?"
The third and final column editor type is the Repeater column editor. This is the most complex type and allows for the most flexibility in the data grid. A Repeater column editor lets you use a configuration table to determine:
Which source table columns appear in the grid
Which symbols represent those columns (if any)
Properties of the symbols
You can see an example of a Repeater column editor in the FAQ, under "How do I use a Repeater column editor? How do I make a grid with a dynamic number of columns?"
Load Data
Typically, before you can design a chart or data grid, you must load a table in the dataflow.
Style the data grid rows using the Property Inspector.
In the Outline, select the "Column 0" column editor, which is a child of the "Columns" node.
Set Sortable to TRUE.
This allows the user to sort the data grid by any column.
Using the Category Feature
Data grid categories allow you to create multiple levels of headers for grid columns. If columns within the same category are adjacent, their category headings are merged:
If columns within the same category are not adjacent, the category headings are not merged:
When you create data grid categories, you add them to the Outline as column editors.
These steps show you first how to use the category feature to categorize columns by type of data, and then how to change the categorization to be by device. These steps illustrate adding only one level of categorization, but you could use the same process to create multiple levels.
Create a table for your data grid that looks like the table below. Use the following column headers:
device_1_temp
device_2_temp
device_1_airflow
device_2_airflow
Delete the existing column editor, and create six new column editors for your data grid by clicking the Add Column button six times.
Set the Type property for all six column editors to Name. You can select all six column editors and then change the property once.
Set the Selector and Category properties for each column editor as follows:
For Column 0, set Selector to Temp and leave Category blank.
For Column 1, set Selector to device_1_temp and set Category to Temp.
For Column 2, set Selector to device_2_temp and set Category to Temp.
For Column 3, set Selector to Flow and leave Category blank.
For Column 4, set Selector to device_1_airflow and set Category to Flow.
For Column 5, set Selector to device_2_airflow and set Category to Flow.
This creates a table with four columns that are grouped into two categories.
You can change the names in the Outline for clarity, and this will also update the Label property for each editor, changing what appears in the headers.
As another example, change the categories to the following:
For Column 0, change Selector to Device 1 and leave Category blank. Change Label to Device 1.
For Column 1, keep Selector as device_1_temp and set Category to Device 1.
For Column 2, keep Selector as device_2_temp and set Category to Device 2.
For Column 3, set Selector to Device 2 and leave Category blank. Change Label to Device 2.
For Column 4, keep Selector as device_1_airflow and set Category to Device 1.
For Column 5, keep Selector as device_2_airflow and set Category to Device 2.
This creates a table with four columns that are grouped into two categories, but the categories are not together.
To place columns in the same category next to one another, select column editors in the Outline and then use the Bring Forward and Send Backward commands in the Quick Access panel. You cannot reorder column editors in the Outline by dragging.
This creates a table with four columns that are grouped into two categories.
Data Grid FAQ
For frequently asked questions about manipulating the tables that determine the contents of a data grid, see Working with Tables.
How do I edit data grid properties?
How do I edit data grid properties?
How do I edit data grid properties?
In general, to edit properties for a data grid or the elements it comprises:
Use the Outline to select a data grid, its header, its rows, or one of its column editors.
For the Column Filter property, enter a comma-separated list of table column names.
These can either be the columns to include or the columns to exclude.
For the Filter Type property, select Whitelist to include the listed columns, or Blacklist to exclude them.
What is a column editor? How do I specify different properties for each column?
What is a column editor? How do I specify different properties for each column?
What is a column editor? How do I specify different properties for each column?
You edit column properties using column editors. You specify whether each column editor affects all columns or just one column. Using a column editor, you can edit properties such as Sortable, column width, and header label.
To edit all of the data grid columns at once, you can use the default "Column 0" editor, which is a child of the "Column" node in the Outline.
In the Property Inspector, for Type, select Name, and for Selector, type the name of one of your table columns.
In the Outline, select the data grid.
In the Property Inspector, under the Data Grid properties, click Add Column.
In the Outline, select the new column editor.
In the Property Inspector, for Type, select Name, and for Selector, type the name of another one of your table columns.
Repeat steps 3–6 until you have an editor for each column.
Now you can edit each column's properties individually.
How do I change column header text?
How do I change column header text?
How do I change column header text?
You can change your column header text at the table level using a Column Mapping block, or you can do it in Property Inspector.
To edit header text using the Property Inspector:
Create column editors for each column as described above.
In the Property Inspector, under Fill and Stroke Properties, edit the properties for Hov.
"Hov" stands for "Hovered Row."
How do I let the user select rows? How do I style selected rows?
How do I let the user select rows? How do I style selected rows?
How do I let the user select rows? How do I style selected rows?
You can enable the user to select rows by clicking. You can make selection interactive by styling the selected rows.
Even if you do not enable the user to select rows, you can manually specify one selected row using the Selected Index property.
In the Property Inspector, under Fill and Stroke Properties, edit the properties for Sel.
"Sel" stands for "Selected Row."
How do I put images in my data grid?
How do I put images in my data grid?
How do I put images in my data grid?
These steps show you how to make a data grid that includes a column of images with tooltips. In these steps, you will use Table and Column Mapping dataflow blocks and a symbol.
Configure the Table and Upload Images
Right-click the Stage in the Document window or Outline, and select Insert > Components > Data Grid.
In the Outline, right-click the data grid, and select Dataflow to open the dataflow window.
Drag a Table dataflow block to the dataflow window.
Click the button for the data property to open the table, and then edit the table so that it appears as shown in the image below. For help, see Enter Data in a Table Dataflow Block.
Add a Column Mapping dataflow block to the dataflow window.
Bind the data property of the Table block to the input property of the Column Mapping block.
For the Column Mapping block:
Set retainColumns to TRUE.
Set name 0 to Image.
Set from 0 to ="assets/"+Status+".png"
This creates a new table that contains the image paths in a column.
With the data grid selected in the Outline, bind the output table of the Column Mapping block to the Table property.
The contents of the table are displayed in the data grid component.
Create the Symbol
Right-click the Stage in the Document window or Outline, and select Insert > Components > Image.
Right-click the image component that you added, and select Convert to Symbol.
When prompted, name the symbol status, and click OK.
In the Symbols panel, right-click status, and select Edit.
In the Outline, right-click status, and select Edit Properties.
In the Symbol Parameters dialog, drag one string and one path to the right-hand panel.
Double-click the parameter names to rename the string parameter Tooltip and the path parameter Image.
Bind the Tooltip parameter to the Tooltip property in the Property Inspector.
Bind the Image parameter to the URL property in the Property Inspector.
Close the Symbol Parameters dialog, and then click OK to close the symbol editing dialog.
Edit the Column Properties
With the data grid selected in the Outline, under Data Grid, click Add Column twice.
The column editors appear under the Columns node in the Outline.
Select "Column 1" in the Outline.
For Column 1:
Set Type to Name.
Set Selector to Status.
Set Visible to FALSE.
Select "Column 2" in the Outline.
For Column 2:
Set Label to Status.
Set Type to Name.
Set Selector to Image.
Set Symbol to status.
Click Dataflow to open the dataflow for the data grid.
Select the Column Mapping block, and click the button to open the output table.
Expand "Status" in the Outline, and select renderer.
Drag the Status table column header to the Tooltip property.
Drag the Image table column header to the Image property.
This populates the Status column of the data grid with images that display tooltips when moused over.
How do I clip content in my data grid?
How do I clip content in my data grid?
How do I clip content in my data grid?
Clipping content is similar to including images as described above. In both cases, you must use a column renderer to customize the content of the cells. To clip cell content using a column renderer:
Create a symbol based on a text component. Set the Clip Content property of the text component to TRUE. Then, create a string parameter and bind it to the Text property of the text component insider the symbol.
In the Data Grid properties, create a separate column editor for every column in which you want to clip content.
Use the symbol that you created in step 1 for the Symbol property of all of the column editors. This creates column renderers. If you want to clip content in the headers as well, you can bind the same symbol or a different symbol to the Header Symbol property.
Bind the columns of the data grid's source table to each renderer's string property by dragging the table column headers. If you created header renderers, bind the table column headers to these fields as well.
How do I use a Repeater column editor? How do I make a grid with a dynamic number of columns?
How do I use a Repeater column editor? How do I make a grid with a dynamic number of columns?
How do I use a Repeater column editor? How do I make a grid with a dynamic number of columns?
Parameters: a string parameter called heading_text that is bound to the Text property; optional formatting parameters
In the dataflow, create a "data" table for your data grid that looks like the table below. Use these column headings:
ID
description
type_image_path
progress_percent
page
Bind the data table to the data grid.
In the dataflow, create a "config" table for your data grid that looks like the table below. Use these column headings:
selector (Use data table column names in this column. Names are case sensitive.)
symbol (Use symbol names in this column. Names are case sensitive.)
headingSym (Use symbol names in this column. Names are case sensitive.)
sortable (Use boolean values.)
heading_text
In the Outline, select the default column editor, which is named "Column 0", and set Type to Repeater.
With the "Column 0" column editor selected, create these bindings:
Bind the "config" table to Configuration Table.
Bind the selector column to the Selector property.
Bind the symbol column to the Symbol property.
Bind the headingSym column to the Header Symbol property.
Bind the sortable column to the Sortable property.
In the Outline, select the renderer, and bind data table columns to the path, progress_percent, and page properties.
Select the header renderer, and bind the heading_text column of the config table to the heading_text property.
Style the two remaining columns, either using the data grid Rows properties, or using custom symbols that you create.
Notes
You can bind to a Repeater column renderer property from either the data table or the configuration table.
If multiple symbol properties have the same name and data type and are used by the same Repeater column renderer, those properties will only appear once in the renderer properties and will share the same data binding.
Data Grid Properties
The following properties affect the data grid component. For data grids, you can customize properties for the header, rows, and columns.
For a guide to using the data grid component, see Data Grid.
These properties affect the entire data grid. To see these properties in the Property Inspector, click on your data grid on the Stage or in the Outline.
Table
Table
Table
Defines the table that the data grid uses as a data source.
The Table property
Column Filter
Column Filter
Column Filter
Specifies the columns for a filter, as a comma-separated list of table column names. Use the Filter Type property to specify whether these columns are shown in this data grid or hidden from it. The order of columns in a whitelist filter overrides the column order in the Outline and the source table.
The Column Filter property
Filter Type
Filter Type
Filter Type
Specifies how this filter handles the listed columns.
Whitelist
Only the listed columns are shown in this data grid. Columns appear in the order specified in the filter.
Blacklist
The listed columns are hidden from this data grid.
The Filter Type property
Sort Order
Sort Order
Sort Order
Specifies whether the data is sorted in ascending or descending order.
To change whether the data is treated as strings or numbers when sorted, open the dataflow for this data grid and edit the Sort block.
The Sort Order property
Sort Column
Sort Column
Sort Column
Specifies the name of the column by which to sort the data. Only works if the column has the Sortable property enabled.
The Sort Column property
Add Column
Add Column
Add Column
Click this button to add a column editor to the Outline. Each column editor lets you edit the properties of a group of one or more data grid columns.
The Add Column property
Data Grid Header Properties
These properties affect the data grid header. There are four groups of Data Grid Header properties. To see these properties in the Property Inspector, click on Header in the Outline.
Header Text and Font
The Text and Font properties for headers are similar to those for text components.
Header Gridlines
These properties control the style of the vertical lines between column headings and the horizontal lines between column headings and category headings.
Header Horizontal Stroke Color
Header Horizontal Stroke Color
Header Horizontal Stroke Color
Defines the stroke color for the horizontal lines that divide the column headings and category headings.
The Header Horizontal Stroke Color property
Header Horizontal Stroke Style
Header Horizontal Stroke Style
Header Horizontal Stroke Style
Defines the stroke style for the horizontal lines that divide the column headings and category headings.
The Header Horizontal Stroke Style property
Header Horizontal Stroke Weight
Header Horizontal Stroke Weight
Header Horizontal Stroke Weight
Defines the stroke weight for the horizontal lines that divide the column headings and category headings.
The Header Horizontal Stroke Weight property
Header Vertical Stroke Color
Header Vertical Stroke Color
Header Vertical Stroke Color
Defines the stroke color for the vertical lines that divide the column headings.
The Header Vertical Stroke Color property
Header Vertical Stroke Style
Header Vertical Stroke Style
Header Vertical Stroke Style
Defines the stroke style for the vertical lines that divide the column headings.
The Header Vertical Stroke Style property
Header Vertical Stroke Weight
Header Vertical Stroke Weight
Header Vertical Stroke Weight
Defines the stroke weight for the vertical lines that divide the column headings.
The Header Vertical Stroke Weight property
Header Fill and Stroke
The Fill and Stroke properties for headers are similar to those for most components.
Header Position and Size
This property controls the height of the header.
Header Height
Header Height
Header Height
Defines the height of the header in pixels. A value of Auto makes the header height follow the size of its content.
The Header Height property
Data Grid Row Properties
These properties affect data grid rows. There are four groups of Data Grid Rows properties. To open these properties in the Property Inspector, click on Rows in the Outline.
Row Text and Font
The Text and Font properties for data grid rows rows are similar to those for text components.
Row Gridlines
These properties control the lines that divide the columns and rows.
Gridlines
Gridlines
Gridlines
Specifies whether the Property Inspector displays property editing options for horizontal gridlines, vertical gridlines, or both. Changing which gridline properties are displayed does not reset any properties.
The Gridlines property
Horizontal Line
Horizontal Line
Horizontal Line
These properties define the horizontal lines between rows. They are similar to the Stroke properties for most components
The Horizontal Line properties
Vertical Line
Vertical Line
Vertical Line
These properties define the vertical lines between columns.They are similar to the Stroke properties for most components.
The Vertical Line properties
Row Fill and Stroke
The Fill and Stroke properties for rows are similar to those for most components. You can define fill and stroke for the types of rows listed in the table. In each case, the properties define the fill for the row, and the stroke that outlines the row.
Property
Description
Main Rows
The first group of alternating rows.
Alternate Rows
The second group of alternating rows.
Hovered Row
The row that the user mouses over.
Focused Row
The row that is in focus.
Selected Rows
The selected rows. Only works if selection is enabled for this data grid.
Row Position and Size
This property controls the row height:
Row Height
Row Height
Row Height
Defines the height in pixels of each data grid row.
The Row Height property
Column Properties
These properties affect data grid columns. There are three groups of column properties. To open these properties in the Property Inspector, expand Column in the Outline, and select a column editor.
A column editor lets you edit the properties of a group of one or more data grid columns. To add a column editor, go to the General Data Grid Properties and click Add Column.
Column Editor Properties
These properties specify which columns this editor controls, as well as sorting and visibility for those columns.
Column Label
Column Label
Column Label
Defines the label to be used as heading text for columns controlled by this column editor.
all
An All column editor dictates that all of the columns from the source table are included in the grid, except for those that you filter out of the entire grid. Grid columns appear in source table order, unless you specify another order using a whitelist filter. Properties edited for this column editor apply to all columns.
name
Each Name column editor dictates that one column from the source table is included in the grid. Grid columns appear in the order in which they appear in the Outline, unless you specify another order using a whitelist filter. Properties edited for this column editor apply to this column.
repeater
A Repeater column editor lets you use a configuration table to determine which source table columns appear in the grid, which symbols represent those columns (if any), and properties of the symbols.
The Column Editor Type property
Selector
Selector
Column Editor Selector
Specifies which column or columns this column editor controls. If the column editor type is All, this property does nothing. If the column editor type is Name, this property specifies the name of one column in the source table. If the column editor type is Repeater, this property specifies which column of the configuration table contains the data table column names.
The Selector property
Category
Category
Category
Specifies the category to which this column belongs. Must match the Selector property of some other column editor in this grid. For more information, see Using the Category Feature.
Sortable
Sortable
Sortable
Specifies whether the columns affected by this column editor are sortable.
The Sortable property
Visible
Visible
Visible
Defines whether this element is visible. Regardless of value, the element affects layout and is stored in the user's browser memory. Because the element is stored in memory, performance might be affected.
TRUE
This element is visible.
FALSE
This element is not visible, but it still affects layout and is stored in browser memory.
The Visible property
Sorting Indicator
Sorting Indicator
Sorting Indicator
Specifies whether a graphic appears in the column that currently sorts the data. The Sorting Indicator property for a Name column editor overrides the Sorting Indicator property for an All column editor.
The Sorting Indicator property
Sort Ascending
Sort Ascending
Sort Ascending
Sorts the data using this column, in ascending order. Using this trigger changes the Sort Order to Ascending, under Data Grid properties.
The Sort Ascending property
Sort Descending
Sort Descending
Sort Descending
Sorts the data using this column, in descending order. Using this trigger changes the Sort Order to Descending, under Data Grid properties.
The Sort Descending property
Delete
Delete
Delete
Deletes this column editor.
The Delete property
Column Symbol Properties
These properties control symbols that appear in this data grid.
Symbol
Symbol
Symbol
Specifies the name of the symbol that appears in each cell of the columns affected by this column editor.
The Symbol property
Header Symbol
Header Symbol
Header Symbol
Specifies the name of the symbol that appears in the header of the columns affected by this column editor.