Refine项目中使用useTable实现Next.js数据表格功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01111/article/details/148360044

Refine项目中使用useTable实现Next.js数据表格功能

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

前言

在现代Web应用中，数据表格是最常见的UI组件之一。Refine作为一个强大的React框架，提供了useTable钩子来简化表格功能的实现。本文将详细介绍如何在Next.js项目中利用Refine的useTable钩子构建功能完善的数据表格。

核心概念

useTable钩子

useTable是Refine提供的核心钩子之一，它封装了表格数据管理、分页、排序和筛选等常见功能。通过这个钩子，开发者可以轻松实现复杂的表格交互逻辑，而无需手动处理状态管理。

服务端渲染支持

在Next.js应用中，useTable可以与服务端渲染(SSR)完美配合。通过getServerSideProps获取初始数据，然后在客户端接管后续的交互操作，这种混合模式既能保证首屏性能，又能提供流畅的用户体验。

实现步骤

1. 配置Refine应用

首先需要在应用入口文件中配置Refine的基本设置：

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";

function App({ Component, pageProps }: AppProps) {
  return (
    <Refine
      routerProvider={routerProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "products",
          list: "/my-products",
        },
      ]}
      options={{ syncWithLocation: true }}
    >
      <Component {...pageProps} />
    </Refine>
  );
}

关键配置项说明：

routerProvider: 使用Next.js路由集成
dataProvider: 配置API数据源
resources: 定义资源路由
syncWithLocation: 将表格状态同步到URL查询参数

2. 服务端数据获取

在列表页面中，我们使用getServerSideProps获取初始数据：

export const getServerSideProps = async (context) => {
  const {
    pagination: queryPagination,
    filters: queryFilters,
    sorters: querySorters,
  } = parseTableParams(context.resolvedUrl?.split("?")[1] ?? "");

  const pagination = {
    current: queryPagination.current ?? 1,
    pageSize: queryPagination.pageSize ?? 2,
  };

  const filters = queryFilters ?? [
    {
      field: "category.id",
      operator: "eq",
      value: "1",
    },
  ];

  const sorters = querySorters ?? [{ field: "id", order: "asc" }];

  const data = await dataProvider().getList({
    resource: "products",
    filters,
    pagination,
    sorters,
  });

  return {
    props: {
      initialData: data,
      initialProps: { pagination, filters, sorters },
    },
  };
};

这里使用了parseTableParams工具函数从URL中解析表格参数，确保服务端和客户端的状态一致。

3. 客户端表格实现

在页面组件中使用useTable钩子：

const ProductListPage = (props) => {
  const {
    initialData,
    initialProps: { filters, sorters, pagination },
  } = props;

  const tableProps = useTable({
    queryOptions: { initialData },
    filters: { initial: filters },
    sorters: { initial: sorters },
    pagination,
  });

  return <ProductList tableProps={tableProps} />;
};

useTable接收以下配置：

queryOptions.initialData: 服务端获取的初始数据
filters.initial: 初始筛选条件
sorters.initial: 初始排序规则
pagination: 分页配置

4. 表格UI组件

最后实现表格的展示和交互组件：

export const ProductList: React.FC = ({ tableProps }) => {
  const {
    tableQueryResult,
    isLoading,
    current,
    setCurrent,
    pageSize,
    pageCount,
    filters,
    setFilters,
    sorters,
    setSorters,
  } = tableProps;

  // 渲染表格内容
  return (
    <div>
      {/* 表格数据展示 */}
      <table>
        {/* 表头 */}
        {/* 数据行 */}
      </table>
      
      {/* 排序控制 */}
      <button onClick={() => {
        setSorters([{
          field: "id",
          order: sorters[0]?.order === "asc" ? "desc" : "asc",
        }]);
      }}>
        Toggle Sort
      </button>
      
      {/* 筛选控制 */}
      <button onClick={() => {
        setFilters([{
          field: "category.id",
          operator: "eq",
          value: filters[0]?.value === "1" ? "2" : "1",
        }]);
      }}>
        Toggle Filter
      </button>
      
      {/* 分页控制 */}
      <button onClick={() => setCurrent(+current - 1)}>
        Previous Page
      </button>
      <button onClick={() => setCurrent(+current + 1)}>
        Next Page
      </button>
    </div>
  );
};