AG Grid：如何将ColumnState存入ColumnDefs避免状态失效

核心思路 #

避免直接修改defaultColDef触发全列定义重置，转而通过更新columnDefs的方式维护浮动过滤器状态，同时结合AG Grid API正确保存/恢复列状态，确保两者互不干扰。

具体实现步骤 #

1. 初始化与状态存储逻辑 #

• 初始化columnDefs时，给每列明确设置默认的floatingFilter属性（而非依赖defaultColDef），预留状态恢复入口：

const [columnDefs, setColumnDefs] = useState([
  { field: 'name', floatingFilter: true },
  { field: 'age', floatingFilter: true },
  // 其他列定义
]);

• 监听AG Grid的columnStateChanged事件，实时将列状态存入localStorage：

const onColumnStateChanged = (params) => {
  const columnState = params.api.getColumnState();
  localStorage.setItem('agGridColumnState', JSON.stringify(columnState));
};

2. 页面加载时恢复列状态 #

• 在AG Grid的onGridReady回调中恢复状态，确保网格初始化完成后再操作：

const onGridReady = (params) => {
  const savedState = localStorage.getItem('agGridColumnState');
  if (savedState) {
    params.api.applyColumnState({
      state: JSON.parse(savedState),
      applyOrder: true, // 确保列顺序也恢复
    });
  }
};

3. 切换浮动过滤器的正确方式 #

• 点击按钮时，直接更新columnDefs中每一列的floatingFilter属性，同时保留已有的列配置（比如宽度、排序等）：

const toggleFloatingFilter = () => {
  setColumnDefs(prevDefs => {
    return prevDefs.map(def => ({
      ...def,
      floatingFilter: !def.floatingFilter
    }));
  });
};

这种方式不会重置已有的列状态，因为只是修改列定义中的特定属性，AG Grid会增量更新列配置而非完全重置。

4. 替代方案：修改defaultColDef后重新恢复状态 #

如果一定要用defaultColDef，可以在修改后重新调用状态恢复逻辑：

const [defaultColDef, setDefaultColDef] = useState({ floatingFilter: true });
const gridRef = useRef(null);

const toggleFloatingFilter = () => {
  setDefaultColDef(prev => ({
    ...prev,
    floatingFilter: !prev.floatingFilter
  }));
};

// 监听defaultColDef变化，重新恢复列状态
useEffect(() => {
  const gridApi = gridRef.current?.api;
  if (!gridApi) return;
  
  const savedState = localStorage.getItem('agGridColumnState');
  if (savedState) {
    gridApi.applyColumnState({
      state: JSON.parse(savedState),
      applyOrder: true,
    });
  }
}, [defaultColDef]);

注意要通过gridRef获取当前的网格API，确保操作的是已初始化的网格实例。

关键注意事项 #

• 避免在columnDefs的useEffect中重复恢复状态，否则每次列定义更新都会触发状态重置，覆盖用户修改。
• 使用applyColumnState时，设置applyOrder: true，否则列顺序可能无法正确恢复。
• 存储列状态时，只保留必要属性（比如宽度、顺序、可见性），避免和浮动过滤器这类配置混淆。

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