React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发本文完整版：《React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发》
在日常开发中，特别是内部使用的后台系统时，我们常常会需要用表格来展示数据，同时提供一些操作用于操作表格内的数据。简单的表格直接用原生 HTML table 就好，但如果要在 React 中实现一个功能丰富的表格，其实是非常不容易的。
在本站之前的文章《最好的 6 个 React Table 组件详细亲测推荐》 中有提到过 react-table 这个库，如果对这个库不太了解的同学可以先了解一下，这里不再赘述。
简而言之，react-table 是一个非常强大的库，它与常见的表格组件不同，它不负责渲染 HTML 和 CSS，而是提供了一系列的 hooks 让我们可以灵活地构建功能强大的表格组件。
因此使用 react-table 进行开发具有一定的难度，而本文将由浅入深地讲解如何在 React 项目中使用 react-table 实现各种常见的需求，例如：排序、分页、搜索过滤筛选等；同时还会结合一个完整的案例给大家讲解如何搭配使用 Material-UI 以及模拟从后端获取数据进行分页等功能。
如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云 ，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API，内置表格等常见的前端组件，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。
跟随本文你将学到
- 如何使用 react-table 在 React 中搭建表格组件
- 如何使用 react-table 表格组件进行数据的分页、排序、搜索过滤筛选
- react-table 实战案例：手把手教你使用 react-table 表格组件实战分页、排序、搜索过滤筛选
react-table-all-demo扩展阅读：《顶级好用的 React 表单设计生成器，可拖拽生成表单》
react-table 安装和使用
首先，让我们先来创建一个 React 项目：
代码语言：txt复制npx create-react-app react-table-demo
cd react-table-demo然后我们安装一下 react-table：
接下来我们通过一个简单的示例，讲解如何在 React 项目中使用 react-table。
假设我们有一个订单表：
订单编号 | 姓名 | 收货地址 | 下单日期 |
|---|---|---|---|
1596694478675759682 | 蒋铁柱 | 北京市海淀区西三环中路19号 | 2022-07-01 |
1448752212249399810 | 陈成功 | 湖北武汉武昌区天子家园 | 2022-06-27 |
1171859737495400477 | 宋阿美 | 湖北武汉武昌区天子家园 | 2022-06-21 |
1096242976523544343 | 张小乐 | 北京市海淀区北航南门 | 2022-06-30 |
1344783976877111376 | 马国庆 | 北京市海淀区花园桥东南 | 2022-06-12 |
1505069508845600364 | 小果 | 广州天河机场西侧停车场 | 2022-06-07 |
我们使用 react-table 时，需要通过一个叫做 useTable 的 hooks 来构建表格。
import { useTable } from 'react-table'而 useTable 接收两个必填的参数：
- data：表格的数据
- columns：表格的列
所以让我们先来定义这个订单表的 data 和 columns：
代码语言：txt复制import React, { useMemo } from 'react'
function App() {
const data = useMemo(
() => [
{
name: '蒋铁柱',
address: '北京市海淀区西三环中路19号',
date: '2022-07-01',
order: '1596694478675759682'
},
{
name: '陈成功',
address: '湖北武汉武昌区天子家园',
date: '2022-06-27',
order: '1448752212249399810'
},
{
name: '宋阿美',
address: '湖北武汉武昌区天子家园',
date: '2022-06-21',
order: '1171859737495400477'
},
{
name: '张小乐',
address: '北京市海淀区北航南门',
date: '2022-06-30',
order: '1096242976523544343'
},
{
name: '马国庆',
address: '北京市海淀区花园桥东南',
date: '2022-06-12',
order: '1344783976877111376'
},
{
name: '小果',
address: '广州天河机场西侧停车场',
date: '2022-06-07',
order: '1505069508845600364'
}
],
[]
)
const columns = useMemo(
() => [
{
Header: '订单编号',
accessor: 'order'
},
{
Header: '姓名',
accessor: 'name'
},
{
Header: '收货地址',
accessor: 'address'
},
{
Header: '下单日期',
accessor: 'date'
}
],
[]
)
return (
<div>
<h1>React Table Demo —— 卡拉云(https://kalacloud.com)</h1>
<Table columns={columns} data={data}></Table>
</div>
)
}你可能会注意到这里我们使用 useMeno 来声明数据，这是因为 react-table 文档中说明传入的 data 和 columns 必须是 memoized 的，简单来说就是可以缓存的，仅当依赖项数组里面的依赖发生变化时才会重新计算，如果对 useMemo 不熟悉的同学建议直接看 React 文档。
接着我们构建一个 Table 组件接收 columns 和 data，并传入到 useTable 中，它会返回一系列属性，我们就可以利用这些属性来构建 HTML table：
function Table({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
})
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
}由于是使用原生的 HTML table，因此是没有任何样式的， 这也是 react-table 的特点，好处是我们可以随意自定义我们想要的样式，比如我们引入 github-markdown-css：
npm i github-markdown-css然后在项目中使用即可：
代码语言：txt复制import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import './App.css'
import 'github-markdown-css'
function App() {
return (
- <div>
<div className="markdown-body" style={{ padding: '20px' }}>
<h1>React Table Demo —— 卡拉云(https://kalacloud.com)</h1>
<Table columns={columns} data={data}></Table>
</div>
)
}react-table 样式效果：
set-react-table接下来我们给这个表格添加更多常见的功能：排序、搜索过滤筛选、分页等。
扩展阅读:《7 款最棒的开源 React 移动端 UI 组件库和模版框架 - 特别针对国内使用场景推荐》
React Table 表格排序功能
如果只是想设置默认排序，我们可以通过配置 initialState 来实现：
useTable({
columns,
data,
initialState: {
sortBy: [
{
id: 'order',
desc: true
}
]
}
})如果要实现手动排序，就需要通过 useSortBy 这个 hooks 实现：
import { useTable, useSortBy } from 'react-table' 然后在 useTable 中传入 useSortBy：
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
columns,
data,
},
useSortBy,
)然后我们可以在 columns 中的某个列指定 sortType 属性，它接收 String 或 Function，对于 Function 的使用方式按下不表，而对于 String 类型，它可以接收以下三种：
- alphanumeric：字母或数字进行排序（默认值）
- basic：0 到 1 之间的数字排序
- datetime：日期排序，值必须为 Date 类型
比如在我们这个例子中，我们希望可以允许对「订单编号」进行排序，那我们则修改：
代码语言：txt复制const columns = useMemo(
() => [
{
Header: '订单编号',
accessor: 'order',
sortType: 'basic'
},
{
Header: '姓名',
accessor: 'name'
},
{
Header: '收货地址',
accessor: 'address'
},
{
Header: '下单日期',
accessor: 'date',
}
],
[]
)接着我们在表头处中添加排序相关的逻辑，并且根据当前列的排序情况分别显示对应的箭头，或者在没有任何排序时不显示：
代码语言：txt复制<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
- <th {...column.getHeaderProps()}>
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted ? (column.isSortedDesc ? '
