react-ant-design-component-table-5

介绍

大家好，今天我们继续讲解Ant Design中的Table组件，排序和搜索是数据表格中非常常见的功能，今天我们来看看如何为Table组件添加这两个功能。

在阅读本篇之前，还是建议先阅读前面的几篇文章，了解Table组件的基本用法。

// 插入前面几篇内容

为Table组件添加排序功能

排序功能的添加非常简单，只需要在列的定义中添加sorter属性即可。我们以用户ID列为例，给它添加一个排序功能。sorter属性对应一个排序函数，这个函数接受两个参数，分别是要比较的两行数据，返回值为负数表示前者小于后者，返回值为正数表示前者大于后者，返回值为0表示两者相等。

比如下面的代码按照用户ID升序排列

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    sorter: (a: User, b: User) => a.id - b.id,
  },
  // ...
];

排序的方式取决于a.id - b.id的结果：

如果为负数，表示a的ID小于b的ID，a会排在b前面；
如果为正数，表示a的ID大于b的ID，a会排在b后面；
如果为0，表示两者相等，顺序不变。

设置好排序之后，表头对应的字段右侧会出现两个小箭头，点击上面的箭头表示升序排列，点击下面的箭头表示降序排列。

降序排列

如果要按照用户ID降序排列，只需要把a.id - b.id改成b.id - a.id即可。

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    sorter: (a: User, b: User) => b.id - a.id,
  },
  // ...
];

默认的排序顺序

如果要设置默认的排序顺序，可以使用defaultSortOrder属性。这个属性可以设置为'ascend'表示升序，或者'descend'表示降序。

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    sorter: (a: User, b: User) => a.id - b.id,
    defaultSortOrder: 'descend', // 默认降序排列
  },
  // ...
];

为Table组件添加搜索功能

搜索功能是通过在列定义中添加filter属性来实现的。我们以用户姓名列为例，给它添加一个搜索功能。filter属性对应一个过滤函数，这个函数接受一个参数，表示要过滤的行数据，返回值为true表示保留该行数据，返回值为false表示过滤掉该行数据。

比如下面的代码按照用户姓名进行搜索

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    filters: names,
    onFilter: (value: string, record: User) => record.name.includes(value),
  },
  // ...
];

可以看到，我们给姓名列添加了filters属性，这个属性是一个数组，表示所有可能的过滤值 - 当我们点击过滤按钮时，弹出的下拉框会显示这些过滤值供用户选择，我们可以从用户数据中提取出所有的姓名作为过滤值。

const [names, setNames] = useState<{ text: string; value: string }[]>([]);

const getUsers = async (pageNumber: number, pageSize?: number) => {
    try {
      setLoading(true);
      const res = await fetchUsers(pageNumber, pageSize);
      setTableData(res.data);
      setTotal(res.total);
      setNames(res.data.map((user) => ({ text: user.name, value: user.name }))); // 设置names
    } catch (error) {
      console.error('Error fetching users:', error);
    } finally {
      setLoading(false);
    }
  };

filters对应的值是一个对象数组，每个对象包含text和value两个属性，分别表示过滤值的显示文本和实际值。

下面在来看看onFilter属性，这个属性是一个函数，接受两个参数，第一个参数是过滤值，第二个参数是要过滤的行数据。这个函数返回true表示保留该行数据，返回false表示过滤掉该行数据。- 也就是说onFilter函数是用来完成过滤操作的。

它的实现很简单，只要行数据包含对应的过滤值，我们就保留这一行。

1	onFilter: (value: string, record: User) => record.name.includes(value),

现在让我们运行程序，一起看看效果吧，如下图。

今天就到这里了，我们明天再见！