Refine项目教程：在Ant Design表格中添加排序与筛选功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00681/article/details/148360618

Refine项目教程：在Ant Design表格中添加排序与筛选功能

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。项目地址: https://gitcode.com/gh_mirrors/re/refine

前言

在Web应用开发中，数据表格是展示和管理信息的重要组件。Refine框架结合Ant Design提供了强大的表格功能，本文将详细介绍如何在表格中添加排序和筛选功能，以提升用户体验和数据操作效率。

准备工作

在开始之前，请确保：

已经创建了基本的博客文章列表页面
安装了必要的依赖包
熟悉基本的React和Ant Design组件使用

添加排序功能

基础排序实现

Refine与Ant Design的Table组件深度集成，使得添加排序功能变得非常简单。我们只需要在表格列的配置中添加sorter属性即可：

<Table.Column
  dataIndex="id"
  title="ID"
  sorter  // 启用排序功能
/>

这样处理后，表格的ID列就会出现可点击的排序图标，用户可以按升序或降序排列数据。

多列排序进阶

在实际应用中，我们经常需要支持多列组合排序。Ant Design通过multiple属性支持这一功能：

<Table.Column
  dataIndex="id"
  title="ID"
  sorter  // 主排序字段
/>
<Table.Column
  dataIndex="title"
  title="文章标题"
  sorter={{ multiple: 1 }}  // 次级排序字段
/>

当用户先点击标题排序，再按住Shift键点击ID排序时，数据会先按标题排序，标题相同的再按ID排序。

添加筛选功能

筛选功能概述

筛选功能比排序稍复杂，需要以下几个组件协同工作：

filterDropdown - 定义筛选下拉框的内容
FilterDropdown - Refine提供的桥接组件
useSelect - 获取筛选选项的Hook

实现步骤

1. 导入必要组件

import { FilterDropdown, useSelect } from "@refinedev/antd";
import { Select } from "antd";

2. 获取筛选选项

使用useSelect Hook获取分类数据作为筛选选项：

const { selectProps: categorySelectProps } = useSelect({
  resource: "categories",  // 指定资源类型
});

3. 配置筛选列

在表格列配置中添加完整的筛选功能：

<Table.Column
  dataIndex={["category", "id"]}
  title="分类"
  render={(value) => {
    if (isLoading) return <TextField value="加载中..." />;
    return <TextField value={categoriesData?.data.find((item) => item.id === value)?.title} />;
  }}
  filterDropdown={(props) => (
    <FilterDropdown {...props}>
      <Select 
        style={{ minWidth: 200 }} 
        mode="multiple" 
        placeholder="选择分类" 
        {...categorySelectProps} 
      />
    </FilterDropdown>
  )}
/>