Note: The Vega Table component requires the Vega (2.0) runtime. 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 Unqork IDE. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked
General Settings
Setting
Field
Type
Default
Description
Property ID
key
Text input
vegaTable
A unique ID for this component instance. Used to reference the component in logic and .
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.
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 trigger 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 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 browser-based workspace where Creators build, edit, review, and manage Unqork applications. Also referred to as the Unqork platform. The IDE replaces what was previously referred to as UDesigner and Classic Designer, which are considered legacy.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
Pagination is the process of separating content into individual pages.
The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.
A data structure is the design used for organizing, using, and storing data.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.
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.
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.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.