React 高效地表格数据显示

介绍
在普通 JSX 中生成表已经很容易了。例如，要渲染一个简单的表格，您可以编写以下代码：

import { useEffect, useState } from "react";

import "./styles.css";



export default function App() {

  return (

    <div className="App">

      <table>

        <thead>

          <tr>

            <th>Name </th>

            <th> Description </th>

          </tr>

        </thead>



        <tbody>

          <tr>

            <td>John </td>

            <td>The average developer </td>

          </tr>

        </tbody>

      </table>

    </div>

  );

}

虽然这适用于呈现数据，但请考虑一种情况，您必须从 API 显示数百条记录。 此外，在此之后，您必须编写额外的代码来对单元格进行排序和过滤。 结果，这将使您的应用程序逻辑更加复杂且难以阅读。

这就是 React Table 的用武之地。它是一个久经考验的库，通过几个简单的步骤渲染大量数据，可以使您的工作更轻松。 除此之外，它还内置了对排序、过滤和分页的支持。 这意味着您可以花更少的时间编写不必要的逻辑，而将更多时间花在实际优化或向新应用添加功能上。

项目初始化和设置
要具体化您的 React 项目，请运行以下终端命令：

npx create-react-app table-tutorial

完成后，像这样安装 react-table 库：

npm i react-table

简单渲染

在本节中，我们将使用以下数据集：

在 src 文件夹中，创建一个名为 components 的目录。在组件中，创建一个名为 BasicTable.js 的文件。

在 components/BasicTable.js 中，编写如下代码：

让我们一块一块地解构代码。

第 4 行：我们的 BasicTable 将接受两个道具，列和数据。我们将通过这些道具加载我们的数据集。

第 7-13 行：useTable 钩子包含我们显示记录所必需的一系列函数和数组。

第 14-15 行：将我们的数据集传递给 useTable 钩子。

现在让我们渲染我们的表格 UI。为此，请在 components/BasicTable.js 中添加以下代码：

尽管这段代码可能看起来令人生畏，但它还是很容易理解的。

第 3 行：使用解构传递我们的 table props。

第 5-11 行：告诉 React Table 呈现我们的标题。

第 13 行：再次使用解构将我们的 props 传递给我们的 tbody。

第 18-23 行：在本节中呈现我们的记录。

我们现在已经对表的后端进行了编码。剩下的就是在代码中复制我们的数据集。

在 App.js 中，编写以下代码块：

样式表
排序选项
全局过滤
列过滤
分页
将 React Table 与 API 结合使用

详情参阅 - 亚图跨际