如何在AG-Grid中同时显示分组行与非分组常规行？

AG-Grid完全支持在单个网格中同时展示分组数据行和常规数据行，你遇到的空国家值高亮行问题也可以通过配置或数据处理解决，具体方案如下：

一、移除空分组行（空国家值的高亮行） #

当数据中存在country字段为空的条目时，AG-Grid默认会将它们归为一个空分组。要移除这个空分组并将对应数据转为常规行，有两种常用方式：

1. 预处理数据源 #

在数据传入AG-Grid前，拆分并合并数据：

// 假设原始数据为rawData
const groupedData = rawData.filter(item => item.country);
const regularData = rawData.filter(item => !item.country);
// 合并后的数据，常规行可放在分组行前后
const finalData = [...regularData, ...groupedData];

将finalData作为网格的数据源即可。

2. 配置分组过滤 #

利用AG-Grid的groupRowFilter配置直接过滤空分组：

gridOptions = {
  // 其他基础配置
  autoGroupColumnDef: {
    headerName: 'Country',
    field: 'country',
    // 过滤掉空值或null的分组
    groupRowFilter: node => node.key !== '' && node.key != null
  },
  rowGroupPanelShow: 'always',
  groupDefaultExpanded: -1
};

二、混合展示分组行与常规行 #

要实现两类行的混合展示，核心是让部分数据参与分组，另一部分作为独立行存在，以下是两种可行方案：

1. 基于数据属性控制分组 #

给数据添加shouldGroup标记字段，通过配置动态决定是否分组：

gridOptions = {
  getRowNodeId: data => data.id,
  // 仅shouldGroup为true的行参与分组
  isRowGroupActive: (colDef, node) => node.data.shouldGroup,
  columnDefs: [
    { field: 'country', rowGroup: true, hide: true },
    { field: 'name' },
    { field: 'value' }
  ]
};

这样标记为shouldGroup: true的数据会被分组，其余数据直接作为常规行展示。

2. 自定义分组逻辑 #

通过groupRowGetter自定义分组规则，让特定数据不参与分组：

gridOptions = {
  groupRowGetter: params => {
    // country为空时返回null，该行不参与分组
    if (!params.data.country) return null;
    // 其他情况按country分组
    return params.data.country;
  },
  columnDefs: [
    { field: 'country', rowGroup: true, hide: true },
    { field: 'name' },
    { field: 'value' }
  ]
};

内容的提问来源于stack exchange，提问作者user30160658