Refine项目教程：在Chakra UI表格中添加排序和过滤功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00887/article/details/148360862

Refine项目教程：在Chakra UI表格中添加排序和过滤功能

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

前言

在现代Web应用中，数据表格的排序和过滤功能是提升用户体验的关键特性。本文将详细介绍如何在Refine项目中使用Chakra UI为表格添加这些功能。通过本教程，您将学会如何利用Refine的React Table包来实现强大的数据交互功能。

理解Refine表格的基础架构

Refine的表格功能基于Tanstack Table（原React Table）构建，提供了高度可定制化的表格解决方案。当我们在表格中实现排序和过滤时，实际上是在操作Tanstack Table的状态管理机制。

核心机制解析

状态转换：Tanstack Table的排序和过滤状态会被自动转换为Refine的CrudSorting和CrudFilter类型
数据获取：状态变化会触发useTable钩子重新获取数据
无缝集成：整个过程对开发者透明，无需手动处理数据请求

实现表格排序功能

创建排序按钮组件

首先我们需要创建一个专用的排序按钮组件，它将负责处理用户的排序交互：

import { IconButton } from "@chakra-ui/react";
import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons";
import type { Column } from "@pankod/refine-react-table";

export const ColumnSorter: React.FC<{ column: Column<any, any> }> = ({
  column,
}) => {
  if (!column.getCanSort()) {
    return null;
  }

  const sorted = column.getIsSorted();

  return (
    <IconButton
      aria-label="Sort"
      size="xs"
      onClick={column.getToggleSortingHandler()}
    >
      {!sorted && <IconSelector size={18} />}
      {sorted === "asc" && <IconChevronDown size={18} />}
      {sorted === "desc" && <IconChevronUp size={18} />}
    </IconButton>
  );
};

组件功能说明

可排序检查：通过column.getCanSort()判断列是否支持排序
状态反馈：根据当前排序状态显示不同图标
- 无排序状态：显示默认图标
- 升序排序：显示向下箭头
- 降序排序：显示向上箭头
交互处理：点击时调用column.getToggleSortingHandler()切换排序状态

集成到表格

将排序按钮添加到表头：

<Th key={header.id}>
  {!header.isPlaceholder &&
    flexRender(header.column.columnDef.header, header.getContext())}
  <ColumnSorter column={header.column} />
</Th>

禁用特定列排序

对于不需要排序的列（如操作列），可在列定义中设置：

{
  id: "actions",
  enableSorting: false
}

实现表格过滤功能

创建过滤组件

过滤功能比排序更复杂，需要处理过滤值的变化和确认操作：

import React, { useState } from "react";
import { Input, Menu, IconButton, MenuButton, MenuList } from "@pankod/refine-chakra-ui";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";

export const ColumnFilter: React.FC<{ column: Column<any, any> }> = ({
  column,
}) => {
  const [state, setState] = useState(null as null | { value: any });

  // ...其他逻辑代码

  return (
    <Menu isOpen={!!state} onClose={close}>
      <MenuButton
        onClick={open}
        as={IconButton}
        aria-label="Options"
        icon={<IconFilter size="16" />}
        variant="ghost"
        size="xs"
      />
      <MenuList p="2">
        {!!state && (
          <>
            {renderFilterElement()}
            <div>
              <IconButton onClick={clear}>清除</IconButton>
              <IconButton onClick={save}>应用</IconButton>
            </div>
          </>
        )}
      </MenuList>
    </Menu>
  );
};

组件功能说明

状态管理：使用React状态管理过滤值
交互流程：
- 点击过滤图标打开菜单
- 在输入框中输入过滤值
- 点击应用按钮确认过滤
- 点击清除按钮重置过滤
可扩展性：支持自定义过滤组件

集成到表格

与排序按钮类似，将过滤组件添加到表头：

<Th key={header.id}>
  {!header.isPlaceholder &&
    flexRender(header.column.columnDef.header, header.getContext())}
  <ColumnSorter column={header.column} />
  <ColumnFilter column={header.column} />
</Th>

配置过滤选项

设置过滤操作符：

{
  id: "title",
  meta: {
    filterOperator: "contains"
  }
}

禁用特定列过滤：

{
  id: "actions",
  enableColumnFilter: false
}

高级用法

自定义过滤组件

对于特殊的数据类型，可以定义专门的过滤组件：

{
  id: "status",
  meta: {
    filterElement: (props) => (
      <Select {...props}>
        <option value="draft">草稿</option>
        <option value="published">已发布</option>
      </Select>
    )
  }
}