Skip to main content
Version: 3.1.0-Beta 🚧

Sort Operation

This guide explains how to perform serverside sort operation on a Table component in ToolJet.

Add Table Component​

Before performing the sort operation, lets setup the Table component and populate it with the data:

  1. Drag a Table component from right component library to the canvas.

  2. Select the data source and create a new query from the query panel at the bottom. (Refer to data source docs for more details)
    We are going to use ToolJet’s Sample data source (Postgres) in this guide.
    Add the following query to fetch the data from database:

    SELECT * FROM public.sample_data_orders
    LIMIT 100
    Fetch data from the data source

  3. Set the value of the Data property of the Table to {{queries.<query_name>.data}} to populate the Table with relevant data.

Serverside Sort​

Follow the following steps to perform server side sort operation on Table:

  1. Enable Server Side Sort under the Table properties.

    Fetch data from the data source

  2. Edit the query, as follow:

    SELECT * 
    FROM public.sample_data_orders 
    {{components.table1.sortApplied ? `
        ORDER BY ${components.table1.sortApplied[0].column} 
        ${components.table1.sortApplied[0].direction}
    ` : ""}} 
    LIMIT 100
    Fetch data from the data source

    Note: Make sure to replace table1 with your Table name.

  3. Add Event Handler in Table:
    Event: Sort applied
    Action: Run Query
    Query: Select Your Query

    Fetch data from the data source

    This will run the query and fetch the data every time a sort is applied.

  4. Add Loading State, navigate to the Table properties under Additional Actions. Click on the fx icon next to Loading State and enter {{queries.getOrders.isLoading}} in the field.

    Note: Make sure to replace getOrders with your query name.

    Fetch data from the data source

This is how serverside sort operation is implemented in ToolJet's Table component. When sorting is applied to a column in the Table, the query is executed on the server, enabling sorting across the entire dataset. This ensures that the sorting is not limited to the data loaded into the Table but covers all records in the database.