---
title: "Dynamic Grid Component"
slug: "dynamic-grid-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:02:03Z
published: 2026-09-15T18:02:03Z
canonical: "docs.unqork.io/dynamic-grid-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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. |

> [!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**. |
| ↳ | `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](/unqorkai/docs/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. |

Pagination is the process of separating content into individual pages.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

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.

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 string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A place on your operating system that stores recently copied content. The clipboard only stores one item at a time.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Data types are a classification of data that determines how it is stored and interpreted.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

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.