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
   

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.

   

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
   

   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

   

   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.

   

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.