Vega Table Operations

Estimated Reading Time: 4 minutes

Overview

Vega Table operations are the actions the Vega Table component performs. These actions include filtering, adding rows, removing rows, navigating to different table pages, and so on. But, instead of running operations in the Table component, you'll use logic components to control and trigger them.

Each Vega Table operation holds key/value pairs called options. For each Vega Table option, enter the relevant option value to customize how your Vega Table operation performs. For example, the TABLE_SET_COLUMN_FILTER operation filters columns in the Vega Table component. The TABLE_SET_COLUMN_FILTER operation uses the ColumnFilter option key/value pair to determine the column you want to filter by.

To control and trigger Vega Table operations in logic components, use a new Outputs Enter outputs components and actions you want the component to perform. Type called VEGA_OPERATION. For the logic component's Outputs Value, enter the operation and options you want your Vega Table to perform.

Here is the basic template for performing an operation:

Copy

{
   "type": "OPERATION_TYPE",
   "options": {
      // Options go here.
   }
}

Vega Table Operations

Below is a list of all supported Vega Table operations you can use to control your Vega Table component.

FEATURE FLAG This banner denotes that the operation requires you to enable a feature flag to use it. To learn more, view the Enabling Feature Flags section of this article.

Operation Type	Description	Option	Example JSON
TABLE_SET_COLUMN_FILTER	Filters one or more columns.	targetKey: string filters: ColumnFilter[] ColumnFilter = { id: string value: unknown }	Copy `{ "type": "TABLE_SET_COLUMN_FILTER", "options": { "targetKey": "grid", "filters": [ { "id": "title", "value": "CEO" } ] } }`
TABLE_SET_GLOBAL_FILTER	Filters all columns simultaneously.	targetKey: string filters: ColumnFilter[]	Copy `{ "type": "TABLE_SET_GLOBAL_FILTER", "options": { "targetKey": "grid", "filter": "CEO" } }`
TABLE_GO_TO_FIRST_PAGE	Navigates to the first page of the table.	targetKey: string FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_GO_TO_FIRST_PAGE", "options": { "targetKey": "grid" } }`
TABLE_GO_TO_LAST_PAGE	Navigates to the last page of the table.	targetKey: string FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_GO_TO_LAST_PAGE", "options": { "targetKey": "grid" } }`
TABLE_GO_TO_NEXT_PAGE	Navigates to the next page of the table.	targetKey: string FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_GO_TO_NEXT_PAGE", "options": { "targetKey": "grid" } }`
TABLE_GO_TO_PAGE	Navigates to a specific page of the table.	targetKey: string pageNumber: number or string IMPORTANT The first page has an index of 0. FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_GO_TO_PAGE", "options": { "targetKey": "grid", "pageNumber": "{{textField.value}}" } }` Copy `{ "type": "TABLE_GO_TO_PAGE", "options": { "targetKey": "grid", "pageNumber": 5 } }`
TABLE_GO_TO_PREVIOUS_PAGE	Navigates to the previous page of the table.	targetKey: string FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_GO_TO_PREVIOUS_PAGE", "options": { "targetKey": "grid" } }`
TABLE_SET_PAGE_SIZE	Sets the number of rows displayed on each page.	targetKey: string pageSize: number or string FEATURE FLAG Use enablePagination: true to allow pagination.	Copy `{ "type": "TABLE_SET_PAGE_SIZE", "options": { "targetKey": "grid", "pageSize": 3 } }` Copy `{ "type": "TABLE_SET_PAGE_SIZE", "options": { "targetKey": "grid", "pageSize": "{{pageSizeText.value}}" } }`
TABLE_ADD_COLUMN	Adds a column to the table.	targetKey: string definitions: object[] NOTE You can add additional definitions, like label. If you do not provide label, it defaults to the label associated with the type of component.	Copy `{ "type": "TABLE_ADD_COLUMN", "options": { "targetKey": "grid", "definitions": [ { "key": "ColumnAdded", "type": "button" } ] } }`
TABLE_REMOVE_COLUMN	Removes a column from the table.	targetKey: string keysToRemove: string or string[]	Copy `{ "type": "TABLE_REMOVE_COLUMN", "options": { "targetKey": "grid", "keysToRemove": [ "firstName", "lastName" ] } }`
TABLE_SET_SELECTED_ROW	Highlights the selected row of the table.	targetKey: string selectedRows: RowSelection RowSelection = {[rowIndex: string]: boolean} FEATURE FLAG Use enableRowSelection: true to allow row selection.	Copy `{ "type": "TABLE_SET_SELECTED_ROW", "options": { "targetKey": "grid", "selectedRows": { "0": true } } }`
TABLE_SET_GROUPING_CRITERIA	Sets row grouping in the table.	targetKey: string groupBy: string or string[] FEATURE FLAG Use enableGrouping: true to allow row grouping.	Copy `{ "type": "TABLE_SET_GROUPING_CRITERIA", "options": { "targetKey": "grid", "groupBy": "lastName" } }`
TABLE_TOGGLE_GROUPING	Enables or disables grouping.	targetKey: string	Copy `{ "type": "TABLE_TOGGLE_GROUPING", "options": { "targetKey": "grid" } }`
TABLE_SET_ROW_PINNING	Pins a row of the table.	targetKey: string rowPinningState: RowPinningState RowPinningState = { top: string[] bottom: string[] } FEATURE FLAG Use enableRowPinning: true to allow row pinning.	Copy `{ "type": "TABLE_SET_ROW_PINNING", "options": { "targetKey": "grid", "rowPinningState": { "top": [ "0", "1" ], "bottom": [ "4" ] } } }`
TABLE_SET_COLUMN_PINNING	Pins a column of the table.	targetKey: string columnPinningState: ColumnPinningState ColumnPinningState = { left: string[] right: string[] }	Copy `{ "type": "TABLE_SET_COLUMN_PINNING", "options": { "targetKey": "grid", "columnPinningState": { "left": [ "name" ], "right": [ "title" ] } } }`
TABLE_CLEAR	Removes all columns and rows from the table.	targetKey: string	Copy `{ "type": "TABLE_CLEAR", "options": { "targetKey": "grid" } }`
TABLE_ADD_ROW	Adds an empty row to the table at a specified index.	targetKey: string targetIndex: number rowValue: object IMPORTANT If no index is specified, a row adds to the bottom of the table.	Copy `{ "type": "TABLE_ADD_ROW", "options": { "targetKey": "table", "targetIndex": 1, "rowValue": { "Name": "AppOne", "Date": "12/01/2023", "Number": 123 } } }`
TABLE_REMOVE_ROWS	Removes a specified row(s) from the table.	targetKey: string targetRowKeys: string[] NOTE The target key of the row(s) to be removed. targetIndexes: number[] NOTE The index for the row(s) to be removed.	Copy `{ "type": "TABLE_REMOVE_ROWS", "options": { "targetKey": "grid", "targetIndex": [0] } }`
TABLE_SET_ACTION_TOOLBAR_VISIBILITY	Displays or hides the action toolbar.	targetKey: string enableTopToolbar: Boolean or string enableBottomToolbar: Boolean or string	Copy `{ "type": "TABLE_SET_ACTION_TOOLBAR_VISIBILITY", "options": { "targetKey": "grid", "enableTopToolbar": true, "enableBottomToolbar":false } }`
TABLE_SET_COLUMN_FILTERS_VISIBILITY	Displays or hides the column filter toolbar.	targetKey: string enableColumnFilters: Boolean or string	Copy `{ "type": "TABLE_SET_COLUMN_FILTERS_VISIBILITY", "options": { "targetKey": "grid", "enableColumnFilters": true } }`
TABLE_SET_GLOBAL_FILTER_VISIBILITY	Displays or hides the global filter toolbar.	targetKey: string enableGlobalFilter: Boolean or string	Copy `{ "type": "TABLE_SET_GLOBAL_FILTER_VISIBILITY", "options": { "targetKey": "grid", "enableGlobalFilter": true } }`

Enabling Feature Flags

Many of the Vega Table operations require you to enable them in your Initializer component. The table below provides you with the necessary syntax to enable pagination, row selection, grouping, and pinning.

Operation Type	Description	Option	Example JSON
SET_PROPERTY	Enables those operations behind a feature flag.	targetKey: string property: string value: Boolean	Copy `{ "type": "SET_PROPERTY", "options": { "targetKey": "grid", "property": "enableRowSelection", "value": true } }`

It's important to note that you can enable feature flags and perform Vega Table operations in the same Initializer component.

Resources

Vega Table Component

Feedback

Did you find this helpful? Yes No

Sorry about that

Want to tell us more? If you're an Unqork employee, please visit our #documentation-feedback Slack channel. Or you can email your feedback to our documentation team.

Great!

Want to tell us more? If you're an Unqork employee, please visit our #documentation-feedback Slack channel. Or you can email your feedback to our documentation team.