5. Adding Sort and Filters

In the previous Adding List Page section, we have displayed products data in a table. Now we will learn how to add sorting and filtering to the table to user can have more control over the data.

Adding Sorting

We will use <Table.Column/>'s sorter prop to add sorting to the table.

1. Open src/pages/products/list.tsx file.

2. Add sorter prop to the <Table.Column/> component of the id column.

   <Table.Column
       dataIndex="id"
       title="Id"
       sorter
   />

   Now, you can sort the data by id on the table.

3. If you want to add multiple sorting capabilities to the table, you can add sorter prop by priority. For example, if you want to sort the data by id and name on the table, you can add sorter prop as below:

   <Table.Column
       dataIndex="id"
       title="Id"
       sorter
   />
   <Table.Column
       dataIndex="id"
       title="Name"
       sorter={{ multiple: 1 }}
   />

   Now, the data will be sorted by id first and then by name.

Adding Filters

We will use <Table.Column/>'s filterDropdown prop and <FilterDropdown/> component to add filters to the table.

<FilterDropdown/> component is a wrapper component. It serves as a bridge between its child input and refine's useTable hook. It provides the necessary props to the child input and handles the logic of filtering the data. It also provides a filter and clear button to make the filtering process easier.

Refer to the <FilterDropdown/> documentation for more information →

Also, to get more information about the filterDropdown prop, you can refer to the Ant Design's <Table/> documentation.

In this tutorial, we will add filters capabilities to the category column. To do this, we will use <Select/> component from Ant Design as the child input of <FilterDropdown/> component. So, we will also use useSelect hook to get the necessary props like options for <Select/> component.

Refer to the Ant Desing <Select/> documentation for more information →

Refer to the useSelect documentation for more information →

1. Open src/pages/products/list.tsx file and import the following components and hooks like below.

   import { FilterDropdown, Select, useSelect } from "@pankod/refine-antd";

2. Call useSelect hook with categories resource to fill the <Select/> component with category options.

   const { selectProps: categorySelectProps } = useSelect({
       resource: "categories",
   });

3. Then, follow the steps below:

   1. Add filterDropdown prop to the <Table.Column/> component of the category column.
   2. Add the <FilterDropdown/> component as the return value of the prop. Then, pass the props to the <FilterDropdown/> component.
   3. Add the <Select/> component as the child of <FilterDropdown/> component. Then, pass the categorySelectProps to the <Select/> component.
      
      

   <Table.Column
       dataIndex={["category", "id"]}
       title="category"
       render={(value) => {
           if (isLoading) {
               return <TextField value="Loading..." />;
           }
   
           return (
               <TextField
                   value={
                       categoriesData?.data.find((item) => item.id === value)
                           ?.title
                   }
               />
           );
       }}
       filterDropdown={(props) => (
           <FilterDropdown {...props}>
               <Select
                   style={{ minWidth: 200 }}
                   mode="multiple"
                   placeholder="Select Category"
                   {...categorySelectProps}
               />
           </FilterDropdown>
       )}
   />

Now, you can search and filter the data by category on the table.

Checklist

I added search and filters to the table.