如何在antd表组件上设置默认排序器和过滤器？

在使用Ant Design (antd) 的表格组件（Table）时，设置默认的排序器和过滤器可以帮助用户更直观地理解数据，并快速找到他们感兴趣的信息。以下是如何设置默认排序器和过滤器的步骤：

默认排序器

要在antd的Table组件上设置默认排序器，你需要在相应的列配置中使用sortOrder属性。你还需要指定sorter函数来定义如何排序数据。这里是一个例子：

jsx
import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    sortOrder: 'ascend' // 设置默认排序为升序
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    sorter: (a, b) => a.age - b.age,
  }
];

const data = [
  { key: 1, name: '张三', age: 32 },
  { key: 2, name: '李四', age: 42 },
];

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

在这个例子中，姓名列被设置成默认按升序排序。当表格被渲染时，数据会按照姓名的字母顺序自动排序。

默认过滤器

对于过滤器，你可以在列配置中使用filters属性来定义过滤选项，并通过defaultFilteredValue属性来指定默认的过滤值。下面是一个示例：

jsx
import { Table } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '职业',
    dataIndex: 'job',
    key: 'job',
    filters: [
      { text: '工程师', value: 'engineer' },
      { text: '设计师', value: 'designer' },
    ],
    onFilter: (value, record) => record.job.includes(value),
    defaultFilteredValue: ['engineer'] // 默认只显示工程师
  }
];

const data = [
  { key: 1, name: '张三', job: '工程师' },
  { key: 2, name: '李四', job: '设计师' },
];

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

在这个例子中，职业列被添加了过滤器，并且默认只显示职业为“工程师”的记录。

通过这样设置，默认排序器和过滤器不仅能改善用户体验，还能使数据展示更加直观和有序。这在处理大量数据时尤其有效，能够迅速给用户展示他们最关心的数据部分。