TanStack Table 分组功能深度解析：从基础使用到高级定制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01171/article/details/148360952

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

table TanStack/table: TanStack Table (原名 React Table) 是一个灵活且高性能的表格组件库，用于构建复杂数据表视图，适用于React环境，具有高度可配置性和优化的性能表现。项目地址: https://gitcode.com/gh_mirrors/ta/table

分组功能概述

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

分组的基本原理

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

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

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

分组实现步骤详解

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提供了三种处理分组列的模式：

重新排序模式（'reorder'）：将分组列移动到表格开头（默认）
移除模式（'remove'）：从表格中移除分组列
保持原样（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,
  // 其他配置...
})