---
title: "Advanced Datagrid Component"
slug: "advanced-datagrid-component"
tags: ["module-builder"]
updated: 2026-10-05T15:52:06Z
published: 2026-10-05T15:52:06Z
canonical: "docs.unqork.io/advanced-datagrid-component"
stale: true
---

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

# Advanced Datagrid Component

The Advanced Datagrid component provides a fully featured data management grid with add, edit, delete, and view operations. It supports modal and inline row editing modes, custom button labels, delete confirmation dialogs, accordion display, and extensive formatting options.

> [!NOTE]
> The Build Agent does not create new instances of this component. The Build Agent creates editable table functionality using UI Smart Components instead.

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

## Display Settings

### Field Text

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

### Default State Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Disable User Input | `disabled` | Toggle | OFF | Disables all grid interactions for end-users. |
| Draft Save | `allowDraftSave` | Toggle | OFF | Lets end-users save a draft of grid data without submitting. |
| Hide Label | `hideLabel` | Toggle | ON | Hides the label. The label remains visible in the Module Builder. |
| Hide Component | `hidden` | Toggle | OFF | Hides the component from end-users but always displays in the Module Builder. |

### Modal Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Modal Title | `modalTitle` | Text input | — | The heading of the modal that displays when adding or editing a row. |
| Modal Message | `modalMessage` | Text input | `Loading please wait...` | Text displayed while the modal is loading. |
| When to Reset the Form | `resetAction` | Drop-down | **On Add** | Drop-down that sets when the form inside the modal resets. Options: **On Add**, **On Save**. |
| Fullscreen | `fullscreen` | Toggle | OFF | Displays the modal in fullscreen mode. |
| OK Button Label | `confirmationButton` | Text input | `OK` | The label on the modal's confirm/close button. |
| Save Button Label | `saveButton` | Text input | `Save` | The label on the modal's save button. |

### Grid Formatting

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Delete Title | `deleteTitle` | Text input | `Confirm Deletion` | The heading of the delete confirmation dialog. |
| Delete Text | `deleteMessage` | Text input | `Are you sure you want to delete this item?` | The body text of the delete confirmation dialog. |
| Title for Save Confirmation Alert | `saveTitle` | Text input | — | The title of the save confirmation alert in inline display mode. |
| Message for Save Confirmation Alert | `saveMessage` | Text input | — | The message of the save confirmation alert in inline display mode. |
| Save Event | `saveEvent` | Text input | — | An event fired when a row is saved in inline mode. |
| Message While Saving | `savingMessage` | Text input | `Saving...` | Text displayed while a row is being saved. |
| Cancel Button | `cancelButton` | Text input | `Cancel` | The label on the cancel button. |
| Action Label | `actionLabel` | Text input | `Actions` | The label for the actions column or menu. |
| Add Button Label | `addButton` | Text input | `Add` | The label on the add row button. |
| Edit Button Label | `editButton` | Text input | `Edit` | The label on the edit row button. |
| Delete Button Label | `deleteButton` | Text input | `Delete` | The label on the delete row button. |
| View Label | `viewButton` | Text input | `View` | The label on the view button, shown when the component is disabled. |
| Confirm Deletion | `showDeleteConfirmation` | Toggle | OFF | Displays a confirmation dialog before deleting a row. |
| Show Yes/No Instead of Delete/Edit | `displayYesNo` | Toggle | OFF | Replaces Delete/Edit buttons with Yes/No questions in the table. |
| Show Select Option Instead of Add/Edit | `displaySelectOption` | Toggle | OFF | Replaces Add/Edit buttons with a Select option using Yes/No questions. |
| Remember Scroll Position | `rememberScrollPosition` | Toggle | OFF | Restores the end-user's scroll position after editing. |
| Display Inline Rows | `displayInlineRows` | Toggle | OFF | Displays rows as an accordion panel instead of opening a modal for editing. |
| ↳ Default First Row to Open | `openFirstRow` | Toggle | OFF | Automatically opens the first accordion row on load. Visible when **Display Inline Rows** is **ON**. |
| ↳ Show the Save Button in the Accordions | `showSave` | Toggle | OFF | Adds a save button inside each accordion panel. Visible when **Display Inline Rows** is **ON**. |
| ↳ Show a Modal for Confirmation of Save | `saveConfirmation` | Toggle | OFF | Displays a modal when the end-user saves an open accordion. Visible when **Display Inline Rows** is **ON**. |
| Hide Table When Empty | `hideTableWhenEmpty` | Toggle | OFF | Hides the table grid when there are no rows. |

## Data Settings

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | ON | When set to **ON**, 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. |

> [!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 Source

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Data Reference Key | `dataReferenceKey` | Text input | — | An optional reference to another data source. |
| Component Reference Key | `componentReferenceKey` | Text input | — | An optional reference to populate the component data. |
| Yes/No Reference Key | `yesNoReferenceKey` | Text input | — | An optional reference to another data source for Yes/No question data. |
| Filter Field | `filterField` | Text input | — | The Property ID of the component whose value filters the grid list. |
| Filter Yes/No Component | `questionFilterComponent` | Text input | — | The Property ID of the component whose value filters the Yes/No list. |

### Display

Defines the columns displayed in the grid.

| Column | Field | Description |
| --- | --- | --- |
| ID | `id` | The property ID of the field to display in this column. |
| Heading | `heading` | The column header label. |

### Yes/No Question Listing

Defines the Yes/No questions displayed when **Show Yes/No Instead of Delete/Edit** is **ON**.

| Column | Field | Description |
| --- | --- | --- |
| Code | `code` | The stored value for this question. |
| Text | `text` | The question text displayed to end-users. |
| Required | `required` | When checked, this setting marks the question as required. |
| Tooltip | `tooltip` | Tooltip text for this question. |
| Sub Header | `subheader` | A sub-header displayed above this question. |

## Actions Settings

### Triggers

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| New Row Trigger | `newRowTrigger` | Property ID | — | Triggers a component when the end-user adds a new row. |
| Edit Row Trigger | `editRowTrigger` | Property ID | — | Triggers a component when the end-user edits a row. |

## Validation Settings

### User Input

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

## Advanced Settings

### Additional Validation Options

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Error Title | `errorTitle` | Text input | `Oops - {( errors )} error(s) have been found!` | The heading of the validation error dialog. |
| Error Message | `errorMessage` | Text input | `Please check your module and fix fields outlined in red.` | The body text of the validation error dialog. |
| Minimum Length | `validate.arrayMinLength` | Number input | — | The minimum number of rows required. |
| Maximum Length | `validate.arrayMaxLength` | Number input | — | The maximum number of rows allowed. |

### Additional Styling

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Custom CSS Class | `customClass` | Text input | — | A CSS class applied to the component for custom styling. |
| Add Button Icon Class | `addButtonIconClass` | Text input | — | A CSS icon class for the Add button (for example, `fa fa-plus`). |
| Edit Button Icon Class | `editButtonIconClass` | Text input | — | A CSS icon class for the Edit button (for example, `fa fa-pencil`). |

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-10-02 | Added Build Agent notice — the Build Agent does not create new instances of this component (EN-8141). |
| — | Initial publication. |

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.

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.

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

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

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

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.

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 JavaScript property is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

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.