What is a table component?
The table component is a way to view your data in what most closely resembles a spreadsheet which you're likely familiar with.
To add a Table choose the Table component and then choose the data table to be used for this Table.
To learn more about choosing the data table and adding the table, please see this article.
Inside the Table component you'll see have some standard options available in other components, as well as unique settings only available in the Table component.
The Data Source tab is where you can filter which records will be displayed in this component with some 'server-side' filtering. Since this is universal to all components you can view it as its own article here. Learn more about Data Source.
In the fields tab you can choose which columns should appear in the table.
To add columns into the table, select the field that should appear as a column from the Fields navigation menu.
Once you've added a column from the left menu, you can customize the columns with many unique options depending on the field type.
To customize a column, click on the pencil icon on top of the column you wish to customize.
Once inside the column editing window you'll have 3 tabs at the top:
- Display Rules
In the general tab you can See the title that will appear at the top of the column as well as choose to hide it entirely.
If you have enabled Inline Editing in the table options, you can override those settings and disable it on this column.
Enabling Inline Editing in the column without it being enabled on the table will not have any impact.
When working with Number fields, if you have enabled the Summary option, you can determine if this column should be used for summaries or now.
Enabling Show Summary in the column without it being enabled on the table will not have any impact.
When the column is an Image field, you'll have the option to show the image as an Image, Link or Text Link
When the image is shows an an image and not a link you can enable the Image Model Popup which will open the image in a pop up when its clicked.
Images by default are shown with a max-width of 50px. To override this set the Image size to Custom
When the field is a rating field you can choose to output the number as icons or regular number.
When working with Slider bars you can set the style to a number or a progress bar.
You can further add rules to change the color of the bar based on the value of the bar.
For example, in this rule we have it that by default the color is blue, but if the value is lower than 50 make it red, if its higher than 90 make it green.
This will look like this:
When using connection fields you can choose to include a link for this connection to another connected page as well as display multiple values using comma separators or new lines.
In the format tab there are additional column formatting options. Some settings apply to all column types while others are only applicable to specific field types.
Set a custom width for each column.
Choose the alignment the contents of this column.
When working with Email and Link fields you can customize if the value will be displayed as a link or plain text.
Link to Google Map
When working with Address fields make the value a link to Google Maps.
When working with Date and Date/Time fields override your app settings and show this date in a different date format.
When working with a Date/Time or just Time field you can over ride your app settings and show a custom time format here:
Date Output Format
In date fields the date will be displayed as a natural date, but if you'd like to instead show it as an Age or Stopwatch you can change those options here.
To output the date values as an age choose to optionally also add months a days:
When using an option field if there is more than one option you can choose to output each option with comma separating them or a new line for each option.
With display rules you can add rules to customize the values of any column using rules.
For example, you can create a rule based on the Progress of the current record.
When validating display rules against other fields, that field must be present in the table.
Since Connected fields are appliable to all components they are covered in their own article. Click here to read more.
Filters and Groupings
In filters and grouping you can add several custom settings your tables to organize and summarize your table.
Using filters you can add a menu on top of the table and when selected can filter records based on pre-defined criteria chosen.
There are several custom configurations that can be added in filter tabs.
On the side of the filter tabs you'll have a "Clear Filter" button which clears the filters and shows all records. You can hide this option by selecting "Hide Clear Filter"
Each filter tab must be named and can have a custom color:
When the page first load none of tabs will be chosen by default. To set a specific filter tab as the option when the page first loads set the Set Default option on that tab.
If you want to hide specific column from being displayed when a particular tab is chosen, add those columns in the Hide Columns setting. This can be useful is for certain filters some columns don't need to be visible.
With groupings you can choose to group and sub-group your records in a table.
Here's an example of grouping the table by the "Status" field.
You can create another group inside the first group. For example: Group by status then sub-group by Location
There are several options that can be configured for each group:
- Visible Column
Let's unpack each option:
This will be the field in your database that will be used for grouping. This can be any field, but in most cases its a select or radio field.
Title is what will appear at the top of the option.
Choose if the options should group should show up ASC or DESC order
Set a color and border around the entire group.
When set to "On" the page will load will that entire group collapsed. To see the records you'll need to click on the arrow to expand the group.
When you're filtering by a field you already know this field value since that record is in that group. However, you can override this and still show the column. You can see in the image below, the "Job Status" field is not in the table, but the Location field is.
Summary adds a new row at the bottom of the table that can be used to summarize any number or currency fields visible in the table.
For best results, make sure there are no number fields that need to be summarized in the first column.
If a specific field should intentionally not be summarized, you can override the summary option in the field settings. Click here to see how to disable summaries on a column.
Allow New Record
Enabling this option creates a button as well as a form to add additional in a popup window.
Enable Inline Editing
Inline editing enables you to click on any value and edit that field without using a form.
If a specific column should not be editable via inline, but the rest should you can override that setting in the field options.
To enable your users to select several records in the table and update all at the same time, enable Multi-Select updates. When this is enabled a new column with checkboxes will be enabled so records can be selected, then clicking on Update will open a window where updates can be made.
To enable your users to search through the records, you can enable search. By default all searchable fields are used for searching. However, you can restrict the search to only work on particular fields by adding them in the searchable fields list.
Connection fields are by default not searchable and to make them searchable add them to the list of searchable fields. Only 3 connections can be searched at the same time.
Search works on top of any existing data conditions added in the data source tab.
The filter tab adds a Filter button where you can filter the table based on all fields or pre-defined fields. By default all fields can be used for filtering. You can change this and allow only specific fields by adding the allowed fields into the allowed field list.
Choose what will be displayed when the table contains no data.
Set a record limit per page. By default 25 records are shown per page.
Choose if the pagination at the top of the table is shown.
With batch updates you can make an update by selecting criteria and updating all those records in one shot. This is similar to the Multi-Select update from above, but in this case you don't need to select the records using checkboxes, you select the updates based on filters.
This feature enables you to update all records in the database, not only the records being shown to the user. To only allow records shown in the table to be updated make sure to select "Apply Table Filters"
Enabling this option will enable you to delete many records from the table by choosing the criteria after clicking Delete.
To allow the records in this table to be exported enable the export option. A new Export button will be added which will export all the records and columns currently in the table.
You can also export pre-defined records and columns even if they are not currently in this table by using Export Templates.
You must first add an export template in the data builder. Click here to learn more about Export Templates
When export templates are available you'll see those options available in the drop-down.