Vega Table Component

Overview

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.

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 section of this article.

Like the Panel or Field Group 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:

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

You can find the Vega Table component under the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Display Panel

Field Text

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. The Spreadsheet view is recommended because its functionality is more robust. The Form view is scheduled for sunsetting and will not be supported.

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.

The Spreadsheet view is recommended because its functionality is more robust. The Form view is scheduled for sunsetting and will not be supported.

Table Tools

Setting	Description
Show Tool Bar	Set to (ON) to display table options to end-users, including: Filter Table: Search and filter all fields in the table by entering a value. Fields that don't match the search value are hidden. Filter 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 Off in Express View. Hide 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. Condense 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. Full Screen: Click to expand the table to the full size of the browser window. 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 (OFF) in Express View.
Show Column Actions	Set to (ON) to display column actions. Settings include: In the list below, headerValue is replaced by column's header name. Clear Sort: This action is available after applying a Sort By action. Click this action to remove any column sorting. Sort by headerValue ascending: Click to sort the column alphabetically or numerically by the smallest, first, or earliest letter or numerical value. Sort by headerValue descending: Click to sort the column alphabetically or numerically by the largest, or last letter or numerical value. Clear Filter: This action is available after applying a Filter By action. Click this action to remove any column filtering. Filter 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 Filter Individual Column setting. Hide headerValue column: Hides the column from view. Same effect as the Hide Column(s) setting. By default, this setting is (OFF)
Show Pagination	When set to (ON), 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, 30, 50, or 100 rows. By default, this setting is (ON).
Enable Server-Side Pagination	When set to (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 (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 (ON), The Reset Page Index setting applies to the Tool Bar in Express View.

Setting	Description
Store Data in Database	The Store Data in Database setting affects how data persists through your application. When set to (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. 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 (OFF) when you don’t want to store the values from this field in the database. 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. 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.

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 component, to existing Vega Table fields.
New Row	Add a new row to all Table column fields. 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.

Setting	Description
Nested Data Structure Table	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. 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.

Setting	Description
Aggregation Table	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. Rows that contain no data in any column field do not display in Express View.

Setting	Description
Edit	Opens the Operations Builder tool. Discover how to use events and operations in our Operations Builder article.

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.

Setting	Description
Navigate Down on Enter Keypress	When set to (ON), focus moves to the next row in the column after pressing Enter. Provides similar functionality to a spreadsheet tool. When (OFF), the focus remains on the same cell when pressing Enter. By default, this setting is (OFF).

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.

What You Need

Before starting this configuration, you'll need the following:

A Workspace.
An Unqork application.
A module with a title.

Configure the Text Field Components

Begin by adding the fields you want in the Vega Table component. For this example, add Text Field components to act as the Vega Table component's fields.

Drag and drop four Text Field components onto your canvas.

In the Property ID and Label Text fields, enter the following:

Property ID	Label Text
carrier	Carrier
type	Type
premium	Premium
status	Status

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.

Drag and drop a Vega Table component onto your canvas, placing it above your Text Field components.

In the Property ID field, enter tableInsurance.

In the Label Text field, enter Market Summary.

Click Save Component.

Drag and drop the carrier, type, premium, and status Text Field components inside the tableInsurance Vega Table component.

Hover over the tableInsuranceVega Table component and click the (Settings) button from the component toolbar.

Navigate to the Data settings, next to Intial Values & Data Mapping, click Edit.

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

Click Save Component.

Configure the colFilter Columns Component

Add a Columns component to organize the Vega Table operations that filter specific columns and cells in your table.

Drag and drop a Columns Component Icon

Columns component onto your canvas, placing it above your tableInsurance Vega Table component.

In the Property ID field, enter colFilter.

Under Formatting, click Three Columns Icon

(three columns).

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.

Drag and drop a Button component Icon

Button component onto your canvas, placing it in the far-left column of the colFilter Columns Component Icon

Columns component.

In the Property ID field, enter btnFilterGlobal.

In the Label Text field, enter Global Filter By Unqork Auto.

Navigate to the Actions settings.

To the right of Events & Operations, click Edit.

The Events & Operations menu displays.

From the Add Event drop-down, enter or select On Click.

Click Add.

From the Operation Type drop-down, enter or select TABLE_SET_GLOBAL_FILTER.

Click + Add Operation.

10.

In the Target Key field, enter tableInsurance.

11.

In the Filter* field, enter Unqork Auto.

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.

Drag and drop a Button component Icon

Button component onto your canvas, placing it in the far-right column of the colFilter Columns Component Icon

Columns component.

In the Property ID field, enter btnFilterSubmitted.

In the Label Text field, enter Filter By Submitted.

Navigate to the Actions settings.

To the right of Events & Operations, click Edit.

The Events & Operations menu displays.

From the Add Event drop-down, enter or select On Click.

Click Add.

From the Operation Type drop-down, enter or select TABLE_SET_COLUMN_FILTER.

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.

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 component to organize the Vega Table operation that lets you add a new row to the bottom of the table.

Drag and drop a Columns Component Icon

Columns component onto your canvas, placing it below your tableInsurance Vega Table component.

In the Property ID field, enter colAddRow.

Click Save Component.

Configure the btnAddRow Button Component

Lastly, you'll add a Button 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.

Drag and drop a Button component Icon

Button component onto your canvas, placing it in the left column of the colAddRow Columns Component Icon

Columns component and above your initAddRow Radio Button component icon

Initializer component.