---
title: "View Grid Component"
slug: "view-grid-component"
tags: ["module-builder", "module-builder-components"]
updated: 2026-09-15T18:17:34Z
published: 2026-09-15T18:17:34Z
canonical: "docs.unqork.io/view-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.

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

Pagination is the process of separating content into individual pages.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

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 .

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 Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

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.

JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

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.

Data types are a classification of data that determines how it is stored and interpreted.

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.

Rendering is the process of loading components and displaying the final result on the front-end screen.