---
title: "Uniform Grid Component"
slug: "uniform-grid-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:19:38Z
published: 2026-09-15T18:19:38Z
canonical: "docs.unqork.io/uniform-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.

# Uniform Grid Component

The Uniform Grid component lets end-users add, edit, and delete structured data records in a row-based grid. Each row contains the same set of child components. Use it to capture repeating data like participants, line items, or contacts.

> **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 | `uniformGrid` | The unique identifier for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | — | The title of the grid displayed above it. |

### 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 next to the grid title. |
| Helper Text | `helperText` | Text input | — | A single line of guidance text that always displays below the grid title. |

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Label | `hideComponentLabel` | Toggle | OFF | When set to **ON**, this setting hides the grid title. The title remains visible in the Module Builder. |
| Hide Field | `hidden` | Toggle | OFF | When set to **ON**, this setting hides the entire grid from end-users. |
| Disable User Input | — | Toggle | OFF | When set to **ON**, this setting prevents end-users from adding, editing, or deleting rows in the grid. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Grid Height | `heightOption` | Choice chip | **Auto Height** | Controls the maximum height of the grid. Options include: **Auto Height** or **Define Height by Unit**. |
| ↳ Grid Height (px) | `height` | Number input | — | The explicit grid height in pixels. Visible when **Grid Height** is **Define Height by Unit**. |
| Display Pattern | `displayPattern` | Choice chip | **Inline** | Sets how the grid displays rows to end-users. Options include: **Inline** (tabular columns) or **Simple Loop** (stacked rows). |
| ↳ Labels | `selectedLabelView` | Radio button | **Show as Column Headers** | Controls how component labels display in Inline mode. Options include: **Show as Column Headers**, **Show Inline**, or **Hide Label**. Visible when **Display Pattern** is **Inline**. |
| Customize Button Styling | `customizeButtonStyling` | Toggle | OFF | When set to **ON**, this setting lets Creators customize the Add Row, Update Row, Edit Row, and Delete Row button styles. |

> Add Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `createNewLabel` | Text input | `Create New` | The label on the Add Row button. |
> | Button Style | `createThemeButton` | Drop-down | — | The color style of the Add Row button. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, **Info**, **Light**, **Dark**, or **Link**. |
> | Custom CSS Class | `createCustomClass` | Text input | — | A custom CSS class for styling the Add Row button. |
> | Left Icon | `createLeftIcon` | Text input | — | The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`). |
> |  | `createRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`). |

> Update Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `saveLabel` | Text input | `Done` | The label on the Update Row button. |
> | Button Style | `saveThemeButton` | Drop-down | — | The color style of the Update Row button. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, **Info**, **Light**, **Dark**, or **Link**. |
> | Custom CSS Class | `saveCustomClass` | Text input | — | A custom CSS class for styling the Update Row button. |
> | Left Icon | `saveLeftIcon` | Text input | — | The full icon class string for an icon displayed to the left of the button label. |
> | Right Icon | `saveRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label. |

> Edit Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `editLabel` | Text input | `Edit` | The label on the Edit Row button. |
> | Button Style | `editThemeButton` | Drop-down | — | The color style of the Edit Row button. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, **Info**, **Light**, **Dark**, or **Link**. |
> | Custom CSS Class | `editCustomClass` | Text input | — | A custom CSS class for styling the Edit Row button. |
> | Left Icon | `editLeftIcon` | Text input | — | The full icon class string for an icon displayed to the left of the button label. |
> | Right Icon | `editRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label. |

> Delete Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `deleteLabel` | Text input | `Delete` | The label on the Delete Row button. |
> | Button Style | `deleteThemeButton` | Drop-down | **Primary** | The color style of the Delete Row button. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, **Info**, **Light**, **Dark**, or **Link**. |
> | Custom CSS Class | `deleteCustomClass` | Text input | — | A custom CSS class for styling the Delete Row button. |
> | Left Icon | `deleteLeftIcon` | Text input | — | The full icon class string for an icon displayed to the left of the button label. |
> | Right Icon | `deleteRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label. |

## Actions Settings

### Triggers

Triggers fire a component when a row event occurs in the grid.

| Column | Field | Type | Description |
| --- | --- | --- | --- |
| When... | `type` | Drop-down | The row event that fires the . 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 fires. |

### User Affordances

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| ↳ User Affordances | `editOption` | Radio button | **Full Grid Editable** | Controls how end-users interact with rows in Inline mode. Visible when **Display Pattern** is **Inline**. |

> - **Full Grid Editable** (default): All rows are editable inline at all times.
> - **Full Grid Editable via Global Edit Button**: All rows become editable when the end-user clicks a global edit button.
> - **Selected Entry Editable**: Only the currently selected row is editable at a time.
> - **Entry Editable via Edit Button**: Each row has its own edit button. End-users must click a row's edit button to edit it.

## Validation Settings

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Invalid Error Message | `errors.standardizedGridValidation` | Text input | `Error(s) in the grid below.` | The error message displayed when the grid fails validation. |

### Set Number of Allowed Rows

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Minimum Number of Allowed Rows | `validate.arrayMinLength` | Number input | — | 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 | — | 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. |

## Advanced Settings

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A custom CSS class applied to the grid for custom styling. |

---

**Changelog**

| Date | Change |
| --- | --- |
| — | Initial publication. |

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 Property ID is the unique field ID used by Unqork to track and link components in your module.

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

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

The VCS (version control system) Contributor role has permissions to edit modules in a branch. Set contributors during the VCS Create a Branch process.

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

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

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.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

To execute or perform a a task. In the Operations builder, Events fire (execute) one, or multiple Operations.