Table Component

Tables provide a way to view and manipulate your company’s data. In a Space, a table component can be used to accomplish a number of different things:

1. To give users access to that table’s data and allow them to search, sort and filter to find the records that they need. Ex: If you are setting up a Space for customer service tools, it makes sense to add a table containing customer data so your internal teams can look up and work with that data. 

2. Utilize the selected row in a table as an input to other components or functions. Ex: You can populate a field in a form with the data that a user selects in the table. Or you can connect that table to a button, so that the button performs an action using data selected in the table. 

3. Add preset and dynamic filters to your table. Preset filters let you filter the table data ahead of time for users. Dynamic filters will filter the table data based on a value that comes from another component. Ex: You can dynamically filter a table based on a filter component: “Only show records with prices less than what the user input in the Price filter component”. Or set up a dynamic filter based on another table: “Only show Transaction records that match the Customer ID selected in the Customers table component.” 

4. Add in-line actions to your table. This allows you to create dynamic buttons, pop-up forms, and action buttons that will appear in every row of your table that can perform actions. Ex: You may want to create a “Suspend” button within each row of your “Users” table that will change a user’s “Status” to “Suspended.”

‍

Table Configuration

‍Data

Choose the data source and the resource whose data you want this table to display. If you wish, you can customize the display name of this table to make it more understandable for users. 

Filters

Filters allow you to set criteria that will determine what data is displayed in the table. This criteria can be based on values you define (preset filter) or by a value that comes from a different component (dynamic filter).

Click “+ Add filter” to add your first table filter. You can use the trash can icon to delete a filter, and add more filters by using the button below. For each table filter, you must define the field, operation, and value:

Field: In the first input, select the table column that you want to filter on.

‍

Operation: In the second input, you’ll choose how you want to compare values and select whether you are comparing against a fixed value or a dynamic value that comes from another component. 

Operators - “equal to”, “is not equal to”, “greater than”, “greater than or equal to”, “less than”, “less than or equal to”, “is null” (preset filter-only), “is not null” (preset filter-only), and “contains” (string-only)  

Value: For a preset filter, input the comparison value here. In the case of a dynamic filter, you will see a dropdown list of other components in the space. 

To filter your table component based on the value a user inputs into a filter component, simply select the name of the filter component and then choose “Value”. Once saved, users will be able to enter a value (ex.. ACME) into your filter component (ex. Search by Company Name) and the table component will automatically be filtered to only show relevant rows (e.g. rows where Company Name column is equal to ACME). 

To filter your table component based on a row selected in another table (“base table”), select the name of the base table component, then choose “Selected Row”, “Data'', and then finally the specific field to provide the comparison value (this can include hidden fields in that table). Whenever a user selects a row in the base table, your target table will automatically be filtered.

Columns

In this tab you can customize the view and display of the data in your table. You can display data in your data as text, icons, pillboxes, or links. You can also customize the order columns are displayed, set hidden columns, and determine the default sort order for your table. 

Table Columns

You’ll see a list of columns that exist in your table. You can rearrange the order that these columns are shown in the table by clicking on the left of each column and dragging and dropping. You can click on the trash icon to delete any fields that are not necessary to show in this table. 

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, and pop-up forms to your table - click the links for configuration details on each. 

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

Hidden Table Columns

If you’ve removed any columns, you can also add them back here as a “hidden table column”. 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. 

Ex: 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?

You can leave the table unsorted, or choose a default sort order. Simply select the column (field) you want to sort by and then “ascending” or “descending” order. Note that users can still re-sort the table - this setting is only for the default sort order.