Skip to main content

Setup Server-side Filter on Table

This page shows you how to set up server-side filtering on a Table widget, which allows you to refine query results based on specific criteria.

Server-side filtering involves using a value to narrow down the results of a query in a similar way to server-side searching. However, instead of searching for a specific term, the selected value is used to filter out unwanted data from the requested dataset.

Server-side Filtering on Table
Server-side Filtering on Table

Prerequisites​

  • A Table widget connected to a query.
  • A widget for applying filters, such as a Select, Checkbox, or Sliders. For this guide, lets use the Select widget as an example.

Configure query​

To implement server-side filtering, you can use widgets such as Select, Checkbox, Sliders, and other similar widgets that allow users to select from a variety of available filters.

Example: If you want to filter table data based on specific criteria, such as gender, you can use a Select widget with the required option.

Configure the query to fetch data using selectedOptionValue reference properties:

  • For PostgreSQL, you can configure the query as follows:

    SELECT * FROM users WHERE gender = {{Select1.selectedOptionValue}};

  • For the REST API, configure the query parameter as shown in the URL:

    https://mock-api.appsmith.com/users?gender={{Select1.selectedOptionValue}}

Configure Select widget​

Follow these steps to configure the Select widget to display data, and implement server-side filtering:

  • Set the Select widget's onOptionChange event to execute the filter query. Make sure that the filter query is connected to the Table widget.

After completing these steps, you can use the Select widget to filter data and display the filtered results in the Table widget.

Check out this sample app for Server Side Filtering.