How can I set default sorter and filters on antd table components?

When using the Table component from Ant Design (antd), configuring default sorters and filters enables users to understand the data more intuitively and quickly locate the information they are interested in. Below are the steps to set default sorters and filters:

Default Sorter

To set a default sorter on the Ant Design (antd) Table component, use the sortOrder property in the column configuration. Additionally, define the sorter function to specify the sorting logic. Here is an example:

jsx
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    sortOrder: 'ascend' // Set default sorting to ascending order
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
  }
];

const data = [
  { key: 1, name: 'Zhang San', age: 32 },
  { key: 2, name: 'Li Si', age: 42 },
];

const MyTable = () => <Table columns={columns} dataSource={data} />;

In this example, the 'Name' column is configured to sort in ascending order by default. When the table is rendered, the data will be automatically sorted alphabetically by name.

Default Filter

For filters, define filter options using the filters property in the column configuration and specify the default filter value using the defaultFilteredValue property. Here is an example:

jsx
import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Job',
    dataIndex: 'job',
    key: 'job',
    filters: [
      { text: 'Engineer', value: 'engineer' },
      { text: 'Designer', value: 'designer' },
    ],
    onFilter: (value, record) => record.job.includes(value),
    defaultFilteredValue: ['engineer'] // Default to show only engineers
  }
];

const data = [
  { key: 1, name: 'Zhang San', job: 'Engineer' },
  { key: 2, name: 'Li Si', job: 'Designer' },
];

const MyTable = () => <Table columns={columns} dataSource={data} />;

In this example, the 'Job' column is added with filters, and only records with the job 'Engineer' are displayed by default.

By configuring default sorters and filters, you can enhance user experience and present data more intuitively and organized. This approach is particularly effective for large datasets, as it quickly highlights the most relevant information to users.