Table

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, and pop-up forms. 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, text, 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

Source

First, select the function used to populate this table's data.

Text

Then, give your table a name. The name you pick will be displayed at the top of the table.

‍

Parameters

In some cases, the Function you're using may require a parameter to be specified. For example, you may need to pass in an ID in order to retrieve the data and display it in the table. Click on the parameter to provide a value.

‍

Columns

Here you can add, remove, hide and rearrange table columns. Click on a column name to customize how your data in the table is displayed, using icons, pillboxes, or links. The "autolink" option appears for fields that are primary keys or foreign keys - and will turn this into a link to the Super Record.

‍

You can also click "+" and click Components to insert inline buttons, pop-up forms, text, 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, click the eye icon to make it 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.

Sorting

Select the field to sort on, then choose "Ascending" or "Descending". Users can still sort the table, this setting merely determines the default sort order.

‍

Filters

You can set filters to change what's displayed in the table, based on your criteria. If you’re working with a large unfiltered data set, you can use the “require a filter to be set before loading data” checkbox.

Click the “+” 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 id column in the Rides table.

You create a filter in the Rides table and bind it to the Riders table -> Selected Row -> Data -> id:

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

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

‍