Unqork documentation is available in two workspaces: UnqorkAI for the latest AI-first platform, and legacy Unqork for previous versions. Use the drop-down near the logo to switch.

Advanced Datagrid Component

Prev Next

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.

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.

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

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 one 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).