---
title: "Data Grid Component"
slug: "data-grid-component"
updated: 2025-12-04T19:22:39Z
published: 2025-12-04T19:22:39Z
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

UDesignerClassic Designer

The **Data Grid component** is a display and layout tool designed to organize components into columns and rows. Adding a component to a Data Grid component uses the added component's Label Text to create a new column in Express View. Then, it displays the component's field in a row matching that column. Creators can also configure the Data Grid component so end-users can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users need to enter multiple datasets in an organized format. For example, let's say you're a financial planner. You need to collect your end-user's account name, type, and balance. Use a Data Grid component to display one or more fields so you can capture these values.

You'll find the Data Grid component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Settings

### Field Text

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Default State Options

| Setting | Description |
| --- | --- |
| **Hide Field** | Displays or hides the field from view. Setting Hide Field toggle ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** hides it in Express View. Setting the toggle back to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** displays the field. The component will always remain visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |

### Formatting

| Setting | Description |
| --- | --- |
| **Striped** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to alternate table row colors. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Bordered** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to display borders around the edges and each row of the table. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Multiple Values** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to let the end-user make multiple sections in the table. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Hover** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to display row highlights when hovering over an individual row. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Condensed** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to remove extra spacing between rows. The effect you see depends on the custom CSS styles applied to the application. By default, this setting is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Table View** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** to display values in the submission. Set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** when you do not want the valuesdisplayed. By default, this setting is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**. |
| **Add Another Text** | Set the label value for the Add New Row button. |
| **Remove Row Text** | Set the label value for the Remove Row button. |

[![A static image displaying the Data Grid Component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_400_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(11).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Input Behavior

| Setting | Description |
| --- | --- |
| **Input Behavior** | Controls how end-users interact with the component. Choose from the following options: - **Enable User Input**: Allow end-users to view and enter data in this field. - **Disable User Input**: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a **prohibited** symbol. - **Read Only - Legacy**: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None. |

## Data Settings

### Data Storage

| Setting | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
| Protected | When checked, the API call won't returns this field as part of the API call. Set to unchecked when you want the field returned as part of the call. By default, this checkbox is unchecked. |

[![A static image displaying the Data Grid Component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_400_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(7).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

### Data Reference Key

With a Data Reference Key, you can use data from another component to populate your Data Grid component. You'll most often achieve this function using a [Data Table](/v1/docs/data-table-component) component. Add your data to this component and then reference it in your Data Grid component's Settings drawer.

Think of this as a hybrid of using Values and [Data Collections](/v1/docs/data-collections) to populate a [Radio Buttons](/v1/docs/radio-buttons-component) component. You still use data stored in Unqork, but it's data from your module instead of a Data Collection.

| Setting | Description |
| --- | --- |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |

## Validation Settings

### User Input

| Setting | Description |
| --- | --- |
| **Required** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(ON)**, the end-user must enter a value in the component's visible fields. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**, the input is optional. By default, Required is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)**. |
| **Required Error Message** | A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |

[![A static image displaying the Data Grid Component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_400_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(8).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Advanced Settings

### Error Messages

| Setting | Description |
| --- | --- |
| **Min/Max Length** | Sets the minimum or the maximum number of characters an end-user must enter for valid input. |
| **Min/Max Length Error Message** | A custom error message that displays below the input field. The error message displays when the entry doesn't meet the minimum or maximum character length rule. |

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Description** | Quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |

[![A static image displaying the Data Grid Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_400_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(10).jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Adding a Data Grid Component

In this example, configure a Data Grid component to ask your end-user to input personal information about their account assets.

### Configure the Data Grid Component

This Data Grid component is used to organize three Text Field components so end-users can create multiple rows of fields based on their needs.

1. In the Module Builder, drag and drop a **D****ata Grid** component onto your canvas.
2. In the Property ID field, enter `dataGrid`.
3. In the Label Text field, enter `Accounts`.
4. In the **Add Another Text** field, enter `Add Account`.

[![A static image displaying the Data Grid component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataGrid_example_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataGrid%20example.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
5. Click **Save Component**.

### Configure the Text Field components

Configure three [Text Field](/v1/docs/text-field-component) components for your end-user to enter their account name, type, and balance. Apart from their Property IDs, all other settings are the same.

1. Drag and drop three **T****ext Field** components onto your canvas, placing them next to one another inside the **datagrid** **D****ata Grid** component.
2. In the Property ID and Label Text fields, enter the following:

|  | Property ID | Label Text |
| --- | --- | --- |
| 1 | **accountName** | Account Name |
| 2 | **accountType** | Account Type |
| 3 | **accountBalance** | Account Balance |
3. Click **Save Component** for each Text Field component as you complete it.
4. **Save** your module.

Preview your module in Express View. to see the following functionality:

[![A static image displaying the completed datagrid in express view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/datagrid_ExpressView_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/datagrid%20ExpressView.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

The **Data Grid component** is a display and layout tool designed to organize components into columns and rows. Adding a component to a Data Grid component uses the added component's Label Text to create a new column in Express View. Then, it displays the component's field in a row matching that column. Creators can also configure the Data Grid component so end-users can add additional rows containing these components.

The Data Grid component is useful for configurations where end-users need to enter multiple datasets in an organized format. For example, let's say you're a financial planner. You need to collect your end-user's account name, type, and balance. Use a Data Grid component to display one or more fields so you can capture these values.

You'll find the Data Grid component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

### Display Settings

[![A static image displaying the Data Grid configuration window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W_DataGrid_02_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W%20DataGrid%2002.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

| Setting | Description |
| --- | --- |
| **Label** | A Label indicates the purpose of the corresponding field or component. For input components, the Label tells the end-user how to interact with the field. For non-input components, the Label is not end-user facing, and only appears in the Module Builder. User-friendly Labels make your module more accessible. Keep Labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **Property Name** (Property ID) | A Property ID is the unique field ID used by Unqork to track and link [components](/v1/docs/module-builder-component-library) in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API calls. Property IDs must use camel case (stylized as camelCase) without spaces or punctuation. |
| **Add Another Text** | Enter text here to set the label for the Add New Row button. |
| **Remove Row Text** | Enter text here to set the label for the Remove Row button. |
| **Data Reference Key** | Enter the Property ID of the component whose data you're referencing. |
| **Minimum Length** | Sets the lowest number of rows displayed in your Data Grid component. Notice that the Add row button hides when your end-user reaches this lowest limit. |
| **Maximum Length** | Sets the highest number of rows displayed in your Data Grid component. Notice that the Add row button hides when your end-user reaches this highest limit. |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
| **Description** | Quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line. |
| **Striped** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**) to display alternate colors on each row of the table. By default, this checkbox is ☐ (**unchecked**). |
| **Hover** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**) to display row highlights when hovering over an individual row. By default, this checkbox is ☐ (**unchecked**). |
| **Bordered** | Sets to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**).to display borders around the edges and each row of the table. By default, this checkbox is ☐ (**unchecked**). |
| **Condensed** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**) to remove extra spacing between rows. The effect you see depends on the custom CSS styles applied to the application. By default, this checkbox is ☐ (**unchecked**). |
| **Multiple Values** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**) to let the end-user select multiple sections in the table. By default, this checkbox is ☐ (**unchecked**). |
| **Hidden** | Shows or hides the component from view. Checking the Hidden checkbox hides the component in Express View. Clearing the checkbox displays the component. The component will always remain visible in the Module Builder. By default, this checkbox is ☐ (**unchecked**). |
| **Disabled** | Checking the Disabled checkbox, prevents end-users from interacting with the element in Express View. When your end-user hovers over the field, their cursor changes to alert them to the status change. By default, this checkbox is ☐ (**unchecked**). |
| **Protected** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**), the API call will not returns this field as part of the call. Set to unchecked when you want the field returned as part of the call. By default, this checkbox is ☐ (**unchecked**). |
| **Table View** | Set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**) to display values in the submission. Clear the checkbox when you do not want the values displayed. By default, this checkbox is (**checked**). |
| **Persistent** | When ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**), Unqork stores values entered into the field on submission of the module. Set to unchecked when you don't want to store the values from this field in the database. By default, this checkbox is (**checked**). > [!NOTE] > If you never check the box, the value stores as `null`. If the box is checked, the value stores as `true`. And if you uncheck the box again after checking it, the value stores as `false`. |
| **Required** | When set to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(43).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) (**checked**), the end-user must enter a value in the component's visible fields. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D) **(OFF)** when an entry is optional. By default, Required is set to ☐ (**unchecked**). |

## Adding a Data Grid Component

In this example, configure a Data Grid component to ask your end-user to input personal information about their account assets.

### Configure the Data Grid Component

This Data Grid component is used to organize three Text Field components so end-users can create multiple rows of fields based on their needs.

1. In the Module Builder, drag and drop a **D****ata Grid** component onto your canvas.
2. In the **Label** field, enter `Accounts`.
3. In the **Property Name**, enter `datagrid`.

[![A static image displaying the Data Grid configuration window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W_DataGrid_03_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W%20DataGrid%2003.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)
4. Click **Save**.

### Configure the Text Field components

Configure three [Text Field](/v1/docs/text-field-component) components for your end-user to enter their account name, type, and balance. Apart from their Property ID, all other settings are the same.

1. Drag and drop three **T****ext Field** components onto your canvas, placing them next to one another in the **datagrid** **D****ata Grid**.
2. In the Property ID and Label Text fields, enter the following :

| Property ID | Label Text |
| --- | --- |
| **accountname** | Account Name |
| **accounttype** | Account Type |
| **accountbalance** | Account Balance |
3. Click **Save & Close** for each Text Field component as you complete it.
4. **Save** your module.

Preview your module in Express View. to see the following functionality:

[![A static image displaying the Data Grid in express view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W_DataGrid_08_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/W%20DataGrid%2008.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A38Z&se=2026-11-07T18%3A57%3A38Z&sr=c&sp=r&sig=7bnr43YUbeKfrWolgRXmU46QW00sdD9Cl0p8S2bkqUU%3D)

## Resources

- [Display & Layout Components Landing Page](/v1/docs/display-layout)
- [Introduction to Display & Layout Components](/v1/docs/introduction-to-display-layout)
- [Advanced Data Grid Component](/v1/docs/advanced-datagrid-component)
- [Vega Table Component](/v1/docs/vega-table-component)

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

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

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

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.

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.

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

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

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.

A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton.