Dynamic Grid Component

The Dynamic Grid component is a configurable data grid with inline editing, row actions, sorting, filtering, and pagination. It supports advanced column types like text, number, single-select, checkbox, multi-select, button, and date.

How to read settings tables
The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Setting	Field	Type	Default	Description
Property ID	`key`	Text input	`dynamicGrid`	A unique ID for this component instance.

Display Settings

Field Text

Setting	Field	Type	Default	Description
Title	`label`	Text input	`Dynamic Grid`	Identifies the component on the canvas and informs end-users what information is requested.

Formatting

Grid Height controls how the component calculates its vertical size. Choose from a fixed pixel height, a height based on the number of visible records, or auto height, which adjusts to fit the content.

Setting	Field	Type	Default	Description
Grid Height	`heightType`	Radio button	Define fixed height by unit	Sets how the grid height is calculated. Options include: Define fixed height by unit, Define height by number of records, or Auto height.
↳ Set grid height	`heightValuePixel`	Text input	—	The grid height in pixels. Visible when Define fixed height by unit is selected.
↳ Set grid height	`rowHeightValue`	Text input	`15`	The number of records visible simultaneously. Visible when Define height by number of records is selected.

Auto height mode might experience performance issues with large data sets.

Contextual Help

Setting	Field	Type	Default	Description
Tooltip	`tooltip`	Text input	—	A short hint that displays when a cursor is positioned over the tooltip icon.
Helper Text	`helperText`	Text input	—	Additional guidance about the field. Always visible below the label.

Default State Options

Setting	Field	Type	Default	Description
Hide Title	`hideLabel`	Toggle	OFF	When set to ON, this setting hides the title. The title remains visible on the canvas.
Hide Field	`hidden`	Toggle	OFF	Hides the component from end-users but always displays in the Module Builder.

Additional Styling

Setting	Field	Type	Default	Description
Custom CSS Class	`customClass`	Text input	—	A custom CSS class for styling the component.
Customize 'Add Row' button	`isCustomAddRowButtonEnabled`	Toggle	OFF	When set to ON, this setting lets Creators customize the Add Row button label, style, and icons.
↳ Button Label Text	`addRowButton.label`	Text input	`Add Row`	The label displayed on the Add Row button. Visible when Customize 'Add Row' button is ON.
↳ Button Style	`theme`	Drop-down	Primary	The color style of the Add Row button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, or Link. Visible when Customize 'Add Row' button is ON.
↳ Custom CSS Class	`addRowButton.customClass`	Text input	—	A custom CSS class for styling the Add Row button. Visible when Customize 'Add Row' button is ON.
↳ Left Icon	`addRowButton.leftIcon`	Text input	—	The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`). Visible when Customize 'Add Row' button is ON.
↳	`addRowButton.rightIcon`	Text input	—	The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`). Visible when Customize 'Add Row' button is ON.

Data Settings

Setting	Field	Type	Default	Description
Data Reference Key	`dataReferenceKey`	Property ID	—	The Property ID of another component whose data populates the grid.

Using a Data Reference Key disables the Editable setting(s). Consider supplying data through a logic component if the use case requires externally sourced data that an end-user can edit.

Column Setup

The Column Setup table defines the columns in the grid. Each row represents one column configuration.

Action	Description
Copy Table	Copies the current Column Setup configuration to the clipboard.
Replace Table	Replaces the current Column Setup configuration with a copied one.
Filter	Filters the rows displayed in the table.
Add Column	Adds a new column row to the table.

Column	Field	Type	Default	Description
Header Label	`label`	Text input	—	The text displayed as the column header.
Property ID	`key`	Text input	—	A unique ID for this column's data. Required.
Column Type	`type`	Drop-down	Text Field	The data type for the column. Options include: Text Field, Number, Checkbox, Single-Select Dropdown, Multi-Select Dropdown, Button, or Date.
Editable	`editable`	Checkbox	☐	When checked, this setting lets end-users edit values in this column.
Store Data	`persistent`	Checkbox	☐	When checked, the column's data persists across sessions.
Hidden	`hidden`	Checkbox	☐	When checked, this setting hides the column from end-users.
Width	`width`	Number input	`10`	The column width.
Settings	`settings`	—	—	Opens additional configuration options specific to the selected column type.
… (more options)	—	—	—	Opens a menu of column actions: Move Up, Move Down, Copy Row, Paste Row Above, Paste Row Below, Insert Above, Insert Below, and Delete.

Setting	Field	Type	Default	Description
Group rows by column	`groupByColumn`	Toggle	OFF	When set to ON, this setting lets Creators group rows by a selected column.

Group Rows
Defines the initial row groupings applied to the grid. Visible when Group rows by column is ON.
Action
Description
Copy Table
Copies the current Group Rows configuration to the clipboard.
Replace Table
Replaces the current Group Rows configuration with a copied one.
Filter
Filters the rows displayed in the table.
Add Group Row
Adds a new group row to the table.
Column
Field
Type
Description
Column
column
Drop-down
The column used to group rows.
Sort direction
order
Drop-down
The sort order for the group. Options include: Ascending, Descending, or unsorted.

Action	Description
Copy Table	Copies the current Group Rows configuration to the clipboard.
Replace Table	Replaces the current Group Rows configuration with a copied one.
Filter	Filters the rows displayed in the table.
Add Group Row	Adds a new group row to the table.

Column	Field	Type	Description
Column	`column`	Drop-down	The column used to group rows.
Sort direction	`order`	Drop-down	The sort order for the group. Options include: Ascending, Descending, or unsorted.

Setting	Field	Type	Default	Description
Show original row grouped columns	`rowGrouping.showOriginalGroupedColumns`	Toggle	OFF	When set to ON, this setting keeps grouped columns visible alongside the group header.
Repeat row grouped value in each row	`rowGrouping.repeatGroupedValue`	Toggle	OFF	When set to ON, this setting repeats the grouped column value in every row instead of displaying it only on the group header row. Not visible when Organize row groups into is Consolidated.
Organize row groups into	`groupInfo`	Segmented control	Single Column	Sets how row groups are displayed. Single Column groups display in a single dedicated column. Consolidated groups display under the next column header, directly above that column's data. Multi-Column groups each display in their own column with a unique header.
↳ Expand all groups by default	—	Toggle	OFF	When set to ON, this setting expands all row groups automatically on load. Visible when Organize row groups into is Consolidated.
↳ Show group row count	—	Toggle	OFF	When set to ON, this setting displays the number of rows in each group header. Visible when Organize row groups into is Multi-Column.

Table Actions

Setting	Field	Type	Default	Description
Manually set column widths	`columnSizeOverlay.manual`	Toggle	OFF	When set to ON, this setting lets Creators manually define column widths. When set to OFF, all columns are sized equally in the grid.
Mark all fields editable	—	Radio button	No	Sets all columns as editable. Options: Yes, No.
Mark all fields persistent	—	Radio button	No	Sets all columns as persistent. Options: Yes, No.
Mark all fields hidden	—	Radio button	No	Sets all columns as hidden. Options: Yes, No.
Expand Group rows automatically	`isAutoExpandGroupsEnabled`	Toggle	OFF	When set to ON, this setting expands all row groups automatically on load.

Column Type Settings

Clicking the settings icon in the Settings column opens a column configuration modal with display, actions, and validation options specific to the selected column type. See Dynamic Grid Column Type Settings for the full reference.

Actions Settings

Triggers

The Triggers table defines what happens when end-users interact with grid rows.

Action	Description
Copy Table	Copies the current Triggers configuration to the clipboard.
Replace Table	Replaces the current Triggers configuration with a copied one.
Filter	Filters the rows displayed in the table.
Add Trigger	Adds a new row to the table.

Column	Field	Type	Description
When...	`type`	Drop-down	The row event that triggers the action. Options include: Row is Added, Row is Deleted, Row is Edited, or Row is Saved.
Then...	`componentId`	Property ID	The Property ID of the component to trigger when the event occurs.

User Affordances

Setting	Field	Type	Default	Description
Allow user to group rows	`rowGrouping.enabled`	Toggle	OFF	When set to ON, this setting lets end-users group data-based columns by shared values. Grouping can be nested. Does not apply to Button column types.
Allow user to aggregate & pivot across all columns	`aggregationsAndPivotEnabled`	Toggle	OFF	When set to ON, this setting lets end-users perform aggregation and pivoting functions. Opens the Pivot Mode toggle. Aggregated values display when a row group or Pivot Mode is active.
Allow user to sort by column	`sorting.enabled`	Toggle	OFF	When set to ON, this setting lets end-users sort column values by clicking a column header.
↳ Allow multi-column sorting	`sorting.multiSortEnabled`	Toggle	OFF	When set to ON, this setting lets end-users sort by multiple columns simultaneously. Hold the Shift key while selecting column headers to multi-sort. Visible when Allow user to sort by column is ON.
Allow user to rearrange rows	`rowDragging`	Toggle	OFF	When set to ON, this setting lets end-users drag rows to reorder them.
Allow user to filter columns	`filtering.enabled`	Toggle	OFF	When set to ON, this setting lets end-users filter column values. A filter icon displays in each column header.
↳ Show Filter Panel	`filtering.panelVisible`	Toggle	OFF	When set to ON, this setting displays filter options in a side panel. When set to OFF, filtering is only accessible in individual column headers. Visible when Allow user to filter columns is ON.

Invoking Cell Edit State

Setting	Field	Type	Default	Description
Invoking cell edit state	`cellEditInvocation`	Radio button	Double click	Sets how end-users enter edit mode for a cell. Options: Single click, Double click.

Validation Settings

Grid Required

Setting	Field	Type	Default	Description
Require minimum valid rows	`validate.required`	Toggle	OFF	When set to ON, this setting requires the grid to have at least the minimum number of valid rows before the module can be submitted.
Required Error Message	`errors.required`	Text input	`is required`	The error message displayed when the required row condition is not met.

Set Number of Allowed Rows

Setting	Field	Type	Default	Description
Minimum Number of Allowed Rows	`validate.arrayMinLength`	Number input	`0`	The minimum number of rows required in the grid.
Min Length Error Message	`errors.arrayMinLength`	Text input	—	The error message displayed when the grid has fewer rows than the minimum.
Maximum Number of Allowed Rows	`validate.arrayMaxLength`	Number input	`0`	The maximum number of rows allowed in the grid.
Max Length Error Message	`errors.arrayMaxLength`	Text input	—	The error message displayed when the grid exceeds the maximum number of rows.

Changelog

Date	Change
—	Initial publication.