The Grid component is used to organise data into rows and columns to make it easier to see relationships and to facilitate easier understanding. A grid allows the user to compare and check different information aspects without losing the big picture.


The grid component supports viewing and filtering presented data, editing data, adding and deleting rows, and importing and exporting data.


The following Grid component properties are available:

Property Description
Template ID The unique ID of the grid component.
Grid data The array to return the data for the grid. Only an array can be selected as a resource for this component. No options are available if none of the resources return an array.
Allow editing Sets if the grid is editable or not. If set to editable, a kebab menu (three dots) appears with the grid options Add row and Reset Grid Changes. A trash-can icon is also presented next to rows to alow them to be deleted.
Grid kebab menu
Enable data import Enables data to be imported into the grid from an Excel file. The Import Data option is then available in the kebab menu and an Import rows icon is displayed in the grid.
Grid import rows
Skip first header row If selected, when importing data the first row of the Excel file will be treated as the header and not imported.
Enable data export Enables data to be exported from the grid as an Excel file. The Export Data option is then available in the kebab menu.
Grid height Sets the height of the grid.
Show filter row When selected a filter row is presented to allow filtering on the various columns.
Grid filter row
Hidden Sets the grid to hidden.
Column ID This is the unique identifier of the column and is used in Liquid scripts to get hold of each cell's value, for example, grid1.rows[0].name.
Title The column title.
Display field Contains the LiquidJS script/template that populates the column with data. This is typically the name of a column/property in the resource that the grid is bound to, for example {{name}}.
Default value Is the value that is assigned to this column when you add a new row. It can either be calculated from other columns in the grid (using LiquidJS syntax) or be a fixed value.
Width The width of the column.
Datatype Specifies what kind of data that is displayed in the column (text, number, date, etc.).
Decimals Specifies how many decimals are allowed.
Hidden Specifies if the column is hidden or not.
Read only Specifies if the column is read only or not.
Disable filter Specifies if filtering can be done on this column.
Disable resize Specifies if the column can be resized or is a fixed width,
Disable sort Specifies if sorting is allowed on the column.