---
title: "Data Grid Component"
slug: "data-grid-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T17:33:37Z
published: 2026-09-15T17:33:37Z
canonical: "docs.unqork.io/data-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.

# Data Grid Component

The Data Grid component lets end-users enter and manage structured data in a tabular format. End-users can add multiple rows of data with configurable add/remove buttons. It supports striped, bordered, and hover display styles.

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

## Display Settings

### Field Text

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

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Field | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

### Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Striped | `striped` | Toggle | OFF | Displays rows in alternating colors. |
| Bordered | `bordered` | Toggle | OFF | Adds a border around table cells. |
| Multiple Values | `multiple` | Toggle | OFF | Lets end-users enter multiple values for this field. |
| Hover | `hover` | Toggle | OFF | Highlights the row under the end-user's cursor. |
| Condensed | `condensed` | Toggle | OFF | Reduces row padding to display rows more compactly. |
| Table View | `tableView` | Toggle | ON | Shows this field's value in the submissions table view. |
| Add Another Text | `addAnother` | Text input | `Add Another` | The label on the button end-users click to add a new row. |
| Remove Row Text | `removeRow` | Text input | `Remove` | The label on the button end-users click to remove a row. |

## Data Settings

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | ON | When set to **ON**, this setting this setting stores field values to the database when the module saves, end-users navigate between Panel components, or end-users navigate between workflow screens. Set to **OFF** to exclude this field from server-side submissions. |
| Protected | `protected` | Toggle | OFF | When **ON**, prevents the stored value from being overwritten on module submission. Preserves values set server-side. |

> [!NOTE]
> Fields with **Store Data in Database** set to **OFF** are excluded from Plug-In component's API responses and Unqork's built-in tracker. When using a Plug-In component to remote-execute a module, any component whose value must be included in the API response requires **Store Data in Database** set to **ON**.

### Data Reference

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Data Reference Key | `dataReferenceKey` | Text input | — | An optional reference to another data grid to use as a data source. |

## Validation Settings

### User Input

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Required | `validate.required` | Toggle | OFF | Requires at least one row of data before the module can be submitted. |
| Required Error Message | `errors.required` | Text input | `is required` | Displays when the required field has no data. |

## Advanced Settings

### Additional Validation Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Min Length | `validate.minLength` | Number input | — | Minimum number of characters required in text fields in the grid. |
| Min Length Error Message | `errors.minlength` | Text input | `Must be longer than` | Displays when a field is shorter than the minimum. |
| Max Length | `validate.maxLength` | Number input | — | Maximum number of characters allowed in text fields in the grid. |
| Max Length Error Message | `errors.maxlength` | Text input | `Must be shorter than` | Displays when a field exceeds the maximum. |

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |
| Description | `description` | Text input | — | A single line of guidance text that always displays below the grid. |

---

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

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.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

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

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