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
Click to expand

Displaying Data in a table

A table takes data in the form of an array of objects. Adding an array of objects to the table data will display each object as a row of data with each key of the object as a column in the table.
You can also display data from an API in a table by binding it in the table data using
{{ }}
// is the response of the API / Query which is an array.
If the API / Query response is not an array, you can transform the response or access an inner key which is an array using the dot operator

Displaying Paginated Data

Large datasets are paginated by default on the client in a table to ensure only limited information is displayed on the UI. To display large datasets that are paginated on the server we can
  • Enable the server-side pagination property in the table
  • Call the API / Query on page change in the table
  • Bind the pageNo property in the API / Query {{ Table1.pageNo }}
Table1 in the above example is the name of the table which is editable in the property pane

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
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
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
Column Action
Adds a new column to the table with a button against each row. The button can be configured to trigger an action on the corresponding data row.
Sets the action to be run when user selects a row in the table. Default supported actions are: Call API, Execute DB Query, Navigate to Page, Show Alert, Open / Close popup
Sets the action to be run when a table page is changed. Default supported actions are: Call API, Execute DB Query, Navigate to Page, Show Alert, Open / Close popup