React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发_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 表单设计生成器，可拖拽生成表单》

react-table 安装和使用

首先，让我们先来创建一个 React 项目：

npx create-react-app react-table-demo

cd react-table-demo
1
2
3

然后我们安装一下 react-table：

接下来我们通过一个简单的示例，讲解如何在 React 项目中使用 react-table。

假设我们有一个订单表：

我们使用 react-table 时，需要通过一个叫做 useTable 的 hooks 来构建表格。

import { useTable } from 'react-table'
1

而 useTable 接收两个必填的参数：

1. data：表格的数据
2. columns：表格的列

所以让我们先来定义这个订单表的 data 和 columns：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

你可能会注意到这里我们使用 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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

由于是使用原生的 HTML table，因此是没有任何样式的， 这也是 react-table 的特点，好处是我们可以随意自定义我们想要的样式，比如我们引入 github-markdown-css：

npm i github-markdown-css
1

然后在项目中使用即可：

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

react-table 样式效果：

接下来我们给这个表格添加更多常见的功能：排序、搜索过滤筛选、分页等。

扩展阅读:《7 款最棒的开源 React 移动端 UI 组件库和模版框架 - 特别针对国内使用场景推荐》

React Table 表格排序功能

如果只是想设置默认排序，我们可以通过配置 initialState 来实现：

useTable({
  columns,
  data,
  initialState: {
    sortBy: [
      {
        id: 'order',
        desc: true
      }
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

如果要实现手动排序，就需要通过 useSortBy 这个 hooks 实现：

import { useTable, useSortBy } from 'react-table' 
1

然后在 useTable 中传入 useSortBy：

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable(
 {
   columns,
   data,
 },
+ useSortBy,
)
1
2
3
4
5
6
7
8
9
10
11
12
13

然后我们可以在 columns 中的某个列指定 sortType 属性，它接收 String 或 Function，对于 Function 的使用方式按下不表，而对于 String 类型，它可以接收以下三种：

1. alphanumeric：字母或数字进行排序（默认值）
2. basic：0 到 1 之间的数字排序
3. datetime：日期排序，值必须为 Date 类型

比如在我们这个例子中，我们希望可以允许对「订单编号」进行排序，那我们则修改：

const columns = useMemo(
  () => [
    {
      Header: '订单编号',
      accessor: 'order',
+     sortType: 'basic'
    },
    {
      Header: '姓名',
      accessor: 'name'
    },
    {
      Header: '收货地址',
      accessor: 'address'
    },
    {
      Header: '下单日期',
      accessor: 'date',
    }
  ],
  []
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

接着我们在表头处中添加排序相关的逻辑，并且根据当前列的排序情况分别显示对应的箭头，或者在没有任何排序时不显示：

<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 ? ' 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/140454