TanStack Table 分组功能深度解析：从基础使用到高级定制

分组功能概述

在现代前端开发中，数据表格是展示复杂数据的重要组件。TanStack Table（原React Table）作为一款功能强大的表格库，其分组功能允许开发者按照特定列对数据进行逻辑分组，从而提升数据可读性和用户体验。

分组的基本原理

TanStack Table的分组功能基于三个核心概念：

1. 分组状态：决定哪些列参与分组以及分组顺序
2. 分组行模型：负责将原始数据转换为分组结构
3. 展开/折叠功能：允许用户交互式地查看或隐藏分组详情

这三个概念协同工作，共同构成了完整的分组体验。

分组实现步骤详解

1. 基础分组配置

要启用分组功能，首先需要设置分组行模型：

import { getGroupedRowModel } from '@tanstack/react-table'

const table = useReactTable({
  getGroupedRowModel: getGroupedRowModel(),
  // 其他配置...
})

2. 结合展开功能

为了允许用户展开/折叠分组，需要同时配置展开行模型：

import { getGroupedRowModel, getExpandedRowModel } from '@tanstack/react-table'

const table = useReactTable({
  getGroupedRowModel: getGroupedRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  // 其他配置...
})

3. 控制分组状态

分组状态是一个字符串数组，每个字符串代表要分组的列ID：

// 设置分组状态
table.setGrouping(['department', 'position']);

// 重置分组状态
table.resetGrouping();

分组列的处理方式

TanStack Table提供了三种处理分组列的模式：

1. 重新排序模式（'reorder'）：将分组列移动到表格开头（默认）
2. 移除模式（'remove'）：从表格中移除分组列
3. 保持原样（false）：不改变分组列的位置

配置示例：

const table = useReactTable({
  groupedColumnMode: 'reorder',
  // 其他配置...
})

数据聚合功能详解

分组后，通常需要对子行数据进行聚合计算。TanStack Table提供了丰富的内置聚合函数：

内置聚合函数

函数名称	功能描述
sum	计算数值总和
count	计算行数
min	找出最小值
max	找出最大值
extent	找出范围（最小和最大值）
mean	计算平均值
median	计算中位数
unique	返回唯一值数组
uniqueCount	计算唯一值数量

列级别的聚合配置

const column = columnHelper.accessor('salary', {
  aggregationFn: 'sum'  // 使用sum聚合函数
})

自定义聚合函数

开发者可以创建自己的聚合逻辑：

const table = useReactTable({
  aggregationFns: {
    averageAge: (columnId, leafRows, childRows) => {
      const total = leafRows.reduce((sum, row) => {
        return sum + row.getValue(columnId)
      }, 0)
      return total / leafRows.length
    }
  }
})

// 在列中使用自定义聚合函数
const column = columnHelper.accessor('age', {
  aggregationFn: 'averageAge'
})

高级主题：服务端分组

对于大数据量场景，可以在服务端完成分组：

const table = useReactTable({
  manualGrouping: true,  // 启用手动分组
  // 其他配置...
})

注意：服务端分组需要开发者自行处理数据转换和单元格渲染逻辑。

状态管理最佳实践

对于需要精细控制分组状态的场景，可以使用受控模式：

const [grouping, setGrouping] = useState([])

const table = useReactTable({
  state: {
    grouping: grouping,
  },
  onGroupingChange: setGrouping,
  // 其他配置...
})

性能优化建议

1. 对于大型数据集，考虑使用服务端分组
2. 合理使用memoization减少不必要的重新计算
3. 避免在渲染过程中进行复杂的数据转换
4. 对于静态数据，考虑预分组处理

常见问题解答

Q：分组后如何保持某些列的可见性？ A：使用groupedColumnMode: 'reorder'模式而不是'remove'模式

Q：能否实现多级分组？ A：可以，只需在分组状态数组中按顺序指定多个列ID

Q：分组后如何自定义分组行的显示？ A：可以通过自定义单元格渲染器来美化分组行的显示

通过本文的详细介绍，相信您已经对TanStack Table的分组功能有了全面了解。合理使用分组功能可以显著提升数据表格的可用性和用户体验。