Data grid

The Data grid component is used to present your data in table format. It supports:

Example

You can use the Data grid component to create an app that shows a list of your customers. In this example:

Data grid component

Note: The Data grid component follows the WCAG 2.0 AA accessibility guidelines.

Properties

The following Data grid properties are available:

Main

Property Description Required
Component ID Enter a unique name for the component. See templating in components for more details. Yes
Grid data Enter an array with the grid data (you can use templating) or enter the resource that returns the data for the grid. You can select the Plus (+) button to display a drop-down with the available arrays or enter the text using Liquid. For example {{res1}}
Note: You must edit the Resource in the Resources tab.		 No
Allow editing Select the checkbox to make the grid editable. If selected, the end-user app presents:
A Plus (+) button to add rows.
A Delete button to deleted the rows.
A Three dots menu with the Reset action.		 No
Selection mode Select whether to allow single row or multiple row selection from the drop-down. No
Enable data import Select the checkbox to enable data to be imported into the grid from an Excel file. If selected, the Import option is added to the end-user app's Three dots menu. No
Skip first header row Select the checkbox and when importing data, the first row of the Excel file is treated as the header and not imported. No
Enable data export Select the checkbox to enable data to be exported from the grid as an Excel file. If selected, the Export option is added to the end-user app's Three dots menu. No

Styles

Property Description Required
Pagination Select the checkbox to enable pagination and show it in a row at the bottom of the grid. No
Rows per view Choose the number of rows displayed without having to scroll (only visible when Pagination is not selected). No
Items per page Choose the number of items displayed per page (only visible when Pagination is selected). No
Show filter row Select the checkbox to activate the filter functionality. A filter row is displayed to allow filtering on the various columns. No

Columns

Property Description Required
Column ID Enter a unique name for the column. This unique identifier is used to reference the component in Liquid. Liquid arrays start at 0. Yes
Title Enter the column title. No
Column data Choose the Table data field that you want to display data from. You can choose an option from the Plus (+) button or write the text using Liquid in the text editor. For example {{name}} No
Default value Enter the value that is displayed in this column when you add a new row. You can either create it from other columns in the table (using Liquid syntax) or enter a fixed value. No
Width Choose the width of the column. No
Datatype Choose what kind of data that is displayed in the column. Yes
Decimals Only available when Number datatype is selected. Enter how many decimals are allowed.
Options Only available when Value list datatype is selected. Enter the resource to return the data for the select, these will be the drop-down options. You can choose the array from the drop-down displayed when selecting the Plus (+) button (only arrays will be available) or type it in using Liquid. For example {{res2.countries}}. Yes
Value field Only available when Value list datatype is selected. This is the real data associated with the options. Import a value using Liquid from the previously imported array in Options, for example, {{code}}. Yes
Display field Only available when Value list datatype is selected. This is what is visible to the user. Import a value using Liquid from the previously imported array in Options, for example, {{code}}. Yes
Hidden Select the checkbox to hide the column. You can set rules to hide the column using Liquid. See add rules to trigger properties for more details. No
Read only Select the checkbox to set the column to read only. You can set rules to allow editing using Liquid. The checkbox is only available when Allow editing checkbox is selected in the Main menu. See add rules to trigger properties for more details. No
Disable filter Select the checkbox to disable filtering in this column. No
Disable move Select the checkbox to lock the column in place. No
Disable resize Select the checkbox to set a fixed width for the column and disable resizing. No
Disable sort Select the checkbox to prevent sorting within this column. No

Interactions

Property Description Required
Hidden Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. No
Add rule You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. No

Note: See Add rules to trigger properties for more information on setting rules for these properties.