Ag-Grid技术问题：如何隐藏空分组表头并实现未分组列跨两行？

问题描述 #

按照Ag-Grid分组表头相关示例配置后，网格出现空分组表头（效果如图：），希望实现未分组列跨两行显示的目标效果（如图：），当前使用的代码如下：

import React, {useState, useCallback, useRef, useMemo} from "react";

// MUI
import { Stack, Box } from "@mui/material";
...

const Vcode = () => {
 
  //grid test
  interface IOlympicData {
    athlete: string;
    age: number;
    country: string;
    year: number;
    date: string;
    sport: string;
    gold: number;
    silver: number;
    bronze: number;
    total: number;
  }

  const containerStyle = useMemo(() => ({ width: '100%', height: '600px' }), []);
  const gridStyle = useMemo(() => ({ height: '600px', width: '100%' }), []);
  const [rowDataTest, setRowDataTest] = useState<IOlympicData[]>();
  const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
    {
      headerName: 'Athlete Details',
      children: [{ field: 'athlete' }, { field: 'country' }],
    },
    {
      field: 'age',
      width: 90,
    },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      sortable: true,
      resizable: true,
      filter: true,
    };
  }, []);
  const onGridReady = useCallback((params: GridReadyEvent) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((dataTest: IOlympicData[]) => setRowDataTest(dataTest));
  }, []);

  return (
    <React.Fragment>
      <div style={containerStyle}>
        <div style={gridStyle} className="ag-theme-alpine">
          <AgGridReact<IOlympicData>
            rowData={rowDataTest}
            columnDefs={columnDefs}
            defaultColDef={defaultColDef}
            onGridReady={onGridReady}
          />
        </div>
      </div>
    </React.Fragment>
  );
};

export default Vcode;

解决方案 #

需要添加两个关键配置来解决问题：

1. 配置未分组列的headerGroupShow属性 #

修改columnDefs中的未分组列（如示例中的age列），添加headerGroupShow: 'closed'，让该列的表头跨两行显示：

const [columnDefs, setColumnDefs] = useState<(ColDef | ColGroupDef)[]>([
  {
    headerName: 'Athlete Details',
    children: [{ field: 'athlete' }, { field: 'country' }],
  },
  {
    field: 'age',
    width: 90,
    headerGroupShow: 'closed' // 新增该配置
  },
]);

2. 启用suppressSpanHeaderHeight配置 #

在AgGridReact组件中添加suppressSpanHeaderHeight={true}，禁用表头高度的自动调整，确保所有表头行高度一致，消除空分组表头：

<AgGridReact<IOlympicData>
  rowData={rowDataTest}
  columnDefs={columnDefs}
  defaultColDef={defaultColDef}
  onGridReady={onGridReady}
  suppressSpanHeaderHeight={true} // 新增该配置
/>

配置说明 #

• headerGroupShow: 'closed'：指定未分组列在分组表头的关闭状态下显示，使其表头区域跨占两行，避免空行出现。
• suppressSpanHeaderHeight：强制所有表头行使用相同高度，防止分组列与未分组列的表头高度不一致导致的空白区域。

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