首页
/ 正文

react table（超详细）

更新时间: 2025-03-21 13:31:33

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

前言：为什么选择 React Table？

在现代 Web 开发中，表格是一个高频需求场景。无论是展示用户列表、订单数据，还是复杂的数据报表，开发者都需要一个高效且灵活的工具来实现动态表格。React Table 正是这样一个基于 React 生态的开源库，它以模块化、可扩展和高性能著称，能够帮助开发者快速构建功能丰富的数据表格。对于编程初学者而言，它提供了清晰的文档和直观的 API；而中级开发者则能通过其强大的 Hook 体系，实现高度定制化的交互逻辑。

一、React Table 的核心概念与基础用法

1.1 安装与初始化

首先，开发者需要通过 npm 或 yarn 安装 React Table：

npm install react-table

安装完成后，可以通过 useTable 这个核心 Hook 来快速创建一个基础表格。以下是一个最简示例：

import { useTable } from "react-table";

const BasicTable = ({ columns, data }) => {
  const { getTableProps, getHeaderGroupProps, getRowProps, headers } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headers.map(headerGroup => (
          <tr {...getHeaderGroupProps(headerGroup)}>
            {headerGroup.headers.map(header => (
              <th>{header.name}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {data.map(row => (
          <tr {...getRowProps(row)}>
            {row.cells.map(cell => (
              <td>{cell.value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

1.2 数据与列的配置

表格的两个核心输入是 columns（列定义）和 data（数据源）。例如：

const columns = [
  {
    Header: "姓名",
    accessor: "name", // 对应数据对象中的字段名
  },
  {
    Header: "年龄",
    accessor: "age",
    sortType: "basic", // 定义排序方式
  },
];
const data = [
  { name: "张三", age: 28 },
  { name: "李四", age: 32 },
];

这里 accessor 的作用类似于 Excel 中的单元格引用，它将列与数据对象的字段进行绑定。

1.3 表格渲染的底层逻辑

React Table 的渲染机制可以类比为“乐高积木”：useTable 返回的 headers 和 rows 是经过处理的中间数据，开发者通过 getHeaderGroupProps、getRowProps 等函数获取渲染属性。这种设计让表格的扩展性极强，后续的排序、分页等特性都可以通过组合 Hook 实现。

二、进阶功能：让表格“活”起来

2.1 排序功能的实现

排序是数据表格的刚需功能。通过 useSortBy Hook，开发者可以轻松实现列的升序/降序操作：

import { useTable, useSortBy } from "react-table";

const SortableTable = ({ columns, data }) => {
  const {
    getTableProps,
    getHeaderGroupProps,
    getRowProps,
    headers,
    state: { sortBy },
  } = useTable({ columns, data }, useSortBy);

  // 在表头添加排序图标
  return (
    <table {...getTableProps()}>
      <thead>
        {headers.map(headerGroup => (
          <tr {...getHeaderGroupProps(headerGroup)}>
            {headerGroup.headers.map(header => (
              <th>
                {header.render("Header")}
                {/* 显示排序箭头 */}
                {header.isSorted ? (header.isSortedDesc ? "▼" : "▲") : null}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      {/* 表体渲染与基础示例相同 */}
    </table>
  );
};

2.2 分页功能的实现

处理大数据量时，分页功能不可或缺。usePagination Hook 可以快速实现分页逻辑：

import { useTable, usePagination } from "react-table";

const PaginatedTable = ({ columns, data }) => {
  const {
    getTableProps,
    getHeaderGroupProps,
    getRowProps,
    prepareRow,
    page, // 当前页数据
    canPreviousPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    setPageSize,
    state: { pageIndex, pageSize },
  } = useTable(
    { columns, data },
    usePagination
  );

  // 渲染分页控件
  return (
    <div>
      <table {...getTableProps()}>
        {/* 表头与表体渲染代码 */}
        <tbody>
          {page.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div>
        <button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
          第一页
        </button>
        <button onClick={() => nextPage()}>下一页</button>
        <select
          value={pageSize}
          onChange={e => setPageSize(Number(e.target.value))}
        >
          {[10, 20, 30].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              显示 {pageSize} 条
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

2.3 过滤功能的实现

通过 useFilters Hook，开发者可以为表格添加筛选功能：

import { useTable, useFilters } from "react-table";

const FilterableTable = ({ columns, data }) => {
  const {
    getTableProps,
    getHeaderGroupProps,
    getRowProps,
    headerGroups,
    prepareRow,
    setFilter,
  } = useTable({ columns, data }, useFilters);

  // 渲染列筛选器
  return (
    <div>
      {headerGroups.map(headerGroup => (
        <div key={headerGroup.id}>
          {headerGroup.headers.map(column => (
            <div key={column.id}>
              <label>
                {column.render("Header")}
                <select
                  value={column.filterValue || ''}
                  onChange={e => setFilter(column.id, e.target.value)}
                >
                  <option value="">全部</option>
                  {column.allFilters.map((value, i) => (
                    <option key={i} value={value}>
                      {value}
                    </option>
                  ))}
                </select>
              </label>
            </div>
          ))}
        </div>
      ))}
      <table {...getTableProps()}>
        {/* 表体渲染代码 */}
      </table>
    </div>
  );
};

2.4 自定义列渲染

React Table 的列配置支持自定义渲染逻辑。例如，为年龄列添加颜色标识：

const columns = [
  {
    Header: "年龄",
    accessor: "age",
    Cell: ({ value }) => (
      <span style={{ color: value > 30 ? "red" : "green" }}>
        {value}
      </span>
    ),
  },
];

三、性能优化与最佳实践

3.1 虚拟滚动（Virtualization）

当表格数据量极大时，虚拟滚动技术可以显著提升性能。通过 react-window 库配合 React Table 实现：

import {FixedSizeTable} from 'react-window';

const VirtualizedTable = ({ columns, data }) => {
  const { rows } = useTable({ columns, data });
  return (
    <FixedSizeTable
      height={500}
      width={1200}
      rowCount={data.length}
      rowHeight={30}
      rowRenderer={({ index, style }) => {
        const row = rows[index];
        return (
          <div style={style}>
            {row.cells.map(cell => (
              <div style={{ width: '33%' }}>{cell.render('Cell')}</div>
            ))}
          </div>
        );
      }}
    />
  );
};

3.2 数据懒加载

对于大数据场景，配合 usePagination 和后端 API 实现分页加载：

// 模拟异步数据请求
const fetchData = (page, pageSize) => {
  return fetch(`api/data?page=${page}&size=${pageSize}`)
    .then(res => res.json())
    .then(data => setData(data));
};

// 在组件中使用
useEffect(() => {
  fetchData(pageIndex + 1, pageSize);
}, [pageIndex, pageSize]);

3.3 内存优化技巧

使用 memo 避免重复渲染：对自定义列组件使用 React.memo
合理设置 autoResetPage 和 autoResetSortBy 控制状态重置
对静态列数据使用 Column.getProps 减少计算量

四、完整案例：构建一个电商订单管理系统

import { useTable, useSortBy, useFilters, usePagination } from "react-table";

const OrderTable = ({ data }) => {
  const columns = [
    {
      Header: "订单号",
      accessor: "orderId",
    },
    {
      Header: "用户",
      accessor: "user",
      Cell: ({ value }) => <span>{value.username}</span>,
    },
    {
      Header: "金额",
      accessor: "amount",
      Cell: ({ value }) => <span>¥{value}</span>,
    },
    {
      Header: "状态",
      accessor: "status",
      Filter: ({ column }) => (
        <select
          onChange={e => column.setFilter(e.target.value)}
          value={column.filterValue || ''}
        >
          <option value="">全部</option>
          <option value="paid">已支付</option>
          <option value="pending">待支付</option>
        </select>
      ),
    },
  ];

  const {
    getTableProps,
    getHeaderGroupProps,
    getRowProps,
    prepareRow,
    page,
    canPreviousPage,
    pageCount,
    nextPage,
    previousPage,
    setPageSize,
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 10 },
    },
    useFilters,
    useSortBy,
    usePagination
  );

  return (
    <div>
      <table {...getTableProps()}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render('Header')}
                  {/* 显示排序图标 */}
                  {column.isSorted ? (column.isSortedDesc ? "▼" : "▲") : null}
                  {/* 渲染筛选组件 */}
                  {column.canFilter ? column.render('Filter') : null}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {page.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div>
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          上一页
        </button>
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          下一页
        </button>
        <select
          value={pageSize}
          onChange={e => {
            setPageSize(Number(e.target.value));
          }}
        >
          {[10, 20, 30].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              显示 {pageSize} 条
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

五、常见问题与解决方案

5.1 列宽不均匀的问题

解决方案：在 CSS 中设置列宽，或使用 autoResetColumnIndex 控制列顺序

5.2 排序时数据未更新

排查点：确认 useSortBy 是否被正确注入到 useTable 的 Hook 链中

5.3 自定义 Filter 不生效

解决方法：确保列配置中包含 filterable: true，并正确实现 Filter 组件

六、结论：React Table 的未来与社区生态

React Table 作为 React 生态中表格组件的事实标准，其灵活性和扩展性使其能够适应从简单列表到复杂数据看板的各类场景。随着 React 18 的 Suspense 功能逐渐成熟，未来版本可能在数据懒加载和错误边界处理上带来更优雅的解决方案。开发者社区也围绕它构建了丰富的插件生态，如 react-table-material-ui 提供 Material UI 主题支持，react-table-semantic-ui 则适配了 Semantic UI。

对于刚接触 React Table 的开发者，建议从基础功能入手，逐步尝试 Hook 的组合使用。而中级开发者则可以深入探索其底层原理，通过自定义 useTable 的 useInstance 参数实现更个性化的逻辑。掌握 React Table 不仅能提升开发效率，更能培养对 React 钩子机制的深刻理解，这对构建其他复杂组件同样具有启发意义。

随着前端框架的持续演进，React Table 也在不断迭代，但其核心设计理念——模块化、声明式和可组合——始终是开发者构建健壮数据表格的可靠基石。

react table（超详细）

前言：为什么选择 React Table？

一、React Table 的核心概念与基础用法

1.1 安装与初始化

1.2 数据与列的配置

1.3 表格渲染的底层逻辑

二、进阶功能：让表格“活”起来

2.1 排序功能的实现

2.2 分页功能的实现

2.3 过滤功能的实现

2.4 自定义列渲染

三、性能优化与最佳实践

3.1 虚拟滚动（Virtualization）

3.2 数据懒加载

3.3 内存优化技巧

四、完整案例：构建一个电商订单管理系统

五、常见问题与解决方案

5.1 列宽不均匀的问题

5.2 排序时数据未更新

5.3 自定义 Filter 不生效

六、结论：React Table 的未来与社区生态

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）