Ag-Grid服务端行模型下恢复列状态报错的技术问询

问题场景 #

使用Ag-Grid的ServerSide行模型，通过Redux管理列状态（setColumnState和columnState），调用applyColumnState恢复列状态时触发错误：

AG Grid: ImmutableService only works with ClientSideRowModel

问题原因 #

ServerSide行模型不兼容默认的ImmutableService，而applyColumnState默认依赖该服务处理列定义的不可变更新，导致调用失败。

解决方案 #

1. 禁用列定义的不可变检测 #

在Grid配置中添加suppressColumnDefsChangeDetection: true，跳过ImmutableService的检测逻辑，让applyColumnState正常工作：

// 修改AgGridReact组件配置
<AgGridReact
  ref={gridRef}
  rowModelType="serverSide"
  suppressColumnDefsChangeDetection={true} // 新增配置
  columnDefs={columnDefs}
  // 其他原有属性保持不变
/>

2. 调整列状态恢复的时机 #

将列状态恢复逻辑从onFirstDataRendered移到onGridReady中，确保数据源注册完成后再执行恢复操作：

const onGridReady = useCallback((params: GridReadyEvent) => {
  params.api.setServerSideDatasource(datasource);
  // 注册数据源后立即恢复列状态
  if (columnState) {
    params.columnApi.applyColumnState({
      state: columnState,
      applyOrder: true, // 确保列顺序也能正确恢复
    });
  }
}, [columnState]);

补充说明 #

• 保存列状态的onSaveGridColumnState逻辑可以保留，它能正确捕获列宽、显示隐藏、固定状态、列顺序等客户端状态。
• 服务端行模型下，排序、过滤这类需要服务端配合的状态，需单独处理与后端的交互，而列的客户端状态（宽度、显示/隐藏、位置）可直接通过上述方案恢复。

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