---
title: "Vega Table Component"
slug: "vega-table-component"
tags: ["module-builder", "vega", "module-builder-components"]
updated: 2026-09-15T18:18:47Z
published: 2026-09-15T18:18:47Z
canonical: "docs.unqork.io/vega-table-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.

# Vega Table Component

> [!NOTE]
> The Vega Table component requires the [Vega (2.0) runtime](/unqorkai/docs/centauri-and-vega-runtimes). Set the module or Panel component runtime to **Vega (2.0)** before adding this component.

The Vega Table component renders tabular data with support for two view modes: a spreadsheet-style grid and a form view for row-level editing. It supports column formatting, row grouping, aggregation, pagination, and nested data structures.

> **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 | `vegaTable` | A unique ID for this component instance. Used to reference the component in logic and submission data. |

## Display Settings

### Field Text

| Setting | Field | Type | Description |
| --- | --- | --- | --- |
| Label Text | `field.label.text` | Text input | Identifies the component on the canvas. Not displayed to end-users unless a label position is configured. |
| View Type | `viewType` | Drop-down | Controls how the table renders. Options include: **Spreadsheet** (editable grid) and **Form** (row-level editing). Default: **Spreadsheet**. |

### Layout

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Formatting | `formatting` | Toggle | **OFF** | When set to **ON**, enables visual formatting options for the table. |

### Table Tools

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Show Toolbar | `tableActions.enableTopToolbar` | Toggle | — | When set to **ON**, displays the top toolbar with search, column visibility, and other controls. |
| Show Column Actions | `tableActions.enableColumnActions` | Toggle | — | When set to **ON**, displays per-column action menus in the column headers. |
| Enable Pagination | `enablePagination` | Toggle | **OFF** | When set to **ON**, divides the table into pages. |
| ↳ Show Pagination | `tableActions.enableBottomToolbar` | Toggle | **OFF** | When set to **ON**, displays the pagination toolbar at the bottom of the table. Visible when **Enable Pagination** is **ON**. |
| ↳ Default Page Size | `pagination.pageSize` | Number input | `20` | The number of rows displayed per page. Visible when **Enable Pagination** is **ON**. |
| ↳ Enable Manual Pagination | `pagination.manualPagination` | Toggle | **OFF** | When set to **ON**, pagination is controlled externally through submission data instead of automatically by the component. Visible when **Enable Pagination** is **ON**. |
| ↳ Reset Page Index | `pagination.autoResetPageIndex` | Toggle | **ON** | When set to **ON**, resets to the first page whenever the table data changes. Visible when **Enable Pagination** is **ON**. |

### Column Formatting

Column settings display above Table Tools once one or more components are added to the Vega Table. The **Column Formatting** section lists one row per column. Each row configures the display behavior of that column.

> [!NOTE]
> Column Formatting only displays when the **Formatting** toggle in the Layout section is set to **ON**.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Column Formatting configuration to the clipboard. |
| **Replace Table** | Replaces the current Column Formatting configuration with a copied one. |
| **Filter** | Filters the rows displayed in the Column Formatting table. |

| Column | Description |
| --- | --- |
| **Column Name** | The display name shown in the column header. |
| **Type** | Controls how the column sizes. **Fixed** sets a specific pixel width. **Fill** allows the column to grow and fill available space. |
| **Width (px)** | The column's pixel width. Only applies when Type is **Fixed**. |
| **Min Width (px)** | The minimum pixel width allowed for this column. |
| **Max Width (px)** | The maximum pixel width allowed for this column. |
| **… (more options)** | Row-level actions: **Move Up**, **Move Down**, **Copy Row**, **Paste Row Above**, **Paste Row Below**, **Insert Above**, **Insert Below**, **Delete Row**. Available when more than two rows are present. |

## Data

### Data Storage

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Store Data in Database | `persistent` | Toggle | **ON** | When set to **ON**, the table's data is stored in the database when the module is submitted. When set to **OFF**, data is stored in local state only and is not submitted. |

### Initial Values & Data Mapping

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Initial Values configuration to the clipboard. |
| **Replace Table** | Replaces the current Initial Values configuration with a copied one. |
| **Filter** | Filters the rows displayed in the Initial Values table. |
| **Add Initial Value** | Adds a new initial value row to the table. |

Maps component values to table columns as initial row data when the module loads. One column displays per component added to the Vega Table.

| Column | Description |
| --- | --- |
| **[Component name]** | The initial value for that component's column. One column displays per component added to the Vega Table. |
| **… (more options)** | Row-level actions available when more than two rows are present: **Move Up**, **Move Down**, **Copy Row**, **Paste Row Above**, **Paste Row Below**, **Insert Above**, **Insert Below**, **Delete Row**. |

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Add Row on Initialization | `addRowOnInit` | Toggle | **OFF** | When set to **ON**, adds one empty row if no initial data is present when the table loads. |

### Nested Data Structure

Defines levels of hierarchy for nested row data. Each row in this table describes one level of nesting.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Nested Data Structure configuration to the clipboard. |
| **Replace Table** | Replaces the current Nested Data Structure configuration with a copied one. |
| **Filter** | Filters the rows displayed in the Nested Data Structure table. |
| **Add Nested Data Structure** | Adds a new nesting level row to the table. |

| Column | Description |
| --- | --- |
| **#** | The row's order index. Rows are draggable—drag to reorder nesting levels. |
| **Children** | The property name that contains the child rows for this level. |
| **Label** | The property name used as the display label for rows at this level. |
| **… (more options)** | Row-level actions: **Move Up**, **Move Down**, **Copy Row**, **Paste Row Above**, **Paste Row Below**, **Insert Above**, **Insert Below**, **Delete Row**. |

### Hide Grouped Columns

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Hide Grouped Columns | `hideGroupedColumns` | Toggle | **OFF** | When set to **ON**, hides column headers for columns actively used for row grouping, spanning the grouped cell across the full row width. |

### Aggregation

Defines aggregation rules for numeric columns. Each row applies an aggregation function to one column. Aggregated values display in a summary row.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Aggregation configuration to the clipboard. |
| **Replace Table** | Replaces the current Aggregation configuration with a copied one. |
| **Filter** | Filters the rows displayed in the Aggregation table. |
| **Add Aggregation** | Adds a new aggregation rule. |

| Column | Description |
| --- | --- |
| **Column** | The table column to aggregate. Select from components added to the Vega Table. |
| **Label** | The display label for the aggregated value in the summary row. |
| **Function** | The aggregation function to apply. Options include: **Count**, **Extent**, **Max**, **Median**, **Mean**, **Min**, **Sum**, **Unique**, **Unique Count**. |
| **… (more options)** | Row-level actions: **Move Up**, **Move Down**, **Copy Row**, **Paste Row Above**, **Paste Row Below**, **Insert Above**, **Insert Below**, **Delete Row**. |

## Actions

### Triggers

Define event-driven actions for the table using the Triggers configuration. Triggers fire on table-level events and execute an operation on the target component specified in the **Property ID** column.

| Action | Description |
| --- | --- |
| **Copy Table** | Copies the current Triggers configuration to the clipboard. |
| **Replace Table** | Replaces the current Triggers configuration with a copied one. |
| **Filter** | Filters the rows displayed in the Triggers table. |
| **Add Triggers** | Adds a new row to the table. |

| Trigger | When it fires |
| --- | --- |
| Row is Updated | A row's data is saved or committed. |
| Cell is Edited | A cell enters or exits editing mode. |
| Table Value is Updated | Any cell value in the table changes. |
| Table is Ready | The table finishes loading and rendering. |
| **… (more options)** | Row-level actions available when more than two rows are present: **Move Up**, **Move Down**, **Copy Row**, **Paste Row Above**, **Paste Row Below**, **Insert Above**, **Insert Below**, **Delete Row**. |

### Keyboard Navigation

| Setting | Field | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Navigate Down on Enter Keypress | `navigateDownOnPressEnter` | Toggle | **OFF** | When set to **ON**, pressing Enter in a cell moves focus to the cell directly below. |

### Operations

The Vega Table component supports the Operations Builder when the module runtime is set to **Vega (2.0)**.

#### Event Handlers

Click **Open Operations Builder** to define event handlers directly on the Vega Table component. Event handlers can be attached to standard component events like **On Initialize**, **On New Submission**, and **On Edit Submission**, as well as table-specific events like **On Table Cell Change** and **On Table Row Click**.

For a full list of available operations, see the [Operations Builder](/unqorkai/docs/operations-builder) reference.

## Advanced

### Additional Styling

| Setting | Field | Type | Description |
| --- | --- | --- | --- |
| Custom CSS Class | `field.customClass` | Text input | Applies a custom CSS class to the component's root element. |

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-06-15 | Initial draft. |

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.

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

Pagination is the process of separating content into individual pages.

A data structure is the design used for organizing, using, and storing data.

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

A place on your operating system that stores recently copied content. The clipboard only stores one item at a time.

The location of an element in an array.

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.

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

To execute or perform a a task. In the Operations builder, Events fire (execute) one, or multiple Operations.

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

Focus indicates the element of the graphical user interface which is currently selected to receive input. Elements with focus sometimes have an accesibility border highlighted around them.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

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.