5. Adding Sort and Filters

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

1. Open src/pages/blog-posts/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.

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/blog-posts/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.