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

# Freeform Grid Component

The Freeform Grid component lets end-users add, edit, and delete rows of data. Creators position components freely in each row using a grid-based cell layout, unlike the Uniform Grid where placement is constrained to fixed columns.

> **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 | `freeformGrid` | A unique ID for this component instance. |

## Display Settings

### Field Text

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Label Text | `label` | Text input | `Freeform Grid` | The title displayed above the grid. |

### 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 | — | A single line of guidance text that always displays below the grid title. |

### Default State Options

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

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Customize Button Styling | `customizeButtonStyling` | Toggle | OFF | When set to **ON**, this setting lets Creators customize the Add Row, Update Row, Cancel Row, and Delete Row button styles. |

> Add Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `createNewLabel` | Text input | `Create New` | The label displayed 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**, or **Info**. |
> | 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 displayed 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**, or **Info**. |
> | 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 (for example, `fas fa-plus`). |
> | Right Icon | `saveRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`). |

> Cancel Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `cancelLabel` | Text input | `Cancel` | The label displayed on the Cancel Row button. |
> | Button Style | `cancelThemeButton` | Drop-down | — | The color style of the Cancel Row button. Options include: **Primary**, **Secondary**, **Success**, **Danger**, **Warning**, or **Info**. |
> | Custom CSS Class | `cancelCustomClass` | Text input | — | A custom CSS class for styling the Cancel Row button. |
> | Left Icon | `cancelLeftIcon` | Text input | — | The full icon class string for an icon displayed to the left of the button label (for example, `fas fa-plus`). |
> | Right Icon | `cancelRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`). |

> Delete Row Button
> 
> | Setting | Field | Type | Default | Description |
> | --- | --- | --- | --- | --- |
> | Button Label Text | `deleteLabel` | Text input | `Delete` | The label displayed 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**, or **Info**. |
> | 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 (for example, `fas fa-plus`). |
> | Right Icon | `deleteRightIcon` | Text input | — | The full icon class string for an icon displayed to the right of the button label (for example, `fas fa-plus`). |

### Summary View

Defines the column headers end-users see when viewing the grid.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Summary View configuration to the clipboard. |
| **Replace Table** | Replaces the current Summary View configuration with a copied one. |
| **Filter** | Filters the rows displayed in the table. |
| **Add Summary View** | Adds a new row to the Summary View table. |

| Column | Field | Type | Description |
| --- | --- | --- | --- |
| Heading | `heading` | Text input | The text displayed as the column header. |
| Property ID | `id` | Property ID | The Property ID that populates the column. |

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Choose Summary View | `selectedSummaryView` | Radio button | **Rows** | Sets how end-users view data in the grid. **Rows** displays data as individually stacked rows. **Table** displays data in a data table. |
| Customize Detail View | `detailView` | Radio button | **Accordion** | Sets how end-users view and edit row details. **Accordion** opens the detail view as an expandable panel below the data record. **Modal** opens the detail view as a modal overlay. **Sidebar** opens the detail view as a side-panel overlay. |
| ↳ Modal Title | `modalTitle` | Text input | `Edit Details` | The title displayed in the modal. Visible when **Customize Detail View** is **Modal**. |
| ↳ Sidebar Title | `modalTitle` | Text input | `Edit Details` | The title displayed in the sidebar. Visible when **Customize Detail View** is **Sidebar**. |

## Actions Settings

### Triggers

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

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

## Validation Settings

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

### 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. |
| Maximum Number of Allowed Rows | `validate.arrayMaxLength` | Number input | `0` | The maximum number of rows allowed in the grid. |
| Min Length Error Message | `errors.arrayMinLength` | Text input | — | The error message displayed when the grid has fewer rows than the minimum. |
| 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 for styling the component. |

---

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

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

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.

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.

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

An accordion is a type of menu that displays a list of headers stacked on top of one another.

A modal is a window that appears on top of the content you are currently viewing.

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