标签：创建 多功能 react 添加 构建 TanStack table 我们
使用 TanStack 表构建多功能表
如果您以前在 Web 应用程序上工作过，那么您可能想知道如何显示多个彼此相似的数据。 TanStack 表 （以前的 React Table，v8 之前）可以帮助您构建一个表格，帮助用户查看和编辑他们的记录。在我目前的公司中，我们的产品中有几张桌子。直到八个月前，我们还在使用 React Table v6，然后我想到了将 react-table 包更新为 v7.latest 的想法。第二天我就后悔了，但从那以后每次我都必须在表格中构建一个新功能时，我发现这是一个非常好的主意。不久前，最新版本 8 出现了，也有了新名称，我想创建一个新项目来尝试测试库的新功能，并在这里用媒体写我的第一个故事。
[
TanStack 表 | React 表、Solid 表、Svelte 表、Vue 表
TanStack Table 的 API 和引擎是高度模块化和独立于框架的，同时仍然优先考虑人体工程学。
tanstack.com
](https://tanstack.com/table/v8/?from=reactTableV7&original=https://react-table-v7.tanstack.com/)
从设置开始
让我们从创建一个带有简单表格示例的项目开始，然后我们将添加更高级的功能，如排序、分页、搜索、列大小调整、编辑页面大小和最后一列可见性。
笔记： 在我们开始之前，我已经用这个项目创建了一个存储库。
[
multifeatured-react-table,使用react-table的高级表,下载multifeatured-react-table的源码_GitHub_帮酷
一个使用 react-table 的多功能表，它支持排序、全局搜索、分页、列大小调整和…
github.com
](https://github.com/thomas-siozos/multifeatured-react-table)
在终端中运行以下命令来创建一个新应用程序，安装 tanstack/react-table 然后在本地启动服务器。
npx create-react-app 多功能反应表 cd 多功能反应表 npm install @tanstack/react-table npm 开始
但是什么是没有数据的表？我们将为我们的项目使用诸如员工数据之类的东西。对象将是这样的：
如您所见，我们的表头将是上述对象的键。我们需要大量的记录来更好地尝试这些功能。因此，创建一个包含导出数组 (MOCK_DATA) 的 mockData.js。
笔记： 生成的数据来自 莫卡罗 .
[
Mockaroo - 随机数据生成器和 API 模拟工具 | JSON / CSV / SQL / Excel
免费的测试数据生成器和 API 模拟工具 - Mockaroo 可让您创建自定义 CSV、JSON、SQL 和 Excel 数据集以...
www.mockaroo.com
我们还将在 MultifeaturedTable 组件中将列作为道具传递，这将是一个数组。
现在所有先决条件都完成了，我们终于可以创建我们的简单表了。
我们将列和数据作为道具传递给我们的 ** 多功能表** 组件，我们使用 使用备忘录 记住它们的值以获得更好的性能。该表是通过传入 ** 使用反应表** 我们的列和数据。在我们返回的 React 元素中，有一个类似于纯 HTML 的表格，其中有一些函数可以为我们完成工作：
- getHeaderGroups()
- getRowModal()
- getVisibleCells()
- 弹性渲染（）
接下来，您可以签入 localhost:3000 以查看该表。
笔记： 我在表格中添加了一些样式，您可以在 repo/css/App.css 中找到它或添加您喜欢的其他内容。
排序
我们将添加的下一个功能是排序。我们将声明一个“状态变量”排序使用 ** 使用状态** 钩。因此，我们的代码将如下所示：
sorting-snipper
我们实施了一个 ** 获取排序箭头样式（）** 函数根据排序状态决定添加哪种箭头样式。
下面是实际排序。
table-sorting
寻呼
当一个表有大量数据时，一个常见且有用的功能是分页。您可以使用延迟加载来实现它，但在这个故事中，我们将使用 TanStack 表的默认值。我们需要方法 获取PaginationRowModel 从 TanStack Table 和一些 JSX 元素中创建相应的按钮。
我们创建了 4 个按钮（'<<'、'<'、'>'、'>>'）和 1 个输入来让用户放置他们想要导航的页面。对于按钮 '<', '>' 我们使用函数 ** table.previousPage()** 和 ** table.nextPage()** (// 如果我们可以转到下一页) 分别。按钮 '<<' onClick 调用 ** table.setPageIndex(0)** 并且按钮“>>”调用 ** table.setPageIndex(table.getPageCount() — 1)** .最后，每次用户更改它调用的数字时的输入元素 ** table.setPageIndex(page)** , page 是输入的数字，如果不是数字，则为 0。
您可以在下面看到分页如何工作的示例。
table-paging
搜索
你还记得在所有这些电脑和花哨的员工出现之前，我们不得不在书中搜索的过去吗？很痛苦，对吧？幸运的是，我们能够在表格中添加搜索功能并使搜索变得更加容易。我们将使用 TanStack 表 ** onGlobalFilterChange，getFilteredRowModel** 我们将初始化一个状态变量 ** 全局过滤器** .
另外，我们添加了用于搜索的输入。
table-searching
笔记： 关心这个错误 https://github.com/TanStack/table/issues/4280 并添加数据为数字的列 ** 启用全局过滤器：假** .
列调整大小
老实说，在 Excel 中，每当单元格的内容太大时，我们都会调整列的宽度，这对于表格来说是一个很好的功能。为了添加列调整大小，需要使用 TanStack 表 ** 启用列大小调整** 和 ** columnResizeMode** .
在它末尾的 header 元素中，我们添加了一个 div，它负责调整其列的大小。随意改变 ** columnResizeMode** 从 'onChange' 到 'onEnd'，它决定了 columnSizing 状态何时更新。
table-column-resizing
页面大小
在我们的表中添加的另一个功能是能够更改页面大小，因为很多时候我们希望每页看到比默认页面大小更多或更少的记录。我们将在设置模式中添加用于选择页面大小的下拉菜单。出于这个原因，在我们开始创建下拉列表之前，我们将使用 React 的 ** 创建门户。** 创建一个 ** 模态门户.js** 它将有一个状态变量“活动”，它的位置将是“绝对的”，并将根据他的父母计算。我们的文件将如下所示：
在 MultifeaturedTable.js 文件，我们将创建 2 个参考， ** 选择父母** 和 ** 设置父** 与 React 的 ** 使用参考** 在“>>”下，我们将添加我们的 ** 模态门户** ，我们的设置模式的根和我们的下拉菜单的嵌套。另外，2个状态变量 ** 选择活动** 和 ** 设置活动** 控制模式何时打开或关闭。
笔记： 对于图标，您需要使用命令安装包
npm install react-icons — 保存。
table-page-size
列可见性
TanStack Table v8 中添加的我最喜欢的功能之一是列可见性。我必须自己在我们目前正在使用的 v7 产品中创建此功能。对于这个功能，我们将使用 TanStack Table 的 ** onColumnVisibilityChange** 和一个状态变量 ** 列可见性** .
在我们的设置模式中，我们在选择页面大小门户上方添加了一个输入，用于搜索每个标题的可用标题和复选框，以控制列的可见性。
table-column-visibility
TanStack Table 库包含更多有用的功能，可帮助您构建灵活易用的表格。我试图在这个故事中涵盖很多常见的功能。谢谢阅读！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/24450/49231008
标签：创建,多功能,react,添加,构建,TanStack,table,我们 来源： https://www.cnblogs.com/amboke/p/16675970.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。