---
title: "Vega Table Component"
slug: "vega-table-component"
description: "Unlock the power of the Vega Table component to collect, organize, and display dynamic data effortlessly in your application."
updated: 2025-12-03T16:57:59Z
published: 2025-12-09T16:46:27Z
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

UDesignerClassic Designer

The **Vega Table component** is a powerful tool that lets you gather, organize, and display data in your application. Using the Vega Table component, you can retrieve data and customize how it displays. You can also use Vega Table operations that give end-users the ability to dynamically modify the way they see your data.

> [!WARNING]
> To use the Vega Table component, enable the Vega runtime in your module. To learn more about enabling Vega, see the [Adding a Vega Table Component](/v1/docs/vega-table-component#Adding) section of this article.

Like the [Panel](/v1/docs/panel-component) or [Field Group](/v1/docs/field-group-component) components, the Vega Table component acts as a grouping or storage component for fields (other components) configured inside it. Instead of creating self-contained pages or sections, the Vega Table uses the component fields to create table headers.

You can add the following supported components to the Vega Table component:

- [Button component](/v1/docs/button-component)
- [Data Input component](/v1/docs/date-input-component)
- [Menu component](/v1/docs/menu-component)
- [Number component](/v1/docs/number-component)
- [Search Select component](/v1/docs/vega-search-select-component)
- [Simple Select component](/v1/docs/vega-simple-select-component)
- [Single Checkbox component](/v1/docs/single-checkbox-component)
- [Text Field component](/v1/docs/text-field-component)

Common ways you can use the Vega Table component include:

- Collecting, editing, and displaying data from different sources on a single screen, such as a dashboard.
- Displaying dynamic data that end-users can manipulate using Vega Table Operations.
- Applying logic (rules, calculations, procedural operations, and so on) to multiple data records simultaneously.

> To learn more about Vega Table operations, view our [Vega Table Operations](/v1/docs/vega-table-operations) reference guide.

You can find the Vega Table component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> [!TIP]
> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

### Field Text

[![Settings for a Vega Table component, including pagination and display options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/VegaTableSettings.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(23).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

| **Setting** | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **View Type** | Displays Grid as a Spreadsheet or Form. The View Type affects how component fields and their settings display in your table. > [!WARNING] > The Spreadsheet view is recommended because its functionality is more robust. The Form view is scheduled for [sunsetting](https://docs.unqork.io/Content/A00-Unqork_Platform/A00114-Platform_Sunsetting.htm) and will not be supported. |

### Table Tools

| **Setting** | Description |
| --- | --- |
| **Show Tool Bar** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)** to display table options to end-users, including: - **F****ilter Table**: Search and filter all fields in the table by entering a value. Fields that don't match the search value are hidden. > [!NOTE] > This operation does not filter for date-formatted values. To filter on date values, use the `TABLE_SET_COLUMN_FILTER` functionality. > To learn more about additional filter functionality, view our [Vega Table Operations](/v1/docs/vega-table-operations) article. - **F****ilter Individual Column**: Display a search bar below each column header. Enter a value to search and filter all fields in the column. Fields that don't match the search value are hidden. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** in Express View. - **H****ide Column(s)**: Click to open a menu displaying a checkbox next to each column header. Uncheck one or more headers to hide them from view. - **C****ondense Row Spacing**: Click to add or remove space above and below values displaying in each row. Spacing can be condensed or expanded up to three times before resetting. - **F****ull Screen**: Click to expand the table to the full size of the browser window. > [!WARNING] > In Express View, full-screen tables might be partially hidden by the Preview Bar. Remove or hide the preview bar to see the top portion of the table. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** in Express View. |
| **Show Column Actions** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)** to display column actions. Settings include: > [!NOTE] > In the list below, `headerValue` is replaced by column's header name. - **C****lear Sort**: This action is available after applying a **Sort By** action. Click this action to remove any column sorting. - **S****ort by** `headerValue` **ascending**: Click to sort the column alphabetically or numerically by the smallest, first, or earliest letter or numerical value. - **S****ort by** `headerValue` **descending**: Click to sort the column alphabetically or numerically by the largest, or last letter or numerical value. - **C****lear Filter**: This action is available after applying a **Filter By** action. Click this action to remove any column filtering. - **F****ilter by** `headerValue`: Display a search bar below each column header. Enter a value to search and filter all fields in the column. Fields that don't match the search value are hidden. Same effect as the **F****ilter Individual Column** setting. - **H****ide** `headerValue` **column**: Hides the column from view. Same effect as the **H****ide Column(s)** setting. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** |
| **Enable Pagination** | Controls the pagination of data provided to the component. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the Vega Table component’s data paginates, creating one or more pages of table data. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**, all data displays in the Vega Table on a single page. |
| **Show Pagination** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, it displays the page sequence numbers at the bottom of the table. By default, paginated tables display 20 rows. End-users can change the amount displayed to 5, 10, 15, 20, or 30 rows. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**. |
| **Default Page Size** | Specify how many rows of data display per paginated page. By default, this setting is set to 20 items per page. |
| **Enable Manual Pagination** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, this setting enables pagination on the Vega Table component. Manual Pagination works with large data sets by retrieving a single page or a subset of data at a time. This setting improves the end-user's performance and reduces memory usage when using large data sets with the Vega Table component. Here are some considerations when using the Enable Manual Pagination setting: - The Vega Table component will not change the data when you change the page. - It exposes properties in the state so you can get the value of the page number and offset. - It emits events for page turn or page size change. - It emits events when the filter value is changed. - It does not apply filters directly if a filter value is entered. |
| **Reset Page Index** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the Vega Table component resets to the first page when a filter or sort operation is applied, or the page size changes. Additionally, when the **Show Tool Bar** setting is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the **Reset Page Index** setting applies to the Tool Bar in Express View. |

## Data Panel

### Data Storage

[![Image displaying the Vega Table component's Data Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Data_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Data(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

| **Setting** | Description |
| --- | --- |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. |

### Initial Values & Data Mapping

#### Initial Values

| **Setting** | Description |
| --- | --- |
| **Initial Values Table** | After adding components to the Vega Table component, the Initial Values table displays the fields as column headers. You can then enter and/or edit table values in each cell. You can also output values from other components, like a [Plug-In](/v1/docs/plug-in-component) component, to existing Vega Table fields. |
| **New Row** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |
| **Add Row on Initialization** | Adds one blank row if the Table contains no data entries on initialization. If the Table contains data entries, the row won't be added. |

#### Nested Data Structure

| **Setting** | Description |
| --- | --- |
| **Nested Data Structure Table** | > [!NOTE] > This setting is still in development, but will allow you to easily create nested data in your table. Stay tuned for new developments and enhancements for this feature. |
| **New Row** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |
| **Add Row on Initialization** | Adds one blank row if the Table contains no data entries on initialization. If the Table contains data entries, the row won't be added. |

### Aggregation

| **Setting** | Description |
| --- | --- |
| **Aggregation Table** | > [!NOTE] > This setting is still in development, but will allow you to easily create nested data in your table. Stay tuned for new developments and enhancements for this feature. |
| **New Row** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |

## Actions Panel

### Events and Operations

[![Image displaying the Vega Table component's Action Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Actions_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Actions(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

| **Setting** | Description |
| --- | --- |
| **Edit** | Opens the Operations Builder tool. > Discover how to use events and operations in our [Operations Builder](/v1/docs/operations-builder) article. |

### Triggers

| **Setting** | Description |
| --- | --- |
| **Edit** | Opens the **Triggers Table**. |
| **Triggers Table** | The Triggers table contains a list of **When** events, and the component property ID the **When** event triggers. |
| **When...** | Select an action that, when it takes place, triggers another component selected using the **Then...** setting. Actions include: - Row Is Added - Row Is Deleted - Row Is Saved - Row Is Edited |
| **Then...** | When the action selected in the **When...** setting occurs, the component entered in this field triggers. |
| **New Row** | Add a new row to the table. |

### Keyboard Navigation

| **Setting** | Description |
| --- | --- |
| **Navigate Down on Enter Keypress** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, focus moves to the next row in the column after pressing Enter. Provides similar functionality to a spreadsheet tool. When ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**, the focus remains on the same cell when pressing Enter. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**. |

## Advanced Panel

### Additional Styling

[![A static image displaying the Columns Component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding a Vega Table Component

In this example, use the Vega Table component to display a Market Summary spreadsheet for vehicle insurance. The Vega Table will include the insurance carrier, type, premium amount in USD, and the market status. Then add sorting and filter Vega Table operations that allow end-users to modify the grid view.

### Configure the Text Field Components

Begin by adding the fields you want in the Vega Table component. For this example, add [Text Field](/v1/docs/text-field-component) components to act as the Vega Table component's fields.

1. Drag and drop four **T****ext Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following:

| Property ID | Label Text |
| --- | --- |
| **carrier** | `Carrier` |
| **type** | `Type` |
| **premium** | `Premium` |
| **status** | `Status` |
3. Click **Save Component** for each component as you add it.

### Configure the Vega Table Component

Next, add your Vega Table component to use your Text Field components as table columns.

1. Drag and drop a **V****ega Table** component onto your canvas, placing it above your **T****ext Field** components.
2. In the **Property ID** field, enter `tableInsurance`.
3. In the **Label Text** field, enter `Market Summary`.
4. Click **Save Component**.
5. Drag and drop the `carrier`, `type`, `premium`, and `status` **T****ext Field** components inside the `tableInsurance` **V****ega Table** component.
6. Hover over the `tableInsurance` **V****ega Table** component and click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings(8).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (**S****ettings**) button from the component toolbar.
7. Navigate to the **Data** settings, next to Initial Values & Data Mapping, click **Edit**.
8. In the **Initial Values** table, enter the following values:

| # | **Carrier (carrier)** | **Type (type)** | **Premium (premium)** | **Status (status)** |
| --- | --- | --- | --- | --- |
| 1 | Unqork Auto | Motorcycle | $10,000 | Not Taken Up |
| 2 | State Farm | Auto | $20,000 | Submitted |
| 3 | Nationwide | RV | $50,000 | Not Taken Up |
| 4 | American Family | Boat | $25,000 | Indication |
| 5 | Geico | Auto | $25,000 | Submitted |
| 6 | Unqork Auto | Auto | $30,000 | Submitted |
| 7 | Nationwide | RV | $60,000 | Indication |
| 8 | Geico | Auto | $12,000 | Not Taken Up |
| 9 | State Farm | Motorcycle | $5,000 | Not Taken Up |
| 10 | American Family | Boat | $30,000 | Submitted |
9. Click **Save Component**.

### Configure the colFilter Columns Component

Add a [Columns](/v1/docs/columns-component) component to organize the Vega Table operations that filter specific columns and cells in your table.

1. Drag and drop a **Columns** component onto your canvas, placing it above your `tableInsurance` **V****ega Table** component.
2. In the **Property ID** field, enter `colFilter`.
3. Under **Formatting**, click ![Three Columns Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_3col_icon(2).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (three columns).
4. Click **Save Component**.

### Configure the btnFilterGlobal Button Component

Add a button that uses the Operations Builder to filter the table by the **Unqork Auto** insurance carrier.

1. Drag and drop a **Button** component onto your canvas, placing it in the far-left column of the `colFilter` **Columns** component.
2. In the **Property ID** field, enter `btnFilterGlobal`.
3. In the **Label Text** field, enter `Global Filter By Unqork Auto`.
4. Navigate to the **Actions** settings.
5. To the right of Events & Operations, click **Edit**. The Events & Operations menu displays.
6. From the **Add Event** drop-down, enter or select **On Click**.
7. Click **Add**.
8. From the **Operation Type*** drop-down, enter or select `TABLE_SET_GLOBAL_FILTER`.
9. Click **+ Add Operation**.
10. In the **Target Key** field, enter `tableInsurance`.
11. In the **Filter*** field, enter `Unqork Auto`.

[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Example_ButtonOps_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Example%20ButtonOps.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
12. Click **Save**. The operation displays in the Events & Operation list.
13. In the component's configuration menu, set the **Action Type** drop-down to **Event**.
14. Click **Save Component**.

### Configure the btnFilterSubmitted Button Component

Add another button that uses the Operations Builder to filter the table by the **Status** column. Clicking the button filters the table to only display statuses containing the value Submitted.

1. Drag and drop a **Button** component onto your canvas, placing it in the far-right column of the `colFilter` **Columns** component.
2. In the **Property ID** field, enter `btnFilterSubmitted`.
3. In the **Label Text** field, enter `Filter By Submitted`.
4. Navigate to the **Actions** settings.
5. To the right of Events & Operations, click **Edit**. The Events & Operations menu displays.
6. From the **Add Event** drop-down, enter or select **On Click**.
7. Click **Add**.
8. From the **Operation Type*** drop-down, enter or select `TABLE_SET_COLUMN_FILTER`.
9. Click **+ Add Operation****.**
10. In the **Target Key** field, enter `tableInsurance`.
11. Under **Filters**, click Add.
12. In the **Id** field, enter `status`.
13. In the **Value** field, enter `Submitted`.

[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Example_TableButtonColFilter_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Example%20TableButtonColFilter.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
14. Click **Save**. The operation displays in the Events & Operation list.
15. In the component's configuration menu, set the **Action Type** drop-down to **Event**.
16. Click **Save Component**.

### Configure the colAddRow Columns Component

Let's add one more [Columns](/v1/docs/columns-component) component to organize the Vega Table operation that lets you add a new row to the bottom of the table.

1. Drag and drop a **Columns** component onto your canvas, placing it below your `tableInsurance` **V****ega Table** component.
2. In the **Property ID** field, enter `colAddRow`.
3. Click **Save Component**.

### Configure the btnAddRow Button Component

Lastly, you'll add a [Button](/v1/docs/button-component) component that uses the Operations Builder to add a new row to the bottom of the table. Allowing end-users to add additional entries to the table.

1. Drag and drop a **Button** component onto your canvas, placing it in the left column of the `colAddRow` **Columns** component and above your `initAddRow` **I****nitializer** component.
2. In the **Property ID** field, enter `btnAddRow`.
3. In the **Label Text** field, enter `Add Row`.
4. Navigate to the **Actions** settings.
5. To the right of Events & Operations, click **Edit**. The Events & Operations menu displays.
6. From the **Add Event** drop-down, enter or select **On Click**.
7. Click **Add**.
8. From the **Operation Type*** drop-down, enter or select `ADD ROW`.
9. Click **+ Add Operation**.
10. In the **Target Key** field, enter `tableInsurance`.

[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Example_TableButtonAddRow_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Example%20TableButtonAddRow.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
11. Click **Save**. The operation displays in the Events & Operation list.
12. In the component's configuration menu, set the **Action Type** drop-down to **Event**.
13. Click **Save Component**.
14. **Save** your module.

Here's how the completed module looks in the Module Builder:

[![Image displaying the completed example in the Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Example_Completed_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Example%20Completed.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

**Preview** your module in Express View to test out your Vega Table operations.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Express.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

The **Vega Table component** is a powerful tool that lets you gather, organize, and display data in your application. Using the Vega Table component, you can retrieve data and customize how it displays. You can also use Vega Table operations that give end-users the ability to dynamically modify the way they see your data.

> [!WARNING]
> To use the Vega Table component, you must enable Vega in your module. To learn more about enabling Vega, see the [Adding a Vega Table Component](/v1/docs/vega-table-component#Adding) section of this article.

Like the [Panel](/v1/docs/panel-component) or [Field Group](/v1/docs/field-group-component) components, the Vega Table component acts as a grouping or storage component for fields (other components) configured inside it. Instead of creating self-contained pages or sections, the Vega Table uses the component fields to create table headers. You can add any Unqork component to your Vega Table, but each component behaves differently depending on the view settings of your Vega Table component.

Common ways you can use the Vega Table component include:

- Collecting, editing, and displaying data from different sources on a single screen, such as a dashboard.
- Displaying dynamic data that end-users can manipulate using Vega Table Operations.
- Applying logic (rules, calculations, procedural operations, and so on) to multiple data records simultaneously.

> To learn more about Vega Table operations, view our [Vega Table Operations](/v1/docs/vega-table-operations) reference guide.

You can find the Vega Table component under the [Display & Layout](/v1/docs/display-layout-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Vega_Table_Add.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

## About the Configuration Window

> [!TIP]
> To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![Image displaying the Vega Table component's Display Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Label and View Mode

| Setting | Description |
| --- | --- |
| **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |
| **View Type** | Displays Grid as a Spreadsheet or Form. > [!NOTE] > The View Type affects how component fields and their settings display in your table. |

## Data Panel

[![Image displaying the Vega Table component's Data Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Initial Values

After adding components to the Vega Table component, the Initial Values table displays the fields as column headers. You can then enter and/or edit table values in each cell. You can also output values from other components, like a [Plug-In](/v1/docs/plug-in-component) component, to existing Vega Table fields. To customize the table columns or rows, use the Table Column and Table Row Settings.

> [!NOTE]
> The Initial Values table does not display unless components have been added to the table in Designer View.

| **Setting** | Description |
| --- | --- |
| **Table Column Settings** | Hover over the column header and select the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_small(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (**ellipsis**) to open the Table Column Settings drop-down menu. From the column settings drop-down menu, select one of the following options: - Copy column - Cut column - Paste column - Clear Data - Delete column [![Image showing the ellipsis that opens the Table Column Settings drop-down menu.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Grid_Component_06_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Grid%20Component%2006.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) |
| **Table Row Settings** | Hover over the column header and select the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsis_grey_small(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (**ellipsis**) to open the Table Column Settings drop-down menu. From the row settings drop-down menu, select one of the following options: - Copy row - Cut row - Paste row - Insert row above - Insert row below - Clear Data - Delete column [![Image showing the ellipsis that opens the Table Row Settings drop-down menu.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Grid_Component_07_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Grid%20Component%2007.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) |
| **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/addnew_cross_grey.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (Add New Row)** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |
| **Store Data in Database** | The Store Data in Database setting affects how data persists through your application. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)****,** Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: - Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. - Triggering a module save event using a Button component with an Action Type of Save. - Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. > [!NOTE] > By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** when you don’t want to store the values from this field in the database. > [!NOTE] > When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. > [!TIP] > Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the **Enable Tracker** and **Track Value** toggles are set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)** in Module Settings, only values from fields with Store Data in Database enabled are tracked. |
| **Add Row on Initialization** | Adds one blank row if the Table contains no data entries on initialization. If the Table contains data entries, the row won't be added. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**. |

## Data Mapping Panel

[![Image displaying the Vega Table component's Data Mapping Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_DataMapping_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20DataMapping.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Nested Data Structure

| **Setting** | Description |
| --- | --- |
| **Nested Data Structure Table** | > [!NOTE] > This setting is still in development, but will allow you to easily create nested data in your table. Stay tuned for new developments and enhancements for this feature. |
| **New Row** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |
| **Hide Grouped Columns** | In Express View, it hides columns that have been grouped. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (OFF). |

### Aggregation

| **Setting** | Description |
| --- | --- |
| **Aggregation Table** | > [!NOTE] > This setting is still in development, but will allow you to easily create nested data in your table. Stay tuned for new developments and enhancements for this feature. |
| **New Row** | Add a new row to all Table column fields. > [!NOTE] > Rows that contain no data in any column field do not display in Express View. |

## Actions Panel

[![Image displaying the Vega Table component's Action Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Triggers

| Setting | Description |
| --- | --- |
| **When...** | Select an action that, when it takes place, triggers another component selected using the **Then...** setting. Actions include: - Row Is Added - Row Is Deleted - Row Is Saved - Row Is Edited |
| **Then...** | When the action selected in the **When...** setting occurs, the component entered in this field triggers. |

## Keyboard Navigation

[![Image displaying the Vega Table component's Keyboard Navigation Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_KeyboardNav_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20KeyboardNav.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Keyboard Navigation

| Setting | Description |
| --- | --- |
| Navigate Down on Enter Keypress | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, focus moves to the next row in the column after pressing Enter. Provides similar functionality to a spreadsheet tool. When ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**, the focus remains on the same cell when pressing Enter. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**. |

## Table Tools

[![Image displaying the Vega Table component's Table Tools Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_TableTools_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20TableTools.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Table Tools

| **Setting** | Description |
| --- | --- |
| **Show Tool Bar** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)** to display table options to end-users, including: - **F****ilter Table**: Search and filter all fields in the table by entering a value. Fields that don't match the search value are hidden. > [!NOTE] > This operation does not filter for date-formatted values. To filter on date values, use the `TABLE_SET_COLUMN_FILTER` functionality > To learn more about additional filter functionality, view our [Vega Table Operations](/v1/docs/vega-table-operations) article. - **F****ilter Individual Column**: Display a search bar below each column header. Enter a value to search and filter all fields in the column. Fields that don't match the search value are hidden. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** in Express View. - **H****ide Column(s)**: Click to open a menu displaying a checkbox next to each column header. Uncheck one or more headers to hide them from view. - **C****ondense Row Spacing**: Click to add or remove space above and below values displaying in each row. Spacing can be condensed or expanded up to three times before resetting. - **F****ull Screen**: Click to expand the table to the full size of the browser window. > [!NOTE] > In Express View, full-screen tables might be partially hidden by the Preview Bar. Remove or hide the preview bar to see the top portion of the table. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)** in Express View. |
| **Show Column Actions** | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)** to display column actions. Settings include: > [!NOTE] > In the list below, `headerValue` is replaced by column's header name. - **C****lear Sort**: This action is available after applying a **Sort By** action. Click this action to remove any column sorting. - **S****ort by** `headerValue` **ascending**: Click to sort the column alphabetically or numerically by the smallest, first, or earliest letter or numerical value. - **S****ort by** `headerValue` **descending**: Click to sort the column alphabetically or numerically by the largest, or last letter or numerical value. - **C****lear Filter**: This action is available after applying a **Filter By** action. Click this action to remove any column filtering. - **F****ilter by** `headerValue`: Display a search bar below each column header. Enter a value to search and filter all fields in the column. Fields that don't match the search value are hidden. Same effect as the **F****ilter Individual Column** setting. - **H****ide** `headerValue` **column**: Hides the column from view. Same effect as the **H****ide Column(s)** setting. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (OFF) |
| **Enable Pagination** | Controls the pagination of data provided to the component. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the Vega Table component’s data paginates, creating one or more pages of table data. When set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(OFF)**, all data displays in the Vega Table on a single page. |
| **Show Pagination** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, it displays the page sequence numbers at the bottom of the table. By default, paginated tables display 20 rows. End-users can change the amount displayed to 5, 10, 15, 20, or 30 rows. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**. |
| **Default Page Size** | Specify how many rows of data display per paginated page. By default, this setting is set to 20 items per page. |
| **Enable Server-Side Pagination** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, this setting enables server side pagination on the Vega Table component. Server-Side Pagination works with large data sets by retrieving a single page or subset of data at a time. This setting improves the end-user's performance and reduces memory usage when using large data sets with the Vega Table component. |
| **Reset Page Index** | When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the Vega Table component resets to the first page when a filter or sort operation is applied, or the page size changes. Additionally, when the **Show Tool Bar** setting is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) **(ON)**, the **Reset Page Index** setting applies to the Tool Bar in Express View. |

## Advanced Panel

[![Image displaying the Grid component's Advanced Panel Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Additional Styling

| Setting | Description |
| --- | --- |
| **Custom CSS Class** | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |

## Adding a Vega Table Component

In this example, use the Vega Table component to display a Market Summary spreadsheet for vehicle insurance. The Vega Table will include the insurance carrier, type, premium amount in USD, and the market status. Then add sorting and filter Vega Table operations that allow end-users to modify the grid view.

### Accessing Vega

Currently, the Vega Table component is only available in the Vega runtime engine. To use the Vega runtime in your module:

1. Open your workspace.
2. Select your application.
3. Open your application module.
4. At the top of the Module Builder, select the version drop-down. By default, it's set to **Runtime v1.0.0 ![Open Dropmenu icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/caret_down_teal.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)**.
5. From the version drop-down, select Runtime v2.0.0 ![Open Dropmenu icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/caret_down_teal.png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D).

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Vega_Runtime_Change.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

### Configure the Text Field Components

Begin by adding the fields you want in the Vega Table component. For this example, add [Text Field](/v1/docs/text-field-component) components to act as the Vega Table component's fields.

1. Drag and drop four **T****ext Field** components onto your canvas.
2. In the **Property ID** and **Label Text** fields, enter the following:

| Property ID | Label Text |
| --- | --- |
| **carrier** | `Carrier` |
| **type** | `Type` |
| **premium** | `Premium` |
| **status** | `Status` |
3. Click **Save & Close** for each component as you add it.

### Configure the Vega Table Component

Next, add your Vega Table component to use your Text Field components as table columns.

1. Drag and drop a **V****ega Table** component onto your canvas, placing it above your **T****ext Field** components.
2. In the **Property ID** field, enter **tableInsurance**.
3. In the **Label Text** field, enter `Market Summary`.
4. Click **Save & Close**.
5. Drag and drop the **carrier**, **type**, **premium**, and **status** **T****ext Field** components inside the `tableInsurance` **V****ega Table** component.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Vega_Table_Fill.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
6. Hover over the `tableInsurance` **V****ega Table** component and click the (**S****ettings**) button from the component toolbar.
7. Navigate to the **Data** settings, next to Initial Values & Data Mapping, click Edit.
8. In the **Initial Values** table, enter the following values:

| # | **Carrier (carrier)** | **Type (type)** | **Premium (premium)** | **Status (status)** |
| --- | --- | --- | --- | --- |
| 1 | Unqork Auto | Motorcycle | $10,000 | Not Taken Up |
| 2 | State Farm | Auto | $20,000 | Submitted |
| 3 | Nationwide | RV | $50,000 | Not Taken Up |
| 4 | American Family | Boat | $25,000 | Indication |
| 5 | Geico | Auto | $25,000 | Submitted |
| 6 | Unqork Auto | Auto | $30,000 | Submitted |
| 7 | Nationwide | RV | $60,000 | Indication |
| 8 | Geico | Auto | $12,000 | Not Taken Up |
| 9 | State Farm | Motorcycle | $5,000 | Not Taken Up |
| 10 | American Family | Boat | $30,000 | Submitted |
9. Click **Save & Close**.

### Configure the colFilter Columns Component

Add a [Columns](/v1/docs/columns-component) component to organize the Vega Table operations that filter specific columns and cells in your table.

1. Drag and drop a **Columns** component onto your canvas, placing it above your `tableInsurance` **V****ega Table** component.
2. In the **Property ID** field, enter **colFilter**.
3. Under **Formatting**, click ![Three Columns Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Columns_Component_3col_icon(2).png?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D) (three columns).
4. Click **Save & Close**.

### Configure the btnFilterGlobal Button Component

Add a button that uses the Operations Builder to filter the table by the **Unqork Auto** insurance carrier.

1. Drag and drop a **Button** component onto your canvas, placing it in the far-left column of the `colFilter` **Columns** component.
2. In the **Property ID** field, enter **btnFilterGlobal**.
3. In the **Label Text** field, enter `Global Filter By Unqork Auto`.
4. In the component's configuration menu, select **Actions**.
5. Set the **Action Type** drop-down to **Event**.
6. Click **Save & Close**.
7. Hover over the **Button** component.

A 6-button toolbar displays above the component on hover-over.
8. Click the **Operations Builder** button. The Operations Builder modal displays.
9. In the **Select an Event** field, enter or select the **On Click** event.
10. Click **Add**. The **New Operation** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
11. From the **Operation Type*** drop-down, enter or select `TABLE_SET_GLOBAL_FILTER`.
12. Click **+ Add Operation**.
13. In the **Target Key** field, enter `tableInsurance`.
14. In the **Filter*** field, enter `Unqork Auto`.[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Example_TableInitValues_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Example%20TableInitValues.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
15. Click **Save Operation**. The operation displays in the Events & Operation list.
16. Click **Save & Close**.

### Configure the btnFilterSubmitted Button Component

Add another button that uses the Operations Builder to filter the table by the **Status** column. Clicking the button filters the table to only display statuses containing the value Submitted.

1. Drag and drop a **Button** component onto your canvas, placing it in the far-right column of the `colFilter` **Columns** component.
2. In the **Property ID** field, enter **btnFilterSubmitted**.
3. In the **Label Text** field, enter `Filter By Submitted`.
4. In the component's configuration menu, select **Actions**.
5. Set the **Action Type** drop-down to **Event**.
6. Click **Save & Close**.
7. Hover over the **Button** component.

A 6-button toolbar displays above the component on hover-over.
8. Click the **Operations Builder** button. The Operations Builder modal displays.
9. In the **Select an Event** field, enter or select the **On Click** event.
10. Click **Add**. The **New Operation** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
11. From the **Operation Type*** drop-down, enter or select `TABLE_SET_COLUMN_FILTER`.
12. Click **+ Add** Operation.
13. In the **Target Key** field, enter `tableInsurance`.
14. Under **Filters***, in the **Id** field, enter `status`.
15. In the **Value** field, enter `"Submitted"`.

[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Example_TableButtonColFilter_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Example%20TableButtonColFilter.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
16. Click **Save Operation**. The operation displays in the Events & Operation list.
17. Click **Save & Close**.

### Configure the colAddRow Columns Component

Let's add one more [Columns](/v1/docs/columns-component) component to organize the Vega Table operation that lets you add a new row to the bottom of the table.

1. Drag and drop a **Columns** component onto your canvas, placing it below your `tableInsurance` **V****ega Table** component.
2. In the **Property ID** field, enter `colAddRow`.
3. Click **Save & Close**.

### Configure the btnAddRow Button Component

Lastly, you'll add a [Button](/v1/docs/button-component) component to trigger the **initAddRow** **I****nitializer** component.

1. Drag and drop a **Button** component onto your canvas, placing it in the left column of the `colAddRow` **Columns** component and above your `initAddRow` **I****nitializer** component.
2. In the **Property ID** field, enter **btnAddRow**.
3. In the **Label Text** field, enter `Add Row`.
4. In the component's configuration menu, select **Actions**.
5. Set the **Action Type** drop-down to **Event**.
6. Click **Save & Close**.
7. Hover over the **Button** component.

A 6-button toolbar displays above the component on hover-over.
8. Click the **Operations Builder** button. The Operations Builder modal displays.
9. In the **Select an Event** field, enter or select the **On Click** event.
10. Click **Add**. The **New Operation** configuration menu displays.

[![A static image displaying the Operations Builder Configuration Menu](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder_ConfigurationMenu_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsBuilder%20ConfigurationMenu(1).jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
11. From the **Operation Type*** drop-down, enter or select `ADD ROW`.
12. Click **+ Add Operation**.
13. In the **Target Key** field, enter `tableInsurance`.

[![A static image displaying the Button component's Events & Operations builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic_Example_TableButtonAddRow_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Classic%20Example%20TableButtonAddRow.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)
14. Click **Save Operation**. The operation displays in the Events & Operation list.
15. Click **Save & Close**.
16. **Save** your module.

Here's how the completed module looks in the Module Builder:

[![Image displaying the completed example in the Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Example_Completed_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Example%20Completed.jpg?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

Preview your module in Express View to test out your Vega Table operations.

[Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Table_Express.webm?sv=2026-02-06&spr=https&st=2026-11-06T22%3A54%3A32Z&se=2026-11-06T23%3A54%3A32Z&sr=c&sp=r&sig=mK6Bdiz6aarY5sHtE819ZyjqiDHcINyHiPrzv0iFkt8%3D)

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

Pagination is the process of separating content into individual pages.

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

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.

The action performed by the button when selected.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A modal is a window that appears on top of the content you are currently viewing.