Table

The Table component lets you display a table of data. Like the list components, you can pass data (an array of objects) to the table to iterate over.

How to use

A Table component receives an array of data that it will loop over to create an instance of the Table's child components (Table Row, Table Cell, etc) for each item in the array. This can be a simple array of strings, or even an array of complex objects.

The data you pass to a Table component's Data prop can come from a Variable if, for example, you have a fixed array of values or one populated using an API Request Action. You can also pass data to a Table from a Fetch component on your Screen.

For each item in the array that you pass to a Table, the List will render an instance of all child components within the Table component. For example, if you have a Table component that contains a nested Text inside a Table Row and Table Cell component and you pass it an array which contains 20 items, the Table will render 20 instances of those components - one for each item in the array passed to the Table.

The data for each item in the array will be available to all child components within the Table component. The item data will be available as Table item in any variable dropdowns for props in the component's Data tab. Any keys for the item will also be listed if you didn't skip the Test step when saving your Endpoint.

That means that our Text component above will have access to the table item's data in their variable selection dropdowns in the Data panel. So, if your array contains objects with keys such as name and description, we could pass those values to our Text component inside the Table and each one would display their own data. Learn how to set and use the Fetch and List component in Fetching Data.

Inside the Table, you can nest Table Row components. These have some of their own Config props to further customize padding and border. You can also set a Table Row to be the header for the Table.

And finally inside the Table Row you can nest the Table Cells. These components have most of the same style props as a View in addition to some Config props for the border.

Some prop values are passed down the child tree. For example, when you set the Border Width prop on the Table, that will be applied to all Table Rows and Cells. This value can then be overridden at the Row level or the Cell level. The props that have this effect are described as such in the prop descriptions.

Style Properties

Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.

Component Specific Styles

Configuration Properties

Data Properties

Conditional Display

You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.