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.
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.
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).
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.
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.
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.
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.
Then, give your table a name (used to reference this component within Internal). You can also customize the table title.
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.
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.
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.
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.
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:
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:
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.
You can create visibility rules that will determine when this component is visible and able to be interacted with.
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:
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).
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.