AG-Grid React：如何仅为叶子节点绑定自定义cellRenderer且不破坏行分组

要实现分组节点保留原生分组功能、叶子节点使用自定义cellRenderer的需求，你可以利用AG-Grid的cellRendererSelector配置，根据节点类型动态选择对应的渲染器：

1. 在autoGroupColumnDef中替换原cellRenderer为cellRendererSelector
2. 通过params.node.group判断节点是否为分组行：
   • 分组行：使用原生agGroupCellRenderer并保留原有参数（如复选框）
   • 叶子行：返回自定义渲染逻辑

修改后的完整代码 #

'use strict';

import React, { useCallback, useMemo, useRef, useState } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
  const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
  const [rowData, setRowData] = useState();
  const [columnDefs, setColumnDefs] = useState([
    { field: 'country', rowGroup: true, hide: true }
  ]);
  const defaultColDef = useMemo(() => {
    return {
      flex: 1,
      minWidth: 100,
      cellRenderer: params => {
        return 'groupRow cellRenderer: ' + params.value;
      }
    };
  }, []);
  
  // 修改autoGroupColumnDef，使用cellRendererSelector区分节点类型
  const autoGroupColumnDef = useMemo(() => {
    return {
      headerName: 'Athlete',
      field: 'athlete',
      minWidth: 250,
      cellRendererSelector: (params) => {
        // 判断是否为分组节点
        if (params.node.group) {
          // 分组节点使用原生agGroupCellRenderer，保留复选框参数
          return {
            component: 'agGroupCellRenderer',
            params: {
              checkbox: true,
            }
          };
        } else {
          // 叶子节点使用自定义渲染逻辑
          return {
            component: (params) => {
              return <span>自定义叶子节点: {params.value}</span>;
            }
          };
        }
      }
    };
  }, []);

  const gridRef = useRef();
  const [gridApi, setGridApi] = useState(null);
  const onGridReady = useCallback((params) => {
    fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
      .then((resp) => resp.json())
      .then((data) => setRowData(data));
    gridRef.current = document.querySelector('#theGrid');  
    setGridApi(params.api);
  }, []);

  return (
    <div style={containerStyle}>
      <div id="theGrid" style={gridStyle} className="ag-theme-alpine">
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          defaultColDef={defaultColDef}
          autoGroupColumnDef={autoGroupColumnDef}
          rowSelection={'multiple'}
          groupSelectsChildren={true}
          suppressRowClickSelection={true}
          suppressAggFuncInHeader={true}
          onGridReady={onGridReady}
        ></AgGridReact>
      </div>
    </div>
  );
};

render(<GridExample></GridExample>, document.querySelector('#root'));

关键说明 #

• cellRendererSelector会根据当前节点的属性动态选择渲染器，完美解决分组与叶子节点的渲染冲突
• 分组节点依旧使用原生agGroupCellRenderer，保留展开/折叠、复选框等所有原生分组功能
• 叶子节点的自定义渲染逻辑可以完全自定义，不受分组功能影响

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