Use tables to view your data. Tables are a key component within many tools, allowing users to search and manipulate its data, while also providing its data as inputs to other bound components, like forms and buttons.

Ways to use a table

Provide data to prefill other components fields

When a user selects a row in a table, the data in that row can be used as inputs for components like buttons, forms, pop-up forms and dynamic buttons. This is done through Field Configuration (within the non-table component).

Examples:
1) You have an “Activate” button that performs a custom function that requires a UserID. You bind the UserID button field to a Users table that is also in the space. When a user selects a row in the Users table and then clicks “Activate”, it will grab the id column from the Users table to use as the UserID value.

2) You're creating an Update Order form. You have a Orders table that you bind to the form. Each data field, like customerID is prefilled with the existing value from the Orders table. A user just needs to click on a table row and all the current data is filled out in the form, so it's easy to make updates and submit.

‍

‍

Dynamically filter data shown in other components

When a user selects a row in a table, the data in that row can be used to filter components like card lists, detail views and even other tables. Use the filters for that component and choose to compare against data coming from a selected table row.

Example:
Let’s say you’re an on-demand service, and you’ve set up a space with 2 tables: your Riders and Rides. You can put a filter on the Rides table so that it will only display the rides of the rider selected in the Riders table.

We’ll cover a step-by-step example of setting this up below.

‍

Display in-line actions

A number of components can be inserted into a table - these components appear in every row and typically perform functions either using or changing the data in their row. You can add buttons, pop-up forms, dynamic buttons, calculated fields, s3 uploaders, links and images.

Example:
You have a table showing your Customer List. In the first column, you add a link in-line that is set up to take you to another space with the customer’s detailed profile. In the last column, you have an Update pop-up form that allows a user to edit the data for that customer.

‍

‍

Configuring your table

‍Data

First, select the resource whose data this table should show. Your table name is shown at the top of the component.

Filters

You can set filters to change what's displayed in the table, based on your criteria. Click “Add filter” to add your first table filter.

Each filter has a table field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component. Dynamic filters are another way to bind components together to add functionality.

‍

Preset filter example

You have a table of Users which contains users with both "Active" and "Suspended" status. You're creating a tool to reinstate suspended users, so you want to only display "Suspended" status users in your table. You set up the following filter: status [is equal to] suspended .

Other examples of preset filters:

Battery_level [is less than] 20
Status [is not equal to] VIP
Email [contains] "@gmail.com"
LastName [is not null]

‍

Dynamic filter example

Let's continue the example above of an on-demand service with a Riders and Rides table in the space. You want to make it easy to look up the rides for a given rider - the two tables are linked by a foreign key; the id column in the Riders table matches with the rider column in the Rides table.

You create a filter in the Rides table as such:

This would bind these two tables together, so that whenever a user clicks on a rider in the Riders table, the Rides table is filtered down to display just that rider's rides.

Just like binding two tables, dynamic filters can also bind a table with a filter, detail, or card list component:

Detail: name of detail component -> data -> field
Filter: name of filter component -> value
Card list: name of card list component -> data -> field

Columns

Here you can rearrange your table columns and remove columns. You can also customize how your data in the table is displayed, using icons, pillboxes, or links. The "autolink" option appears for fields that are a primary key and will turn this into a link to the Super Record.

‍

Clicking “+Add Column” at the bottom will allow you to add back any fields that were removed. This will also allow you to add inline buttons, dynamic buttons, pop-up forms, calculated fields, s3 uploaders, links and images to your table.

Hidden fields

If you don't want a user to see a data column, but still want to use its data in other components, remove the column and add it back as a hidden field.This means the column won’t be displayed in the table, but you can still use the data in the column as inputs for another component.

Example: You make Created at a hidden table column for your “Users” table. You can then create a button that will use the Created at value from a selected row in the table -- even though the user selecting the row does not see the Created at column in the table.

How should the table be sorted?

Users in this space can still re-sort the table; this setting determines the default sort order.