Vega Table Component

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

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.

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.