AG Grid中onFirstDataRendered触发过早致列自动适配失效问题

在使用AG Grid的onFirstDataRendered钩子自动调整列宽时，直接调用autoSizeColumns只会基于列头计算宽度，无法适配单元格内容。虽然加setTimeout能解决问题，但固定延迟既不优雅也不可靠，以下是更合理的解决方案：

核心原因 #

onFirstDataRendered触发时，AG Grid已完成数据绑定，但单元格的DOM元素可能尚未完全渲染到页面。此时调用列宽适配方法，只能读取列头的宽度信息，无法获取单元格内容的实际宽度。

解决方案1：用requestAnimationFrame替代固定延迟 #

requestAnimationFrame会等待浏览器下一次重绘前执行回调，确保单元格DOM已渲染完成，能准确计算内容宽度：

const onFirstDataRendered = useCallback(() => {
  requestAnimationFrame(() => {
    autoSizeAllColumns();
  });
}, [autoSizeAllColumns]);

同样，动态更新行数据时的onRowDataUpdated钩子也可以用相同方式处理：

const onRowDataUpdated = useCallback(() => {
  requestAnimationFrame(() => {
    autoSizeAllColumns();
  });
}, [autoSizeAllColumns]);

解决方案2：优化autoSizeColumns调用逻辑 #

同时可以简化列ID的获取逻辑，避免冗余循环：

const autoSizeAllColumns = useCallback(() => {
  if (!gridRef.current?.api) return;
  const allColumnIds = gridRef.current.api.getColumns().map(col => col.getId());
  gridRef.current.api.autoSizeColumns(allColumnIds);
}, []);

额外注意事项 #

• 确保已正确定义gridRef（代码中需添加const gridRef = useRef(null);并绑定到AgGridReact组件）
• 若使用AG Grid v28+版本，配置autoSizeStrategy={{ type: "fitCellContents" }}应该自动完成列宽适配，无需手动调用方法。如果未生效，检查列定义是否设置了固定宽度，或rowData是否为完整加载后传入的数据。

完整示例代码：

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

export default function MyGrid({ rowData }) {
  const gridRef = useRef(null);

  const autoSizeAllColumns = useCallback(() => {
    if (!gridRef.current?.api) return;
    const allColumnIds = gridRef.current.api.getColumns().map(col => col.getId());
    gridRef.current.api.autoSizeColumns(allColumnIds);
  }, []);

  const onFirstDataRendered = useCallback(() => {
    requestAnimationFrame(() => {
      autoSizeAllColumns();
    });
  }, [autoSizeAllColumns]);

  const onRowDataUpdated = useCallback(() => {
    requestAnimationFrame(() => {
      autoSizeAllColumns();
    });
  }, [autoSizeAllColumns]);

  const autoSizeStrategy = useMemo(() => {
    return {
      type: "fitCellContents",
    };
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        autoSizeStrategy={autoSizeStrategy}
        onFirstDataRendered={onFirstDataRendered}
        onRowDataUpdated={onRowDataUpdated}
        // 需补充实际列定义
        // columnDefs={columnDefs}
      />
    </div>
  );
}

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