Ag-Grid分组列：如何为分组行返回默认单元格渲染器？

你之前的思路搞混了innerRenderer的作用——它本来就只负责渲染组内的普通行，分组行的展开箭头、组名等默认渲染逻辑，是由autoGroupColumnDef默认的agGroupCellRenderer处理的，根本不需要在innerRenderer里判断分组行的情况。

最简单的正确写法 #

直接把innerRenderer设为你的自定义渲染器即可，分组行会自动使用默认渲染：

const autoGroupColumnDef = {
  headerName: 'My Group',
  field: 'id',
  cellRendererParams: {
    suppressCount: true,
    // innerRenderer 仅作用于组内普通行，分组行自动用默认渲染
    innerRenderer: params => <GroupColumnCellRenderer {...params} />
  },
};

如果需要自定义整个单元格渲染（包含分组行判断） #

要是你确实需要自己控制整个单元格的渲染逻辑（比如对分组行也做一些额外调整），可以通过Grid API获取默认的分组渲染器组件，而不是直接用不存在的AgGroupCellRenderer：

import { useGridApiContext } from '@ag-grid-community/react';

const CustomAutoGroupRenderer = (params) => {
  const api = useGridApiContext();
  if (params.node.group) {
    // 获取Ag-Grid内置的默认分组单元格渲染器
    const DefaultGroupRenderer = api.getCellRenderer('agGroupCellRenderer');
    return <DefaultGroupRenderer {...params} />;
  }
  // 普通行用自定义渲染器
  return <GroupColumnCellRenderer {...params} />;
};

const autoGroupColumnDef = {
  headerName: 'My Group',
  field: 'id',
  cellRenderer: CustomAutoGroupRenderer,
  cellRendererParams: {
    suppressCount: true,
  },
};

关键说明 #

• AgGroupCellRenderer不是可直接导入的React组件，它是Ag-Grid内部注册的渲染器名称，不能当作JSX组件直接使用。
• innerRenderer是agGroupCellRenderer的参数，专门用来覆盖组内普通行的渲染，分组行的渲染逻辑不受它影响。

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