Ag Grid问题：首次渲染后返回网格时行向左收缩的视觉异常

以下是针对你遇到的「离开并返回网格时，行先向左聚集再恢复尺寸」问题的几种可行修复方案：

1. 手动触发Ag Grid布局刷新 #

组件路由切换或重新挂载时，Ag Grid可能无法及时感知DOM尺寸变化，导致布局计算偏差。可以通过网格API手动触发布局重置：

import { useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { useLocation } from 'react-router-dom';

const YourGrid = () => {
  const gridRef = useRef(null);
  const location = useLocation();

  // 监听路由变化，返回时触发布局刷新
  useEffect(() => {
    const gridApi = gridRef.current?.api;
    if (gridApi) {
      // 用微任务延迟确保DOM已更新完成
      setTimeout(() => {
        gridApi.resetRowHeights();
        gridApi.sizeColumnsToFit();
      }, 0);
    }
  }, [location.pathname]);

  return (
    <div className="ag-theme-alpine" style={{ height: '100%', width: '100%' }}>
      <AgGridReact
        ref={gridRef}
        rowData={yourRowData}
        columnDefs={yourColumnDefs}
        rowGroupPanelShow="always"
        // 其他你的配置项
      />
    </div>
  );
};

2. 确保父容器尺寸稳定 #

Ag Grid的布局完全依赖父容器的尺寸，若返回时父容器处于尺寸未稳定状态（比如伴随路由切换动画、异步样式加载），会导致临时布局异常：

• 优先给父容器设置固定的height和width值，避免动态尺寸波动；
• 若必须使用动态尺寸，可等待容器尺寸稳定后再渲染网格：

import { useLayoutEffect, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';

const YourGrid = () => {
  const [isReady, setIsReady] = useState(false);

  useLayoutEffect(() => {
    const container = document.querySelector('.ag-theme-alpine');
    // 检查容器尺寸是否已初始化完成
    if (container?.offsetHeight && container?.offsetWidth) {
      setIsReady(true);
    }
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: '100vh', width: '100%' }}>
      {isReady && (
        <AgGridReact
          rowData={yourRowData}
          columnDefs={yourColumnDefs}
          rowGroupPanelShow="always"
        />
      )}
    </div>
  );
};

3. 禁用网格过渡动画 #

视觉异常可能是Ag Grid内置的过渡动画导致的，可直接关闭动画消除闪烁：

通过API禁用 #

<AgGridReact
  // 其他配置
  suppressAnimationFrame={true}
/>

通过CSS强制禁用 #

.ag-theme-alpine .ag-row,
.ag-theme-alpine .ag-cell {
  transition: none !important;
}

4. 检查行分组配置冲突 #

确保行分组相关配置没有隐性的布局干扰：

• 给autoGroupColumnDef设置固定宽度，避免自动计算时的波动：

autoGroupColumnDef={{
  headerName: '分组',
  width: 220,
  sortable: true,
  filter: true
}}

• 避免在分组列的columnDefs中设置动态宽度或不稳定的样式。

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