TanStack Table：强大的React表格组件使用指南

2025-03-11 08:30:17

TanStack_Table_Logo 在现代Web开发中，表格是数据展示和交互的重要组成部分。TanStack Table（前身为react-table）是一款功能强大且灵活的React表格库，能够帮助开发者轻松实现复杂的数据展示需求。它不仅支持排序、分页、过滤等常见功能，还提供了丰富的自定义选项和扩展能力。本文将深入探讨TanStack Table的核心特性及其实现机制，帮助技术人员更好地掌握这一工具。

安装与配置

为了让用户顺利安装和配置TanStack Table，本文将详细介绍相关步骤。首先，用户需要通过npm或yarn安装TanStack Table及其依赖项。安装完成后，用户可以在React项目中导入并使用TanStack Table。

安装TanStack Table

用户可以通过npm安装TanStack Table：

npm install @tanstack/react-table

或者通过yarn安装：

yarn add @tanstack/react-table

安装完成后，确保你的React项目已经正确配置，并引入了必要的CSS样式文件（如果需要）。

配置基础表格

以下是一个简单的基础表格配置示例，展示了如何创建一个包含列定义和数据源的表格：

import React from 'react';
import { useTable } from '@tanstack/react-table';

function BasicTable() {
  const data = React.useMemo(
    () => [
      { column1: 'Hello', column2: 'World' },
      { column1: 'React', column2: 'TanStack Table' },
      // 更多数据行
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        header: 'Column 1',
        accessorKey: 'column1',
      },
      {
        header: 'Column 2',
        accessorKey: 'column2',
      },
    ],
    []
  );

  const table = useTable({ data, columns });

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

export default BasicTable;

这段代码展示了如何使用useTable钩子创建一个基本的表格组件，并定义了列和数据源。用户可以根据实际需求调整列定义和数据源，以满足不同的应用场景。

配置排序功能

TanStack Table内置了强大的排序功能，允许用户根据某一列或多列对表格数据进行排序。以下是一个简单的排序配置示例：

import React from 'react';
import { useTable, useSortBy } from '@tanstack/react-table';

function SortableTable() {
  const data = React.useMemo(
    () => [
      { name: 'Alice', age: 25, job: 'Engineer' },
      { name: 'Bob', age: 30, job: 'Designer' },
      // 更多数据行
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        header: 'Name',
        accessorKey: 'name',
      },
      {
        header: 'Age',
        accessorKey: 'age',
      },
      {
        header: 'Job',
        accessorKey: 'job',
      },
    ],
    []
  );

  const table = useTable({ data, columns }, useSortBy);

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id} onClick={() => header.column.toggleSorting()}>
                {header.isPlaceholder ? null : (
                  <>
                    {header.renderHeader()}
                    {header.column.getIsSorted() ? (header.column.getIsSorted() === -1 ? ' ▼' : ' ▲') : ''}
                  </>
                )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>{cell.renderCell()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default SortableTable;

这段代码展示了如何使用useSortBy钩子启用排序功能，并添加了点击表头触发排序的逻辑。用户可以根据实际需求调整排序逻辑和显示方式，以提升用户体验。

配置分页功能

分页是处理大量数据时不可或缺的功能。TanStack Table提供了内置的分页支持，允许用户分页浏览表格数据。以下是一个简单的分页配置示例：

import React from 'react';
import { useTable, usePagination } from '@tanstack/react-table';

function PaginatedTable() {
  const data = React.useMemo(
    () => Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Row ${i}` })),
    []
  );

  const columns = React.useMemo(
    () => [
      {
        header: 'ID',
        accessorKey: 'id',
      },
      {
        header: 'Name',
        accessorKey: 'name',
      },
    ],
    []
  );

  const table = useTable({ data, columns }, usePagination);
  const pagination = table.getPageInfo();

  return (
    <div>
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>{header.renderHeader()}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>{cell.renderCell()}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div>
        <button onClick={() => table.setPageIndex(0)} disabled={!pagination.canPreviousPage}>
          {'<<'}
        </button>{' '}
        <button onClick={() => table.previousPage()} disabled={!pagination.canPreviousPage}>
          {'<'}
        </button>{' '}
        <button onClick={() => table.nextPage()} disabled={!pagination.canNextPage}>
          {'>'}
        </button>{' '}
        <button onClick={() => table.setPageIndex(pagination.pageCount - 1)} disabled={!pagination.canNextPage}>
          {'>>'}
        </button>{' '}
        <span>
          Page{' '}
          <strong>
            {pagination.pageIndex + 1} of {pagination.pageCount}
          </strong>{' '}
        </span>
        <span>
          | Go to page:{' '}
          <input
            type="number"
            defaultValue={pagination.pageIndex + 1}
            onChange={e => {
              const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
              table.setPageIndex(pageNumber);
            }}
            style={{ width: '100px' }}
          />
        </span>{' '}
        <select
          value={table.getState().pagination.pageSize}
          onChange={e => {
            table.setPageSize(Number(e.target.value));
          }}
        >
          {[10, 20, 30, 40, 50].map(pageSize => (
            <option key={pageSize} value={pageSize}>
              Show {pageSize}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

export default PaginatedTable;

这段代码展示了如何使用usePagination钩子启用分页功能，并添加了分页按钮和页面大小选择器。用户可以根据实际需求调整分页逻辑和显示方式，以提升用户体验。

配置过滤功能

过滤功能允许用户根据特定条件筛选表格数据，从而更方便地查找所需信息。以下是一个简单的过滤配置示例：

import React from 'react';
import { useTable, useFilters } from '@tanstack/react-table';

function FilteredTable() {
  const data = React.useMemo(
    () => [
      { name: 'Alice', age: 25, job: 'Engineer' },
      { name: 'Bob', age: 30, job: 'Designer' },
      // 更多数据行
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        header: 'Name',
        accessorKey: 'name',
        filterFn: (row, id, value) => row.getValue(id).includes(value),
      },
      {
        header: 'Age',
        accessorKey: 'age',
        filterFn: (row, id, value) => row.getValue(id) >= value,
      },
      {
        header: 'Job',
        accessorKey: 'job',
        filterFn: (row, id, value) => row.getValue(id).includes(value),
      },
    ],
    []
  );

  const table = useTable({ data, columns }, useFilters);

  return (
    <div>
      <input
        type="text"
        placeholder="Filter Name"
        onChange={e => table.getColumn('name').setFilterValue(e.target.value)}
      />
      <input
        type="number"
        placeholder="Min Age"
        onChange={e => table.getColumn('age').setFilterValue(Number(e.target.value))}
      />
      <input
        type="text"
        placeholder="Filter Job"
        onChange={e => table.getColumn('job').setFilterValue(e.target.value)}
      />
      <table>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id}>{header.renderHeader()}</th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map(row => (
            <tr key={row.id}>
              {row.getVisibleCells().map(cell => (
                <td key={cell.id}>{cell.renderCell()}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default FilteredTable;

这段代码展示了如何使用useFilters钩子启用过滤功能，并添加了输入框用于设置过滤条件。用户可以根据实际需求调整过滤逻辑和显示方式，以提升用户体验。

核心功能详解

TanStack Table具备丰富的核心功能，涵盖了基础表格、排序、分页和过滤等多个方面。这些功能不仅提升了系统的性能，还为用户提供了更多选择。

基础表格

基础表格是TanStack Table的核心功能之一。它允许用户通过简洁的API接口快速创建表格组件，并定义列和数据源。用户可以根据实际需求调整列定义和数据源，以满足不同的应用场景。

排序功能

排序功能是TanStack Table的重要组成部分。它允许用户根据某一列或多列对表格数据进行排序，并提供了详细的排序状态反馈。用户可以根据实际需求调整排序逻辑和显示方式，以提升用户体验。

分页功能

分页功能是处理大量数据时不可或缺的功能。TanStack Table提供了内置的分页支持，允许用户分页浏览表格数据。用户可以根据实际需求调整分页逻辑和显示方式，以提升用户体验。

过滤功能

过滤功能允许用户根据特定条件筛选表格数据，从而更方便地查找所需信息。用户可以根据实际需求调整过滤逻辑和显示方式，以提升用户体验。

总结

综上所述，TanStack Table凭借其强大的功能和灵活的设计，在数据展示领域展现出了卓越的表现。从基础表格到排序、分页和过滤，每一个环节都体现了TanStack Table的技术优势。对于致力于提升Web应用数据展示效果和技术人员来说，TanStack Table无疑是一个值得信赖的选择。

TanStack
TanStack/table
用于构建强大表格和数据网格的TS/JS无头UI - React-Table、Vue-Table、Solid-Table、Svelte-Table
TypeScript
MIT
26.0 k