React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程
- react-table 安装和使用
- React Table 表格排序功能
- React Table 表格搜索过滤筛选功能
- React Table 表格分页功能
- React table 排序、搜索过滤筛选、分页示例代码
- React table 实战案例
- 模拟 API
- 构建基础 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-democd 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：
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
然后在项目中使用即可：
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 样式效果：
接下来我们给这个表格添加更多常见的功能：排序、搜索过滤筛选、分页等。
扩展阅读:《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 类型
比如在我们这个例子中，我们希望可以允许对「订单编号」进行排序，那我们则修改：
const columns = useMemo(() => [{Header: '订单编号',accessor: 'order',
+ sortType: 'basic'},{Header: '姓名',accessor: 'name'},{Header: '收货地址',accessor: 'address'},{Header: '下单日期',accessor: 'date',}],[]
)
接着我们在表头处中添加排序相关的逻辑，并且根据当前列的排序情况分别显示对应的箭头，或者在没有任何排序时不显示：
<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 ? '
React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发相关推荐
- 顶级好用的 5 款 Vue table 表格组件测评与推荐
本文首发:<顶级好用的 5 款 Vue table 表格组件测评与推荐 - 卡拉云> Vue table 表格组件作为绝大多数项目需要内嵌的组件,可谓十分重要.表格看起来虽简单,实则坑很深 ...
- bootstrapr表格父子框_JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】...
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等. ...
- Vue笔记（五）—— Vue render渲染/组件嵌套之iView官网案例改写Table表格组件及Modal弹窗/对话框/模态框组件内容自定义详解
缺乏耐心的读者请主要关注标红部分! 因部分内容自动转为代码格式,所以代码部分请主要关注注释部分! 1.Table表格组件内容自定义: 官网Table表格组件部分示例代码: columns12: [{t ...
- vue极简代码实现自定义可编辑行及操作按钮的Table表格组件（含源码及演示视频）
效果图如下: 涉及到技术点包括: 父组件给子组件传值props.动态赋值 refs 对DOM进行操作,slot具名插槽的使用,插槽通过slot-scope给父组件传值 父组件代码: <templ ...
- ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色 一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
- react 封装表格组件_GitHub - lzq741167479/react-antdTable-secondEncapsulation: antd Design 表格组件二次封装...
react 表格组件使用说明 基础使用 import ITable from '@/components/Table/index'; { "result":true, " ...
- Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
前言 element-plus@2.2.0 后提供虚拟化表格组件,解决表格数据过大导致的卡顿等性能问题.相对于表格组件,用法上区别还是挺大的,尤其是一些附加的功能,例如排序.筛选.自定义单元格/表头渲 ...
- layui表格 设置默认排序_改造 layui 表格组件实现多重排序
layui 的表格组件目前只支持单列排序,在实际应用中并不能很好的支撑我们的业务需求.今天一时手痒,决定改造一番以支持多重排序. 实现思路也比较简单,只需要用一个数组来存放所有排序的列,再把这个数组传 ...
- php中表格的美化,美化网页中的Table表格样式 - 文章教程
Table表格曾经是网页布局的霸主,可惜现在用的少了,主要还是用在表现表格结构化数据的布局,虽说用得少,但是表格用起来还是很方便的,至少有时候比DIV+CSS更方便,关于如何美化网页中的Table表格 ...
最新文章
- FPGA与ASIC：它们之间的区别以及使用哪一种？
- 数据通信技术（四：链路聚合）
- 医学图像语义分割最佳方法的全面比较：UNet和UNet++
- Zuul：构建高可用网关之多维度限流
- javascript 学习之 数组式的对象
- Mac下crontab -e没结果的解决办法
- 将GPIO外设挂到Cortex_M3 AHB总线上详细流程扩展外设步骤总结
- 20155226实验四
- Python ICMP扫描
- 《疯狂java讲义》第17章 网络编程
- 多视点视频编码快速模式选择算法综述
- 鸽笼原理 c语言,抽屉原理的三个公式,抽屉问题经典例题10道
- Oliver的救援(bfs)
- win7字体_win7系统为桌面添加自己喜欢的文字作为桌面背景，学习一下
- [049] 微信公众平台开发视频公开课第1讲-基础入门
- 机器学习系列（二）——回归模型
- Ubuntu下编译qt程序libQtWebEngineCore报错
- Java训练work3.Exer4---学生成绩
- html canvas 开发工具,基于js的html canvas工具包:cantool
- 2021年中式烹调师（初级）考试及中式烹调师（初级）模拟考试题
热门文章