View Grid Component

The View Grid component displays data in a configurable read-optimized grid. It supports column configuration, sorting, filtering, pagination, row selection, and custom cell templates. Data is sourced from a URL or module inputs.

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	`vg`	The unique identifier for this component instance.
Canvas Label Text	`label`	Text input	—	Identifies the component on the Module Builder canvas. Does not display to end-users.

Display Settings

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
Grid Height	`viewgridData.height`	Number input	—	The grid height in pixels (px).
No Data Text	`viewgridData.noDataText`	Text input	—	Text displayed when the grid has no data to show.
Source Has Pagination	`viewgridData.hasServerSidePagination`	Toggle	OFF	Enables server-side pagination. When OFF, the Page Size setting displays. When ON, the Paginator Source setting displays instead.
↳ Page Size	`viewgridData.pageSize`	Number input	—	The number of records to display per page (records). Visible when Source Has Pagination is OFF.
↳ Paginator Source	`viewgridData.paginatorSource`	Text input	—	The Property ID of the Plug-In component that is the original data source. Visible when Source Has Pagination is ON.
Enable Infinite Scrolling	`viewgridData.infiniteScroll`	Toggle	OFF	Loads more rows as the end-user scrolls instead of using page navigation.
Sort by Columns	`sortByColumns`	Toggle	ON	Lets end-users sort the grid by clicking column headers. Hidden when Enable Infinite Scrolling is ON.
Show Title	`viewgridData.showTitle`	Toggle	OFF	Displays a title above the grid.
Always Display Sort Buttons	`viewgridData.sortAlwaysVisible`	Toggle	OFF	Keeps sort buttons visible at all times.
Show Filters	`viewgridData.showFilters`	Toggle	OFF	Displays column filter inputs above each column header.

Data Settings

Data Source

Setting	Field	Type	Default	Description
Data Source URL	`viewgridData.sourceUrl`	Text input	—	A URL that returns a JSON array to use as the grid data source.

Inputs

Defines the module fields that supply data to the grid.

Column	Field	Description
Source	`id`	The module field providing input data.
Required	`required`	When checked, marks this input as required.

Outputs

Defines the module fields populated with values from the grid (for example, from row selection).

Column	Field	Description
Source	`id`	The module field to populate with the output value.
Mapping	`mapping`	The data or key to map from the source to the output field.

Display

Configures the grid columns.

Column	Field	Description
ID	`id`	The property ID of the data field to display in this column.
Formula	`formula`	A formula to compute the cell value.
Heading	`heading`	The column header label.
Type	`type`	The data type for this column. Options include: String, Number, Date, or Currency.
CSS	`css`	A CSS class applied to cells in this column.
Button	`button`	When checked, this setting renders this column as a button instead of a display cell. The ID for this column must match the Property ID of the component to when the button is clicked, like an Initializer or Plug-In component.

Actions Settings

Setting	Field	Type	Default	Description
Action	`viewgridData.action`	Text input	—	Adds a button to each row that triggers the specified action when clicked.
Event	`viewgridData.event`	Text input	—	An optional event fired when a row is clicked, in addition to or instead of the Action.

Advanced Settings

Row Selection Options

Setting	Field	Type	Default	Description
Select Row	`viewgridData.selectRow`	Text input	—	The submission data key where the selected row value is stored when a row is clicked.
Select Row ID Property	`viewgridData.selectRowIDProperty`	Text input	—	The property in the data source that uniquely identifies each row.
Enable selection of multiple items	`viewgridData.multiselect`	Toggle	OFF	Lets end-users select multiple rows simultaneously.
↳ Show Row Selection	`viewgridData.showCheckbox`	Toggle	OFF	Displays checkboxes in each row for row selection. Visible when Enable selection of multiple items is ON.
↳ Restrict multiple selection with cmd/ctrl	`viewgridData.multiselectWithCmdCtrl`	Toggle	OFF	Requires end-users to hold Cmd or Ctrl to select multiple rows. Visible when Enable selection of multiple items is ON.

Additional Styling

Setting	Field	Type	Default	Description
Custom CSS Class	`customClass`	Text input	—	A CSS class applied to the component for custom styling.

Changelog

Date	Change
—	Initial publication.