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 Unqork IDE. 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 path 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 trigger 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 Output
viewgridData.selectRow
Text input
—
The 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.
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.
A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.
The browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .
The Unqork tool used to build individual modules by placing and configuring components on a canvas.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
Pagination is the process of separating content into individual pages.
JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.
Formats the value as currency, applying the Prefix, Suffix, and Thousands Separator settings.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.
