企业官网建设流程全解析

LyteNyte Grid是一款轻量快速的 React 数据表格组件，它的行分组（Row Grouping）与行聚合（Row Aggregations）功能可以帮你把一堆原始明细数据，快速变成"按维度分组 + 组内汇总"的业务报表：比如按部门分组、按地区汇总销售额、统计各组记录数与平均值——无需手写任何表格计算逻辑。

为什么需要行分组与聚合？

业务报表的典型诉求是：

• 分层浏览：先看大类（如职业、地区），再逐层展开看明细；
• 快速汇总：在每组行旁边直接看到求和、平均、计数等统计值；
• 灵活切换：用户随时更换分组维度，表格自动重算。

LyteNyte Grid 的客户端数据源useClientDataSource通过两个属性就能同时满足这三点：

• group：定义按哪些字段分组；
• aggregate：定义每个分组如何汇总计算。

启用分组后，表格会生成两种行节点：叶子行（leaf rows）是原始数据，组行（group rows）是汇总展示层。

第一步：定义分组维度（两种方式任选）

方式一：分组维度数组（推荐，最直观）

直接把列定义（或{ field: "xxx" }简写）传给group，即可按多个字段做层级分组。以下示例按职业 → 学历两级分组：

const ds = useClientDataSource<GridSpec>({ data: loanData, group: [columns[0], { field: "education" }], // 职业 + 学历 rowGroupDefaultExpansion: true, });

对应完整示例可查看 demo.tsx/client-row-grouping-dimension/src/demo.tsx#L46-L58)。

💡实践技巧：把已分组的列设置为hide: true隐藏，让表格焦点集中在组行和剩余明细列上，报表观感会更干净。

方式二：分组函数（适合不规则分组）

group也可以传一个函数，为每一行返回分组路径数组，甚至返回不同长度的路径或null（表示该行不参与分组）。这适合"某些行才需要归入某组"的不规则业务场景：

const groupFn: Grid.T.GroupFn<GridSpec["data"]> = (row) => [ row.data.job, row.data.education, ];

两种方式的详细对比见官方文档 client-source-row-grouping.mdx/client-source-row-grouping.mdx)。

第二步：为分组添加聚合汇总

有了分组还不够，报表的灵魂是组级的汇总值。LyteNyte Grid 把"聚合"设计为一组声明式的维度：每个维度指定一个列和一个聚合函数（如sum求和、avg平均、count计数）。

先看一份真实的聚合配置示例（按职业/学历分组，对余额求平均、对姓名计数等）：

const aggModel: Grid.T.DimensionAgg<GridSpec["data"]>[] = [ { dim: { id: "name" }, fn: "count" }, { dim: { id: "loanAmount" }, fn: "avg" }, { dim: { id: "balance" }, fn: "avg" }, { dim: { id: "country" }, fn: "same" }, ];

LyteNyte Grid 分组聚合与透视汇总报表/version-2.png)

三种常用聚合方式

示例中注册了三个自定义聚合器：avg（四舍五入平均值）、same（组内值全相同则返回该值，否则返回null）、count（记录数）。完整代码可参考 聚合维度示例 demo.tsx/client-row-aggregation-dimensions/src/demo.tsx#L52-L94)。

聚合原理与设计细节可阅读官方文档 client-source-aggregations.mdx/client-source-aggregations.mdx)。

第三步：控制分组的默认展开行为

报表打开后是"全部收起"还是"默认展开第一层"？这由rowGroupDefaultExpansion控制：

• true/false：默认全部展开 / 全部收起；
• 正整数：只展开到指定深度（如0表示默认展开第一层分组）。

用户点击展开/收起时，网格会通过api.rowGroupToggle方法更新状态，并触发onRowGroupExpansionChange回调——你可以把展开状态持久化到后端，实现"刷新后保留上次的报表视图"。展开逻辑的源码实现位于 use-row-group-toggle.ts。

业务报表实战建议清单 ✅

1. 分组维度不超过 3 层：层级太深会让用户迷失，常用维度交给用户通过"更改分组"按钮动态切换；
2. 组行首列单独配置：通过rowGroupColumn属性为组行指定专属的列宽、固定位置（pin: "start"）和渲染器（官方提供RowGroupCell组件），让分组行始终可见；
3. 数值列标记type: "number"：聚合计算时网格能正确识别数值字段；
4. 分组列建议隐藏：避免"组标题 + 重复明细列"双重展示同一信息；
5. 明细数据可用仓库内置样例：packages/sample-data/ 提供了贷款、金融等示例数据集，方便你先跑通报表再替换为真实数据。

小结

用 LyteNyte Grid 构建业务报表的核心路径只有三步：

原始数据 → group 定义分组维度 → aggregate 定义组级汇总

整个过程声明式完成，表格自动处理分组、排序、展开状态和汇总计算，让你专注于报表本身而不是表格的实现细节。

延伸阅读：

• 行分组完整指南：client-source-row-grouping.mdx/client-source-row-grouping.mdx)
• 行聚合完整指南：client-source-aggregations.mdx/client-source-aggregations.mdx)
• 行分组交互演示：client-row-grouping-dimension//client-row-grouping-dimension/)
• 分组聚合交互演示：client-row-aggregation-dimensions//client-row-aggregation-dimensions/)