Refine项目教程：使用Mantine为CRUD页面添加排序和过滤功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00721/article/details/148360644

Refine项目教程：使用Mantine为CRUD页面添加排序和过滤功能

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

前言

在现代Web应用中，数据表格的排序和过滤功能是提升用户体验的关键特性。本文将详细介绍如何在Refine项目中，结合Mantine UI组件库，为CRUD页面实现强大的排序和过滤功能。

技术背景

Refine是一个基于React的企业级框架，提供了强大的数据管理能力。它内置的@refinedev/react-table包基于流行的TanStack Table（原React Table）构建，可以轻松实现复杂的数据表格功能。

实现排序功能

1. 创建排序按钮组件

首先我们需要创建一个可复用的排序按钮组件ColumnSorter：

import { ActionIcon } from "@mantine/core";
import { IconChevronDown, IconSelector, IconChevronUp } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";

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

  const sorted = column.getIsSorted();

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

这个组件实现了以下功能：

检查列是否可排序（getCanSort()）
显示当前排序状态（升序、降序或无排序）
点击时切换排序状态（getToggleSortingHandler()）

2. 在表格中集成排序功能

将ColumnSorter组件添加到表头中：

<thead>
  {getHeaderGroups().map((headerGroup) => (
    <tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <th key={header.id}>
          {!header.isPlaceholder &&
            flexRender(
              header.column.columnDef.header,
              header.getContext(),
            )}
          <ColumnSorter column={header.column} />
        </th>
      ))}
    </tr>
  ))}
</thead>

3. 控制列的排序行为

在列定义中，可以控制哪些列可排序：

{
  id: "actions",
  accessorKey: "id",
  header: "Actions",
  enableSorting: false, // 禁用此列排序
}

实现过滤功能

1. 创建过滤组件

过滤功能需要更复杂的交互，我们创建一个ColumnFilter组件：

import React, { useState } from "react";
import { TextInput, Menu, ActionIcon, Stack, Group } from "@mantine/core";
import { IconFilter, IconX, IconCheck } from "@tabler/icons";
import type { Column } from "@tanstack/react-table";

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

  // 组件实现...
};

这个组件包含以下关键功能：

点击过滤器图标打开下拉菜单
在菜单中渲染过滤输入框
提供"清除"和"应用"按钮
支持自定义过滤组件

2. 集成过滤组件到表格

将ColumnFilter添加到表头：

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

3. 配置过滤行为

在列定义中配置过滤操作符：

{
  id: "title",
  accessorKey: "title",
  header: "Title",
  meta: {
    filterOperator: "contains", // 使用包含操作符
  },
}

禁用特定列的过滤：

{
  id: "actions",
  accessorKey: "id",
  header: "Actions",
  enableColumnFilter: false, // 禁用此列过滤
}

高级用法：自定义过滤组件

如果需要更复杂的过滤UI，可以自定义过滤组件：

{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  meta: {
    filterElement: (props) => <Select 
      data={categories} 
      value={props.value} 
      onChange={props.onChange} 
    />,
  },
}