AG-Grid React：如何获取表格排序顺序并保存为用户设置？

一、排查onSortChanged未触发的核心问题 #

1. 确保列开启排序权限
   需为需要排序的列配置sortable: true，否则排序操作不会触发事件：

   const columnDefs = [
     { field: 'name', sortable: true },
     { field: 'age', sortable: true },
     // 其他列配置
   ];
   

2. 确认事件正确绑定到组件
   必须将onSortChanged作为props传递给AgGridReact组件，仅定义函数不会生效：

   <AgGridReact
     columnDefs={columnDefs}
     rowData={rowData}
     onSortChanged={onSortChanged}
     // 其他网格配置
   />
   

3. 适配AG-Grid版本的类型导入
   若使用v28+版本，需确保正确导入事件类型：

   import { SortChangedEvent } from '@ag-grid-community/core';
   

二、收集并保存排序状态 #

当onSortChanged正常触发后，可通过columnApi.getColumnState()获取包含排序规则（sort、sortIndex）的列状态，将其保存到本地存储或后端：

const onSortChanged = (event: SortChangedEvent) => {
  // 过滤出有排序设置的列，保留核心排序字段
  const sortState = event.columnApi.getColumnState()
    .map(col => ({ field: col.field, sort: col.sort, sortIndex: col.sortIndex }))
    .filter(col => col.sort);
  
  // 保存到localStorage
  localStorage.setItem('userGridSortState', JSON.stringify(sortState));
};

三、加载用户保存的排序状态 #

在组件初始化阶段，读取保存的状态并通过columnApi.setColumnState()恢复排序规则：

import { useEffect, useRef } from 'react';
import { AgGridReact } from '@ag-grid-community/react';
import { ColumnApi } from '@ag-grid-community/core';

const MyGrid = () => {
  const columnApiRef = useRef<ColumnApi | null>(null);

  useEffect(() => {
    if (columnApiRef.current) {
      const savedSortState = localStorage.getItem('userGridSortState');
      if (savedSortState) {
        const currentColumnState = columnApiRef.current.getColumnState();
        const parsedSortState = JSON.parse(savedSortState);
        
        // 合并保存的排序状态到当前列配置
        const updatedColumnState = currentColumnState.map(col => {
          const savedCol = parsedSortState.find((s: any) => s.field === col.field);
          return savedCol ? { ...col, sort: savedCol.sort, sortIndex: savedCol.sortIndex } : col;
        });
        
        columnApiRef.current.setColumnState(updatedColumnState);
      }
    }
  }, []);

  const onGridReady = (params: any) => {
    columnApiRef.current = params.columnApi;
  };

  const onSortChanged = (event: SortChangedEvent) => {
    const sortState = event.columnApi.getColumnState()
      .map(col => ({ field: col.field, sort: col.sort, sortIndex: col.sortIndex }))
      .filter(col => col.sort);
    
    localStorage.setItem('userGridSortState', JSON.stringify(sortState));
  };

  return (
    <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
      onGridReady={onGridReady}
      onSortChanged={onSortChanged}
      // 其他网格配置
    />
  );
};

四、手动调整列排序顺序 #

若需通过按钮等交互手动修改排序优先级，可直接修改列状态的sortIndex并调用setColumnState：

// 示例：将name列的排序优先级设为最高（sortIndex=0）
const adjustSortOrder = () => {
  if (columnApiRef.current) {
    const columnState = columnApiRef.current.getColumnState();
    const updatedState = columnState.map(col => 
      col.field === 'name' ? { ...col, sortIndex: 0 } : col
    );
    columnApiRef.current.setColumnState(updatedState);
  }
};

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