React中使用AgGrid，如何在组件重渲染时保留列宽？

针对你遇到的重渲染后列宽重置的问题，有几个实用的解决办法：

1. 让列定义保持稳定引用 #

如果你的列定义是在组件内部每次渲染都重新创建的（比如直接写在render里的数组），AgGrid会认为列配置变了，从而重置宽度。用useMemo把列定义缓存起来，确保每次渲染都是同一个引用：

import { useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';

function MyGrid({ rowData }) {
  // 用useMemo缓存列定义，依赖项为空数组保证只创建一次
  const columnDefs = useMemo(() => [
    { field: 'id', width: 80 },
    { field: 'username', width: 180 },
    { field: 'email', width: 250 }
  ], []);

  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      />
    </div>
  );
}

2. 使用suppressColumnStateReset配置 #

这就是你要找的类似suppressScrollOnNewData的配置项，开启后AgGrid在数据更新时不会重置列的状态（包括宽度、排序、过滤等），直接在组件上添加这个属性：

<AgGridReact
  columnDefs={columnDefs}
  rowData={rowData}
  suppressColumnStateReset={true}
/>

3. 手动保存和恢复列状态 #

如果需要更灵活的控制（比如把列宽存在本地存储，刷新页面也能保留），可以监听列宽变化事件，保存状态后在合适时机恢复：

import { useState, useCallback, useEffect, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

function MyGrid({ rowData }) {
  const gridApiRef = useRef(null);
  const [columnState, setColumnState] = useState(() => {
    // 从localStorage加载之前保存的列状态
    const saved = localStorage.getItem('agGridColumnState');
    return saved ? JSON.parse(saved) : null;
  });

  // 监听列宽变化，保存状态到localStorage和组件state
  const onColumnResized = useCallback((params) => {
    const state = params.api.getColumnState();
    setColumnState(state);
    localStorage.setItem('agGridColumnState', JSON.stringify(state));
  }, []);

  // 数据更新后恢复列状态
  useEffect(() => {
    if (gridApiRef.current && columnState) {
      gridApiRef.current.setColumnState(columnState);
    }
  }, [rowData, columnState]);

  return (
    <div className="ag-theme-alpine">
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        onGridReady={(params) => { gridApiRef.current = params.api; }}
        onColumnResized={onColumnResized}
      />
    </div>
  );
}

优先试前两种方法，尤其是suppressColumnStateReset，直接配置就能解决大部分场景的问题。

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