使用 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

](https://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