Table Block
The features of the Table block.
The Table block presents a collection of records, such as tasks, products, or contacts, in a structured table layout. This format is particularly effective for displaying data with multiple fields, allowing users to efficiently compare, sort, and manage large sets of information efficiently. Each record is organized into rows, while columns represent fields like name, date, tag, or status. Tables are interactive, supporting the sorting and filtering of data.
Use case examples
-
Client Profiles: Display detailed customer information, including name, company, contact details, last interaction date, and associated account manager. Enable filtering by account status (active, inactive, etc.).
-
Invoice Management: Provide clients with a table of invoices showing invoice numbers, issue dates, due dates, amounts, and payment statuses. Clients can sort by due date or filter unpaid invoices.
Configure a Table block
Source
The Source panel connects the list block to your data source. Here, you can:
-
Connect the list block to yourdata source.
-
Set upconditional filters to display only the data that meets specific criteria.
-
Define sorting rules and set the number of items to display per page.
-
Customize the empty state message that appears when no data matches the requirements.
Once you connect to your source data, you can configure Content, Actions, and block Visibility settings.
Content
In the Content tab, customize fields in your table block, adjust their display, and add features like search and filters to help users find information quickly.
Item fields
Item Fields lets you connect fields from your data source to each list item, making it easy to display the information you need. You can control what information appears by adding, removing, or rearranging fields such as task names, assignees, or descriptions.
For each field in the Item Fields section of the secondary section, you can customize the following options:
-
Type: Defines the display field type that controls how content appears in the block (e.g., text, checkbox, or image).
-
Content: Chooses the specific data field from connected data sources to display.
-
Label (Optional): Adds context to the field. If left blank, the label will not be visible to users.
Supported field types
| Display Field | Description |
| Text | Displays plain text. Ideal for names, titles, or short descriptions. |
| Rich Text | Supports long text, markdown, or HTML formatting. Allows for more detailed descriptions or notes. |
| Displays email addresses as clickable mailto links, allowing users to start an email directly. | |
| URL | Displays website links as clickable URLs, allowing users to navigate to external pages. |
| Tag | Allows you to display one or more tags, helpful for organizing items by category or status. |
| File | Provides a link for users to download attachments, such as PDFs or other documents. |
| Video | Embed video content from a supported source, allowing users to watch content directly in the block. |
| Image | Displays a single image, useful for things like profile pictures or product images. |
| Image gallery | Displays multiple images in a gallery format, useful for showcasing a collection of visuals. |
| Embed | Allows you to embed content from other services, such as YouTube videos, Calendly, or social media posts. |
| Rating | Displays a rating system, typically with stars, to visually represent ratings or scores. |
| Checkbox | Shows a checkbox, useful for indicating completed items or allowing users to mark items as done. |
Inline Editing
You can enable inline editing for fields within the Table block, allowing users to update data directly in the table—no extra action buttons required.
How to Set Up Inline Editing
-
Identify which fields should be editable directly in the table.
-
In the individual field settings, toggle the Allow editing option to enable editing.
- Configure how users interact with editable cells:
- Input Field Type – Choose the input type users will see (e.g., short text, long text) and configure any additional options based on the selected type.
- Placeholder – Provide guidance for empty fields; this placeholder appears when users click to edit a cell.
👉 Preview the table to see the user experience—just double-click a cell, edit the content, and press Enter to save.
Search bar
The Search Bar allows users to search through items in your block, making it easier to find specific entries quickly.
You can configure which parameters you want the search to be performed by adding fields to Search by input. For instance, if you’re displaying a list of employees, you might select “Name,” “Department,” and “Job title” as searchable fields.
Actions
Actions let you define what happens when users interact with a block, such as navigating to a new page, editing records, or triggering workflows. This ensures your app not only displays data but also offers dynamic user engagement.
Topbar buttons
-
Add record: Create new entries in your data.
-
Open page: Navigate to another page within your app.
-
Open URL: Redirect users to an external link.
-
Scroll to: Move the view to a specific section within the block.
-
Export:Export visible records.
Item buttons
-
Edit record: Modify the details of a specific record.
-
One-Click Update: Apply predefined updates to a record with a single click.
-
Open details page: Open the details page of the selected record.
-
Delete Record: Remove a record from your data.
-
Open URL: Redirect users to an external link.
-
Download file: Provide users with a direct option to download associated files.
-
Call API: This action triggers a custom API call for advanced integrations (available for Professional, Business, and Enterprise plans).
Visibility
Control who can see a block by setting up visibility rules. This helps tailor the user experience by showing relevant content to the right audience, improving personalization and security.
Style
Customize the look and feel of your blocks with styling options. Adjust fonts, colors, spacing, and more to align with your app’s branding and create a polished, professional design.
