What You'll Learn

This article will show you how to configure and customize Table Elements to effectively display your data. You'll learn how to manage columns, implement filtering and sorting options, create action links, and optimize your Tables for different user experiences, helping you create structured displays that let users interact with your data in an intuitive way.

What are Table Elements?

Table Elements display multiple records from tables in your Live App. Each column in the Table represents a field in a table, while each row corresponds to an individual record.

Tables can also include action links that allow users to access more information about a record, make edits or deletions to individual records displayed in the Table, or initiate specific actions.

What do Table Elements Look Like in the Live App?

In the Live App, a Table Element displays fields from your data table as columns, with each record shown as a row.

Managing Table Elements

Where can I access Table Elements?

To access your Tables, navigate to the Pages section of the Builder. From there, you can add a new Table or select a page that already has a Table Element.

Once you've selected a Table Element, you can edit it directly in the page preview.

Table Settings

To access the element settings, click on the Table Element in the page preview. This will open the element editor in the left side-toolbox.

The Table settings include the following sections:

Source: Control which records display in the Table
Settings: Control pagination, filters, and options such as search, exporting, and inline editing
Add Columns: Choose which columns and links to display on your Table

Source

The Source section determines which records the Table will show and how they will be presented:

Data: Add rules to define and limit which records will be displayed
Sort: Define the sort order for records
Limit: Specify the number of records to display (for example, if you want to show only your top 10 prospects)

Settings

The Settings section controls how your Table behaves and what features are available to users.

Options

Enable or disable these features to customize your Table Element:

Keyword Search: Adds a search field above the Table for users to filter records by keywords
Exporting: Adds a link for users to export data to CSV, JSON, or TXT format
Inline Editing: Allows users to edit fields directly within the Table
Hide Empty Columns: Automatically hides columns that contain no data

Empty Table Text

Customize the message that appears when the Table has no records to display. By default, this shows "No Data."

Column Summaries

Column summaries perform calculations on all rows in a column and display results at the bottom of the Table. You can add Sum, Average, Minimum, and Maximum summaries to provide insights into your data.

To add column summaries, click the "Add Summary" button, add a title for your summary, and select the summary type. By default, the title is "Total" and appears in a left column if available.

To turn off summaries for specific columns, hover over the column, click the "more options" icon, and select "No" in the Allow Summary dropdown.

Pagination

Pagination controls how many records display at once. If records exceed this limit, navigation controls appear to help users browse through pages.

Options include:

Set how many records to display at a time: Choose from 10, 25, 50, or 100 records
Let the user change the amount: Allow users to select their preferred number of records per page
Repeat pagination controls below the element: Show navigation buttons at both top and bottom of the Table

Filter Options

Customize how users can filter records in your Table:

Don't allow records to be filtered: Disable filtering
Allow users to add custom filters: Add an "Add filters" link above the Table for users to create their own filters
Use a filter menu: Display predefined filter options above the Table

When you enable custom filters, users can select which fields and criteria they want to filter by. You can limit available filters to just the fields shown in the Table or include all fields from the data table.

Using a Filter Menu

A filter menu displays links with predefined filters above the Table. Users can click these links to automatically filter records based on rules you've established.

These filters cannot be modified by users in the Live App.

Title & Description

Add a title and description to provide context about the content displayed in your Table:

Title: Displays as the main heading above the Table
Description: Provides additional information below the title

Adding Columns

The Add Columns section defines which fields will appear as columns and which action links will be included in the Table.

You can add fields from the primary table or from connected tables by clicking on a field or dragging it onto the Table preview.

Managing Columns

Fields

The Fields section shows all fields from the primary table that the element is displaying. Click on a field or drag it onto the Table preview to add it as a column.

Connections

The Connections section lets you add fields from connected tables to your Table.

Tables must be connected in the Data section of the Builder before these options become available.

Actions

Add action links to your Table to enable users to interact with records:

Edit record: Creates a new child page with a form to modify the record
View record details: Creates a new child page showing all details for the record
Delete record: Adds a link to delete the record with confirmation
Link to another page: Links to an existing page in your app
Trigger an action: Adds a link to perform various actions like updating records or sending emails

Editing Columns

To edit a column, hover over it in the page preview and click the pen icon.

This opens options to edit the column's properties, display rules, and design settings.

Deleting Columns

Hover over a column and click the "trash can" icon to delete it.

Be careful when deleting columns with action links, as this will also remove any child pages created by those links.

Moving Columns

To rearrange columns, click on a column header and drag it to a new position.

Notes & Troubleshooting

New fields added to your data table are not automatically added to your Table Element; you must manually add them as columns
Deleting a Table Element will also delete all child pages connected to it, unless the child page is connected to other elements

How To Guides

Tables are commonly used to:

Show records connected to the logged-in user
Display records connected to the logged-in user's company or other groups
Track customer orders
Display inventory reports
Keep track of edit logs with version control history for records

Adding Inline Editing to Tables

What You'll Learn

This article will show you how to enable and configure inline editing in Table Elements, allowing users to edit data directly within tables rather than through separate forms. You'll learn how to manage field-specific editing permissions, handle non-editable fields, optimize the inline editing workflow, and implement best practices for a smooth user experience.

Prerequisites

Before implementing inline editing, you should have:

Basic understanding of database structure
Familiarity with Table Elements
Knowledge of field types and properties
Understanding of page navigation

Implementation Steps

1. Enable Inline Editing

Navigate to Pages section
Select page containing your Table
Open Table settings
Locate Settings section
Check "Inline editing" option

2. Configure Field Behavior

Editable Fields

These field types support inline editing:

Text fields
Number fields
Date fields
Choice fields
Connection fields (with restrictions)

Managing Edit Permissions

To control which fields can be edited inline:

Hover over column header
Click edit (pen) icon
Access Column Properties
Set "Allow Inline Editing" option

Field Type Restrictions

Non-Editable Fields

The following field types cannot be edited inline:

Auto-increment fields
Formula fields
Equation fields
Text formula fields
Fields with conditional rules

Note: These restrictions are system-enforced and cannot be overridden.

User Experience

Visual Indicators

When inline editing is enabled:

Editable fields highlight on hover
Clicking activates edit mode
A pop-up editor appears for value modification
Clear save/cancel actions are provided

Interaction Flow

User hovers over editable field
Field highlights to indicate editability
Clicking activates inline editor
User makes changes in pop-up
User saves or cancels the modification

Best Practices

Design Guidelines

Maintain consistent editing behavior across your app
Provide clear visual feedback for editable fields
Consider mobile interactions when planning layout
Optimize field arrangement for editing workflow

Implementation Tips

Enable editing selectively based on user needs
Group editable fields logically
Consider workflow efficiency
Test user scenarios thoroughly

Configuration Examples

Basic Setup

Customer Information Table

Enable editing for:

Contact details
Address information
Preferences

Disable editing for:

Customer ID
Account creation date
Calculated fields

Advanced Configuration

Inventory Management

Selective editing for:

Stock levels
Product status

Automated fields:

Last update timestamp
Inventory calculations

Troubleshooting

Common Issues

Field not showing as editable
Changes not saving
Unexpected field behavior
Mobile display problems

Solutions

Verify field type compatibility
Check permission settings
Review conditional rules
Test responsive behavior

Tip: Plan your inline editing implementation based on user workflow needs rather than enabling it for all fields by default.

Table Elements: Inline Edit Filters

What You'll Learn

This article explains how to use inline edit filters in Table Elements to control which options appear in dropdown menus when users edit connection fields. You'll learn how these filters work, when to use them, and how they affect the user experience in your Live App.

Overview

Inline edit filters allow you to restrict which options appear in connection field dropdowns when users are editing records directly in a Table Element. This feature helps ensure data consistency and simplifies the user experience by showing only relevant options.

Note: If you have not yet implemented inline editing in your Table Elements or if this feature is not accessible to you, further information can be found here: Table Element Settings

Requirements for Inline Edit Filters

Inline edit filters can be applied for a column in a Table when the following conditions are met:

The corresponding field is a connection field
The connection field must exist in the Table's data source table

For inline editing and inline edit filter options to be available, both of these conditions must be satisfied.

Applying Inline Edit Filters

It is possible to apply as many filters to your connection field column as necessary.

Below is an example of a Table with the data source table of "Products" and the "Vendor" Table column is a connection field that exists within the Products data table (each Product record can connect to one Vendor record and each Vendor record can connect to many different Product records).

When you apply inline edit filters, keep in mind that these filters specifically affect the options available in the dropdown menu of a Table Element's column while inline editing the field's value in the Live App.

They do not influence selections or functionalities in any other sections of the Table Element.

Tip: If you do not see the option to apply inline edit filters, please ensure that you have selected "Yes" for the "Allow Inline Editing" setting for the column that is shown in the above image. Additionally, inline editing must be enabled in the Table Element's settings.

Example Behavior in the Live App

In the Products and Vendor example above, here is how the inline edit filter of "Address is not blank" would function in the Live App.

The vendor of "Xtreme Electronics" does not have an address included in the record, therefore, when selecting a Vendor while inline editing, "Xtreme Electronics" will not appear in the dropdown: