Vega Table Operations

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.

A static image displaying the table set column filter Table operation configured in an Initializer component's Outputs table.

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.

A static image displaying an Intializer component's Outputs table, configured to enable a feature flag and perform a Table operation.

Resources