Enabling Sorting on Antd Table

How do you set Antd sorting on a table? We are using Antd with Supabase and refine.

5 Replies

Hi @Jonathan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To enable sorting on an Ant Design (Antd) table using Supabase and refine, you can follow these steps: 1. Install necessary packages: Ensure you have the required packages installed. You need @refinedev/antd and @refinedev/core. 2. Set up the useTable hook: Use the useTable hook from @refinedev/antd to manage your table's data and sorting state. 3. Configure the sorters property: You can set the initial sorting state using the sorters.initial property. If you want the sorting state to be permanent, use the sorters.permanent property. 4. Sync sorting state with URL: Optionally, you can sync the sorting state with the URL by enabling the syncWithLocation property. 5. Define the table columns: Use the Table.Column component from Antd and set the sorter property to enable sorting on specific columns. Here is an example code snippet that demonstrates how to set up sorting on an Antd table with Supabase and refine:

import {  
  List,  
  useTable,  
  EditButton,  
  ShowButton,  
  getDefaultSortOrder,  
  FilterDropdown,  
  useSelect,  
} from "@refinedev/antd";  
import { Table, Space, Select } from "antd";  
  
import { IPost, ICategory } from "interfaces";  
  
export const PostList: React.FC = () => {  
  const { tableProps, sorter } = useTable<IPost>({  
    sorters: {  
      initial: [  
        {  
          field: "id",  
          order: "asc",  
        },  
      ],  
    },  
    meta: {  
      select: "*, categories(title)",  
    },  
  });  
  
  const { selectProps } = useSelect<ICategory>({  
    resource: "categories",  
  });  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column  
          key="id"  
          dataIndex="id"  
          title="ID"  
          sorter  
          defaultSortOrder={getDefaultSortOrder("id", sorter)}  
        />  
        <Table.Column key="title" dataIndex="title" title="Title" sorter />  
        <Table.Column  
          key="categoryId"  
          dataIndex={["categories", "title"]}  
          title="Category"  
          defaultSortOrder={getDefaultSortOrder("categories.title", sorter)}  
          filterDropdown={(props) => (  
            <FilterDropdown {...props}>  
              <Select  
                style={{ minWidth: 200 }}  
                mode="multiple"  
                placeholder="Select Category"  
                {...selectProps}  
              />  
            </FilterDropdown>  
          )}  
        />  
        <Table.Column<IPost>  
          title="Actions"  
          dataIndex="actions"  
          render={(_, record) => (  
            <Space>  
              <EditButton hideText size="small" recordItemId={record.id} />  
              <ShowButton hideText size="small" recordItemId={record.id} />  
            </Space>  
          )}
/>  
      </Table>  
    </List>  
  );  
};

import {  
  List,  
  useTable,  
  EditButton,  
  ShowButton,  
  getDefaultSortOrder,  
  FilterDropdown,  
  useSelect,  
} from "@refinedev/antd";  
import { Table, Space, Select } from "antd";  
  
import { IPost, ICategory } from "interfaces";  
  
export const PostList: React.FC = () => {  
  const { tableProps, sorter } = useTable<IPost>({  
    sorters: {  
      initial: [  
        {  
          field: "id",  
          order: "asc",  
        },  
      ],  
    },  
    meta: {  
      select: "*, categories(title)",  
    },  
  });  
  
  const { selectProps } = useSelect<ICategory>({  
    resource: "categories",  
  });  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column  
          key="id"  
          dataIndex="id"  
          title="ID"  
          sorter  
          defaultSortOrder={getDefaultSortOrder("id", sorter)}  
        />  
        <Table.Column key="title" dataIndex="title" title="Title" sorter />  
        <Table.Column  
          key="categoryId"  
          dataIndex={["categories", "title"]}  
          title="Category"  
          defaultSortOrder={getDefaultSortOrder("categories.title", sorter)}  
          filterDropdown={(props) => (  
            <FilterDropdown {...props}>  
              <Select  
                style={{ minWidth: 200 }}  
                mode="multiple"  
                placeholder="Select Category"  
                {...selectProps}  
              />  
            </FilterDropdown>  
          )}  
        />  
        <Table.Column<IPost>  
          title="Actions"  
          dataIndex="actions"  
          render={(_, record) => (  
            <Space>  
              <EditButton hideText size="small" recordItemId={record.id} />  
              <ShowButton hideText size="small" recordItemId={record.id} />  
            </Space>  
          )}
/>  
      </Table>  
    </List>  
  );  
};

In this example: - The useTable hook is used to manage the table's data and sorting state. - The sorters.initial property sets the initial sorting state to sort by the id ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@697199226802929705> kapa.ai is still learning and improving, please let us know how it did by reacting below

harsh-harlequin•2mo ago

@kapa.ai how would you add filter to the antd columns

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To add filters to Ant Design (Antd) table columns using refine, you can use the filterDropdown property from Table.Column and the FilterDropdown component from @refinedev/antd. Here is a step-by-step guide on how to do this: 1. Install necessary packages: Ensure you have the required packages installed. You need @refinedev/antd and @refinedev/core. 2. Set up the useTable hook: Use the useTable hook from @refinedev/antd to manage your table's data and filtering state. 3. Configure the filterDropdown property: Use the filterDropdown property from Table.Column to add custom filter components. 4. Use the FilterDropdown component: Wrap your filter components inside the FilterDropdown component to handle the filtering logic. Here is an example code snippet that demonstrates how to add filters to Antd table columns:

import { HttpError } from "@refinedev/core";  
import {  
  List,  
  TagField,  
  useTable,  
  FilterDropdown,  
} from "@refinedev/antd";  
import {  
  Table,  
  Radio,  
} from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  content: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column dataIndex="title" title="Title" />  
        <Table.Column dataIndex="content" title="Content" />  
        <Table.Column  
          dataIndex="status"  
          title="Status"  
          render={(value: string) => <TagField value={value} />}  
          filterDropdown={(props) => (  
            <FilterDropdown {...props}>  
              <Radio.Group>  
                <Radio value="published">Published</Radio>  
                <Radio value="draft">Draft</Radio>  
                <Radio value="rejected">Rejected</Radio>  
              </Radio.Group>  
            </FilterDropdown>  
          )}  
        />  
      </Table>  
    </List>  
  );  
};

import { HttpError } from "@refinedev/core";  
import {  
  List,  
  TagField,  
  useTable,  
  FilterDropdown,  
} from "@refinedev/antd";  
import {  
  Table,  
  Radio,  
} from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  content: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  return (  
    <List>  
      <Table {...tableProps} rowKey="id">  
        <Table.Column dataIndex="id" title="ID" />  
        <Table.Column dataIndex="title" title="Title" />  
        <Table.Column dataIndex="content" title="Content" />  
        <Table.Column  
          dataIndex="status"  
          title="Status"  
          render={(value: string) => <TagField value={value} />}  
          filterDropdown={(props) => (  
            <FilterDropdown {...props}>  
              <Radio.Group>  
                <Radio value="published">Published</Radio>  
                <Radio value="draft">Draft</Radio>  
                <Radio value="rejected">Rejected</Radio>  
              </Radio.Group>  
            </FilterDropdown>  
          )}  
        />  
      </Table>  
    </List>  
  );  
};

In this example: - The useTable hook is used to manage the table's data and filtering state. - The filterDropdown property is used to add a custom filter component to the "Status" column. - The FilterDropdown component wraps the filter options (Radio buttons in this case) to handle the filtering logic. For more details, you can refer to the useTable documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filtering) and the FilterDropdown documentation (https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#selectedkeys-setselectedkeys-confirm-clearfilters). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@697199226802929705> kapa.ai is still learning and improving, please let us know how it did by reacting below