Skip to main content
The Table element is a powerful tool for presenting data in a clear and organized manner within your Saasio application. It allows you to structure information in a grid of rows and columns, making it easy for your users to scan, compare, and understand the data you’re presenting.

​
How to Add a Table

To add a Table element to your page, simply drag it from the “UI Libraries” panel. You can find the Table element under the Shadcn UI section on the left-hand side of the editor.
Screenshot of a table example.

​
Managing Table Columns

You can define the structure and behavior of your table by configuring its columns. This is done in the Custom section of the right-side properties panel, using the columns property. The columns property accepts an array of objects, where each object defines a single column in your table. Here is a basic example of a columns configuration: 
[
  {
    "headerName": "Status"
  },
  {
    "headerName": "Email",
    "sortHeader": "asc"
  },
  {
    "headerName": "Amount"
  }
]

​
Column Properties Explained

Each column object follows the TtableColumn type definition and can have the following properties: 
type TtableColumn = {
  headerName: string;
  sortHeader?: "asc" | "desc";
  cell?: {
    reusableComponentName?: string;
    props?: Record<string, any>;
    formatCell?: "decimal" | "currency" | "percent";
    currency?: string;
  };
};
  • headerName (Required): A string that defines the title displayed in the column’s header (Must lowercase).
  • sortHeader (Optional): Enables sorting on this column. You can set the initial sorting direction to "asc" for ascending or "desc" for descending. When a user clicks the header, the sort order will toggle.
  • cell (Optional): An object that allows you to customize how the data within each cell of the column is rendered and formatted.

​
Customizing Cells

The cell object gives you fine-grained control over the appearance and functionality of your table cells.
  • formatCell: Automatically format numerical data.
    • "decimal": Formats the number as a decimal.
    • "currency": Formats the number as a currency value. You must also provide the currency property.
    • "percent": Displays the number as a percentage.
  • currency: When using formatCell: "currency", you must specify the currency symbol or code (e.g., “USD”, “EUR”).
  • reusableComponentName: Instead of displaying simple text, you can render a reusable component you’ve already created within a cell. Simply enter the name of your component as a string.
  • props: When using a reusableComponentName, you can pass data to it using the props object. This allows you to create dynamic and interactive cells. There are two special string values you can use within the props object to pass data from the table to your component:
    • "[current_cell]": This value is replaced with the data for the specific cell being rendered.
    • "[current_row]": This value is replaced with the entire data object for the row that the cell belongs to.
    Example: Imagine you have a reusable component called “StatusBadge” that accepts a statusText prop. You could configure your column like this: 
    {
  "headerName": "Status",
  "cell": {
    "reusableComponentName": "StatusBadge",
    "props": {
      "statusText": "[current_cell]",
      "code": 200
    }
  }
}
    In this example, for each row, the “StatusBadge” component will be rendered. The value of the status cell for that row will be passed to the component’s statusText prop.

​
Accessing Table Data

You can access various properties and data sets from your Table element to use in other parts of your application. This is useful for displaying statistics (like the total number of items), building custom external pagination controls, or performing actions on selected rows. To access this data, create a new Data Source and configure it as follows:
  1. Set the Data source type to Element Value.
  2. In the Select element dropdown, choose your table (e.g., Shadcn-table).
  3. A final dropdown will appear, allowing you to select which specific piece of data you want to access from the table.
Screenshot of a table value.

​
Available Data Properties

Here is a complete list of the data you can retrieve from a Table element. Each property can be accessed via the Element Value data source.
​
all rows
Row<any>[]
An array containing all the row data objects in the table, ignoring any filtering or pagination.
​
current page rows
Row<any>[]
An array containing the row data objects that are currently visible on the active page.
​
total number of rows
number
A number representing the total count of rows in the dataset before pagination.
​
current page index
number
The index of the current page, starting from 0.
​
current page size
number
A number indicating how many rows are displayed per page.
​
total number of pages
number
The total number of pages calculated from the total rows and the page size.
​
can next page
boolean
A boolean value that is true if a next page exists. This is useful for dynamically enabling or disabling a “Next” button.
​
can previous page
boolean
A boolean value that is true if a previous page exists. This is useful for dynamically enabling or disabling a “Previous” button.
​
selected rows
Row<any>[]
An array containing the data objects for all rows that the user has selected. This requires row selection to be enabled on the table.
​
Rows after filtering
Row<any>[]
An array of all row data objects that match the current filter criteria, ignoring pagination.

​
Table Actions

You can programmatically control the table’s state and behavior from any workflow, such as a button click or a page load event. This allows you to build custom controls for filtering, pagination, sorting, and more. To control the table, add an action to your workflow and select “Trigger Table Action”. You will then be prompted to choose the target table and the specific action you want to perform.
Screenshot of a table value.

filters for all amounts that are greater than or equal to 200.

​
Available Actions

You can programmatically control the table from any workflow. Here is a complete list of the actions you can trigger on a Table element, presented as a collapsible list.

Clear All Filters

Clears all filters currently applied to the table. Parameters: None

Reset Table

Resets the table to its initial state, clearing all filters, sorting, and column order changes. Parameters: None

Clear Column Filter

Clears the filter that has been applied to a single, specified column. Parameters: - Column (string): The headerName (lowercase) of the column to clear the filter from.

Clear Sorting

Removes all sorting applied to the table’s columns. Parameters: None

Next Page

Navigates to the next page of the table. Parameters: None

Previous Page

Navigates to the previous page of the table. Parameters: None

Reset Column Order

Resets the order of all columns back to their default state. Parameters: None

Set Column Filter

Sets or updates a filter value for a specific column. Parameters: - Column (string): The headerName (lowercase) of the column to filter. - Filter Value (any): The value to filter the column by.

Set Column Order

Moves a column to a specific position (index) in the table. Parameters:
  • Column (string): The headerName (lowercase) of the column to reorder.
  • Index (number): The new zero-based index for the column.

Set Page Index

Navigates directly to a specific page in the table. Parameters: - Page Index (number): The index of the page to navigate to (e.g., 0 for the first page).

Set Page Size

Changes the number of rows displayed on each page. Parameters: - Page Size (number): The number of rows to show per page.

Sort Column

Applies sorting to a specific column. Parameters: - Column (string): The headerName (lowercase) of the column to sort. - Descending (boolean): Set to true for descending order or false for ascending order.

Toggle Column Visibility

Shows or hides a specific column. Parameters: - Column (string): The headerName (lowercase) of the column to toggle.

​
Filtering Examples

The Set Column Filter action is versatile. The behavior of the filter depends on the Filter Value you provide. Here are some common scenarios and how to configure them.

Use Case: You have a search input field where users can type to filter a “Name” column.

Action Configuration:
  • Column: Name
  • Filter Value: Bind this to the value of your search input element.
Behavior: The table will display only the rows where the “Name” column contains the text entered in the search input. This is case-insensitive. For example, typing “john” would match “John Doe” and “Johnson”.

​
Styling the Table

You can customize the appearance of your Table element to match your application’s design using the styling options in the right-side properties panel.
To ensure that hover effects and other dynamic styles work correctly, you must set a Background Color for the main Table element itself.If the table’s base background color is not set, styles like the Row Hover Background Color may not be visible or could appear broken.