In this article, you will learn...

  • What is an Interactive Table widget?

Note: In order to use this tutorial, it may be helpful to understand how to create a Table. Check out this separate guide if you have not done that before.

Adding the Interactive Table widget

The Interactive Table widget is found under the Embed menu in the App Editor.

Datasource

The Interactive Table widget can be used to visualize data from the following sources:

  • Variable: Any variable within the App (the variable must be an array of objects).

  • Tulip Table: An existing Tulip Table.

  • Tulip Table Query: A query within a Tulip Table to return filtered records.

Linked Placeholder / Variable

An Interactive Table widget can also include a linked placeholder or variable, depending on data source. This represents a container for a single object, with an Interactive Table representing a list of objects. If a linked placeholder or variable is set, selecting a row within the table will load that row of data into the container.

Columns

To add columns, select them from the dropdown list to add them one at a time. Columns are represented by columns in the selected Tulip Table, Table Query, or by object keys in the selected variable.

Columns can be reordered by dragging labels in the widget properties. You can change the layout of the table by dragging each column in the App Editor or Player to change the width of columns.


Text Wrap

Text within an Interactive Table cell can be set to wrap. With wrapping enabled, longer-form text will create additional vertical space. With wrapping disabled, text will be shortened with an ellipsis when approaching the column edge.

Select Button

A select button can be added to the Interactive Table widget to provide additional clarity to which row is selected if a Linked Placeholder / Variable has been added.

Filters

Static or dynamic filters can be added to the Interactive Table widget to filter out data in the interactive table widget. Filters can be set to match all or any condition and can be compared to static values, variables, application information, and table records.

Note: Table Filters are not available when the datasource is a variable.

Sorting

Sorting the Interactive Table based on a specific column can be set up with the "Sort By" option in ascending or descending order (based on data type).

Note: Sorting is only available for Tulip Table datasources.

Row Index

A row index can be added to the Interactive Table widget to indicate the row count on the left side. The row count is specific to the content actively being displayed or rendered by the widget.

Rows per Page

The number of rows per page on the Interactive Table widget can be can be adjusted here. Increasing the number of rows beyond a certain number will add vertical scrolling functionality to the widget.

Triggers

Triggers can be configured to run when a row is selected within the Interactive Table widget. To add a trigger, click the "+" button next to the Trigger label in the widget properties menu.

Triggers can leverage information from the selected row by setting a Linked Record / Variable and using this within the body of the trigger.

Font Size and Pagination Font Size

The font size of the data displayed in the table and the size of the page number labels can be adjusted within the widget properties menu.


Further Reading

Did this answer your question?