AgGrid自定义单元格渲染器导致列宽自动调整失效问题

问题描述 #

使用AgGrid时，默认单元格渲染器的自动列宽功能正常，但切换为自定义React单元格渲染器后，该功能失效。相关列配置和自定义渲染器代码如下：

列配置：

{
  headerName: 'Impacted Items',
  cellRenderer: ReactCellRenderer,
  cellRendererParams: {
      Component: Myrenderer
  },
}

自定义ReactCellRenderer：

import React, { ComponentType } from "react";
import { render, unmountComponentAtNode } from "react-dom";

export type ReactCellRendererParams = {
  Component: ComponentType;
  directToPath: any;
};

export class ReactCellRenderer {
  domWrapper: HTMLElement;

  constructor() {
      this.domWrapper = document.createElement("div");
  }

  init(params: ReactCellRendererParams): void {
      render(
          <params.Component {...params} />,
          this.domWrapper,
      );
  }

  getGui(): HTMLElement {
      return this.domWrapper;
  }

  refresh(params: ReactCellRendererParams): boolean {
      render(
          <params.Component {...params} />,
          this.domWrapper,
      );
      return true;
  }

  destroy(): void {
      unmountComponentAtNode(this.domWrapper);
  }
}

原因分析 #

AgGrid的自动列宽计算是同步进行的：在单元格初始化阶段，AgGrid会立即测量单元格DOM的尺寸来确定列宽。但自定义渲染器中ReactDOM.render是异步执行的——AgGrid测量宽度时，React组件还未渲染到DOM中，此时测量的是空的domWrapper元素，导致列宽计算错误。

解决方案 #

方案1：利用React渲染回调触发列宽调整 #

修改自定义渲染器的init方法，在React组件渲染完成后，通知AgGrid重新计算当前列的宽度：

init(params: ReactCellRendererParams): void {
    render(
        <params.Component {...params} />,
        this.domWrapper,
        () => {
            // 渲染完成后自动调整当前列宽度
            params.api?.autoSizeColumn(params.column.getId());
        }
    );
}

若需要一次性调整所有列，可替换为params.api?.sizeColumnsToFit()。

方案2：使用AgGrid官方React组件集成方式 #

AgGrid官方提供了React组件的原生集成方案，无需手动编写ReactCellRenderer，官方渲染器会自动处理渲染时机和尺寸测量：

1. 在列配置中指定自定义组件的标识：

const columnDefs = [
  {
    headerName: 'Impacted Items',
    cellRenderer: 'myCustomRenderer'
  }
];

2. 在AgGridReact组件中注册frameworkComponents：

import { AgGridReact } from 'ag-grid-react';
import Myrenderer from './Myrenderer';

// ...

<AgGridReact
  columnDefs={columnDefs}
  frameworkComponents={{
    myCustomRenderer: Myrenderer
  }}
  // 其他配置（如rowData、gridOptions等）
/>

方案3：检查自定义组件样式 #

确保Myrenderer组件的样式不会干扰尺寸计算：

• 避免设置overflow: hidden导致内容被截断（除非业务需要）
• 若需单行显示，设置white-space: nowrap确保内容不换行，让AgGrid计算正确的内容宽度
• 移除不必要的padding/margin，或与默认单元格样式保持一致

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