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. If the right grid component for a use case is unclear, see Grid Components.
How to read settings tables
The tables below describe each configurable option as it displays in the Unqork IDE. 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.
Note: 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.
↳ Right Icon
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.
Note: 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.
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 trigger 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.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
The Unqork tool used to build individual modules by placing and configuring components on a canvas.
Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
