The table is used to display rows of data. You can display data from an API in a table, trigger an action when a user selects a row, and even work with large paginated data sets

Selected Row

Tables are useful to view large lists of data. To drill down into the data of a single row, the selected row property of a table can be used. Simply create UI that represents a row of a table and bind each widget to the selected row of the table. This code snippet illustrates binding an image column of the selected row to an Image widget.

{{ Table1.selectedRow.imageUrl }}


Internal Property



Contains the data of the row selected by the user. Will be undefined if no row is selected


Contains the current page number that the user is on. Can be used by APIs for pagination


Contains an array of rows selected by the user when multi-select is enabled


Contains the number of rows that can fit inside a page of the table. Changes along with the height & row height of the table


Contains the search text entered by the user in the Table

Widget Property


Table Data

This property lets you edit the data in the table. You can either write an array of objects to display as table rows or you can bind data from an API using the mustache syntax {{}}


Auto populated from the Table data. This lets you edit the label, show/hide each column (the eye icon) and also customize the column settings

Server Side Pagination

Enables you to implement pagination by limiting the number of results fetched per API / Query request. Use this property when your table data is being bound to an API / Query.


Controls widget's visibility on the page. When turned off, the widget will not be visible when the app is published

Default Search Text

Sets the default search text of the table

Enable multi-row selection

Allows multiple rows of a table to be selected. The rows are populated in the selectedRows field

Enable inline row editing selection

Allows inline editing in each row of a table. The updated data in a row is populated in the selectedRow field




Sets the action to run when the user selects a row. See a list of supported actions


Sets the action to run when the user edits a row (inline row editing). See a list of supported actions


Sets the action to run when the table's page changes. See a list of supported actions


Sets the action to run when the user enters a search text. See a list of supported actions

Column settings

Each column can now be customized through a set of properties by clicking on the gear icon.

After clicking on the gear icon you see the Column type property which allows you to perform different actions on each column.

A great property introduced here is the Computed value and the currentRow internal property. This allows you the manipulate the value using JS expressions; ex you want to show the datetime stamp in the carbon format (human-readable), You can now do that by just using the js/lodash function. You can now also access each row's column values with currentRow property. This can be helpful if you wish to merge multiple value/properties under a single column.

In the example above, we rename email column to contact and then use the computed value property inside the column setting to merge userName and email in one column. We later hide the userName column.

Depending on the column type you have some control over styling as well now.

Changing column styling; font, alignment, color.

Additionally compared to the functionality before the actions can now be set on every column with customization over style and click events

Set column actions

Introducing the new feature "Inline row editing". This allows you to edit each row of table. Additionally, triggers an action when row data is updated.

Inline row editing



Column Type

Select a column type from the dropdown and get relevant actions to perform

Computed Value

internal property currentRow is introduced to access each row data. You can utilize this property to manipulate the column data using JS expressions


Based on the Column Type, there are various style properties available to change the look and feel of each column

Original/Display Date format

In case of type date we can set the original/display date format to our choice

Button Properties

In case of column type button we can use these properties to change the label/color or create a onClick action

How to display data and handle pagination inside a table?

Read this guide