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

Search and filter your table data using the built-in search input

You can search through your table data using the input in the top-right of a table component. Start typing in the field name (column) you want to search, then the operator, then the search term. Internal supports the following operators: =, !=, <, <=, >, >=, contains, in, not in. Note that not all operators will appear, depending the the field type.

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.

‍

‍

Display the results from the execution of a function

Tables can also be bound to the results of a component (that is in the Space). This allows you to display the data that is being returned.

Configuring your table

Source

First, choose how you'll populate the data in this table. Select "Function" and then the corresponding function you want to use (ie, "list users records"). Select "Binding" and then choose a component in the Space in order to have this table display its results.

Text

Then, give your table a name (used to reference this component within Internal). You can also customize the table title.

‍

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

Export

To allow your users to download data from a Table, simply check the box "Allow this table to be exported as a CSV file". Note that all hidden columns will be included in the export and all permissions and filters are applied automatically.

Visibility Rules

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

‍

Multi-Select

To allow users to select multiple rows in a table, simply check the box "Allow selecting multiple rows". Once enabled, you can do one of two things:

From a JSON input field, bind to the table's selected rows.
From a Bulk Action component, bind to the table's selected rows.

‍

Effects

Here, you can select which rows are pre-selected upon initial load and reload of this table. This can be useful if other components are bound to the selected row in a table.

On Initial Load: You can choose to have the first row pre-selected.

On Reload: You can choose to have the first row pre-selected or to maintain (multiple) row(s) upon reload. If you choose to maintain the rows by index, the preselected rows will be the ones in the same position as those that were selected previous (ie, we'll preselect rows 1 and 3 if rows 1 and 3 were previously selected). If you choose to maintain the rows by id, the preselected rows will be the same records as what was selected previously (ie, we'll preselect record id 634 and record id 722 if those two records were selected previously, no matter what position those records are in now).

Design

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

‍

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

‍

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.