TanStack 表解释：您需要了解的一切

介绍

在现代 Web 开发领域，有效且高效地显示数据是一个常见的挑战。无论是简单的用户列表还是复杂的财务报告，表格都是必不可少的。虽然有许多库可用于处理 React 中的表，但很少有库能够提供 TanStack Table 所具有的灵活性、性能和易用性。

TanStack Table（以前称为 React Table）已迅速成为需要强大且可定制的表格组件的开发人员的首选解决方案。 TanStack 不仅兼容 React，还支持 Angular、Lit、Qwik、Solid、Svelte、Vue 以及 Vanilla JavaScript/TypeScript。

在这篇博文中，我们将深入探讨 TanStack Table 的脱颖而出之处，探索其核心功能，并提供一个实践示例来帮助您入门。

什么是 TanStack 表？

TanStack Table 是一个轻量级、高度可定制的无头 UI，用于构建强大的表和数据网格。通过“无头”，我们的意思是它具有表操作的所有核心功能和逻辑，而无需任何用户界面。这使我们可以完全控制表格的外观，同时还可以利用内置功能。

为什么选择 TanStack 表？

为您的项目选择表库可能会令人困惑，因为网上有很多选项。这就是为什么 TanStack Table 可能最适合您的下一个项目：

1.

性能

当我们的数据集很大时，有效管理就变得至关重要，因为我们还必须考虑性能。 TanStack 使用虚拟化和 Tree Shaking 等功能来优化性能。它还优化了渲染，确保即使有数万行也能流畅。

Tree shake 是最终 javascript 捆绑期间的优化过程，它会从捆绑中删除所有死代码或未使用的代码。

虚拟化或窗口化是一种通过仅渲染当前视图中的项目来提高性能的技术。

2、适应性

TanStack 表支持无头架构，这使我们能够摆脱任何内置 UI。其高度可定制性使我们能够将其与任何 CSS 框架或主题集成。当几乎每个项目都需要更改设计时，这种灵活性非常方便。

3. 高级

功能

TanStack Table 支持广泛的功能列表，例如：

• 使用可自定义的排序功能进行排序。

• 内置过滤器或自定义过滤器逻辑。

• 隐藏或取消隐藏任何列。

• 内置分页逻辑。

• 按任意条件对行进行分组。

• 动态调整列大小。

• 选择带有复选框或其他 UI 元素的行。

4. 活跃的社区和支持

TanStack Table 得到了积极维护并得到了优秀社区的支持。文档准确且易于理解。

使用 TanStack Table 时的主要挑战

虽然 TanStack Table 提供了许多优点，但它也有一些缺点。

• 根据数据长度管理列宽。

• 使表格响应所有屏幕尺寸。

• 使用 TanStack 表调试自定义构建表

• 全面的文档可能会导致很难快速找到答案。

• 学习曲线很陡。

TanStack 表入门

让我们从一个简单的例子开始。我们将使用 TanStack Table 创建一个基本表。

第 1 步：安装 TanStack 表

首先，让我们安装 TanStack Table 及其对等依赖项。

npm install @tanstack/react-table

第 2 步：摆好桌子

我们将从设置表格组件开始。对于此示例，我们将使用一个简单的用户数据集。

import * as React from 'react';
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from '@tanstack/react-table';

export type User = {
  id: number;
  name: string;
  age: number;
  email: string;
  country: string;
  subscription: string;
  wallet_balance: number;
};

export const users: User[] = [
  {
    id: 1,
    name: 'John Doe',
    age: 35,
    email: 'john.doe@example.com',
    country: 'United States',
    subscription: 'Premium',
    wallet_balance: 150.25,
  },
  {
    id: 2,
    name: 'Alice Smith',
    age: 28,
    email: 'alice.smith@example.com',
    country: 'Canada',
    subscription: 'Basic',
    wallet_balance: 50.75,
  }
];

const columnHelper = createColumnHelper<User>();

const columns = [
  columnHelper.accessor('name', {
    header: () => 'Name',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('age', {
    header: () => 'Age',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('email', {
    header: () => 'Email',
    cell: (info) => info.getValue(),
  }),
  columnHelper.accessor('country', {
    header: () => 'Country',
  }),
  columnHelper.accessor('subscription', {
    header: 'Subscription',
  }),
  columnHelper.accessor('wallet_balance', {
    header: 'Wallet balance',
  }),
];

const Table = () => {
  const [data, _setData] = React.useState([...users]);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
      <table>
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
  );
};

export default Table;

在上面的代码中，我们有用户数据来填充表。我们使用 createColumnHelper 函数来创建 columnHelper，然后用于定义列数组。这些列决定数据在表中的显示方式。它根据我们提供的标题创建列。在本例中，它是“姓名”、“年龄”、“电子邮件”等。我们可以通过提供 cell 属性来自定义单元格渲染行为。如果未提供，则表示将使用默认的 cell 渲染行为。

useReactTable 钩子用于设置具有数据和列配置的表组件。此配置决定数据在表中的呈现方式。我们使用 table.getHeaderGroups() 和 table.getRowModel().rows 来生成表的标题和正文。

经过一些样式设置后，表格将如下图所示：

第 3 步：相应定制

您现在可以开始根据您的需求自定义表格。您可以添加搜索、排序、分页或任何其他功能。 TanStack 提供了添加所有这些功能的钩子和便利性。您可以参考他们的官方文档这里。

结论

TanStack 的桌子可能是您下一张桌子的绝佳选择。其无头 UI 使设计集成变得毫不费力，其丰富的功能集使创建分页、排序、过滤和其他功能变得简单。为了进一步清晰起见，请浏览文档中的其他示例。

编码愉快！

资源

• TanStack 表文档

---

我们CreoWis相信公开分享知识可以帮助开发者社区成长。让我们充满激情地协作、构思和打造，以提供令人惊叹的产品体验。

让我们联系：

• X/Twitter

• 领英

• 网站

本文由 CreoWis 的一位充满热情的开发人员 Prachi Sahu 撰写。您可以在 X/Twitter、LinkedIn、 上联系她，并在 GitHub 上关注她的工作。

以上是TanStack 表解释：您需要了解的一切的详细内容。更多信息请关注PHP中文网其他相关文章！