Tables

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. 

 

Adding Tables

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.

Customizing Tables

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. 

  1. Data Source
  2. Fields
  3. Links
  4. Filter & Groupings
  5. Options

Data Source

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. 

Fields

In the fields tab you can choose which columns should appear in the table. 

table-columns.jpg

To add columns into the table, select the field that should appear as a column from the Fields navigation menu. 

Adding-fields-to-table.jpg

 

Customizing Columns

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: 

  • General 
  • Format 
  • Display Rules

General

Title

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. 

Inline Editing

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. 

Number Fields

Show Summary

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

 

Image Field

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. 

table-image-modal-window.jpg

Images by default are shown with a max-width of 50px. To override this set the Image size to Custom

Rating Field

When the field is a rating field you can choose to output the number as icons or regular number. 

 

Slider Bar

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: 

 

Connection Field

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. 

 

Format

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. 

Column Width

Set a custom width for each column.

Alignment

Choose the alignment the contents of this column. 

Display Format

When working with Email and Link fields you can customize if the value will be displayed as a link or plain text. 

When working with Address fields make the value a link to Google Maps. 

Date Format

When working with Date and Date/Time fields override your app settings and show this date in a different date format.

 

Time 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. 

Stopwatch

Age

To output the date values as an age choose to optionally also add months a days:

 

Option Output

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. 

Display Rules

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. 

Table-Dislay-Rules.jpg

When validating display rules against other fields, that field must be present in the table. 

 

Links

Connected Fields

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. 

  • Filters
  • Groupings
  • Summaries

Filters

Using filters you can add a menu on top of the table and when selected can filter records based on pre-defined criteria chosen. 

filter-tabs-compressed.gif

 

There are several custom configurations that can be added in filter tabs. 

table-filter-tabs.jpg

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. 

 

Groupings

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: 

  • Field
  • Title
  • Order
  • Color
  • Collapsed
  • Visible Column

Let's unpack each option: 

Field
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
Title is what will appear at the top of the option. 

Order
Choose if the options should group should show up ASC or DESC order

Color
Set a color and border around the entire group. 

Collapsed
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. 

Visible Column
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. 

table-groupings.jpg

 

Summaries

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. 

 

Options

    Allow New Record

    Enabling this option creates a button as well as a form to add additional in a popup window. 

    image-1580273852257.png

     

    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. 

     

    Multi-select Updates

    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. 

     

    Filter

    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. 

     

    No Data

    Choose what will be displayed when the table contains no data. 

     
    Record Limit

    Set a record limit per page. By default 25 records are shown per page. 

     
    Show Pagination

    Choose if the pagination at the top of the table is shown. 

     
    Batch Updates

    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"

     

    Batch Delete

    Enabling this option will enable you to delete many records from the table by choosing the criteria after clicking Delete. 

     
    Exports

    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.