如何防止AG Grid中的列变为未排序状态？

有两种可行的实现方式，分别从全局排序控制和列头交互拦截入手：

方法一：监听排序变化，强制保持有效排序 #

通过sortChanged事件监控排序状态，一旦检测到无排序列的情况，立即强制设置默认排序；同时在表格初始化时确保有初始排序。

const gridOptions = {
  // 其他表格配置项
  sortChanged: (params) => {
    const sortModel = params.api.getSortModel();
    // 若排序模型为空，自动设置第一个可排序列为升序
    if (sortModel.length === 0) {
      const firstSortableCol = params.columnApi.getAllColumns().find(col => col.getColDef().sortable);
      if (firstSortableCol) {
        params.api.setSortModel([{
          colId: firstSortableCol.getColId(),
          sort: 'asc'
        }]);
      }
    }
  },
  gridReady: (params) => {
    // 初始化时确保表格已有排序
    const sortModel = params.api.getSortModel();
    if (sortModel.length === 0) {
      const firstSortableCol = params.columnApi.getAllColumns().find(col => col.getColDef().sortable);
      if (firstSortableCol) {
        params.api.setSortModel([{
          colId: firstSortableCol.getColId(),
          sort: 'asc'
        }]);
      }
    }
  }
};

这种方式能覆盖所有修改排序的场景（包括API调用、右键菜单等），确保表格始终处于排序状态。

方法二：自定义列头组件，拦截未排序切换 #

通过自定义列头组件重写点击逻辑，直接禁止列头点击触发未排序状态，仅允许在升序/降序间切换，或从未排序直接切换到升序。

1. 定义自定义列头组件 #

const CustomSortHeader = (props) => {
  const currentSort = props.column.getSort();
  
  const handleHeaderClick = () => {
    let targetSort;

    if (!currentSort) {
      // 当前未排序，直接设置为升序
      targetSort = 'asc';
    } else if (currentSort === 'asc') {
      // 当前升序，切换为降序
      targetSort = 'desc';
    } else {
      // 当前降序，切换回升序（也可保持降序，按需调整）
      targetSort = 'asc';
    }

    // 设置当前列为唯一主排序列
    props.api.setSortModel([{
      colId: props.column.getColId(),
      sort: targetSort
    }]);
  };

  return (
    <div 
      onClick={handleHeaderClick} 
      style={{ padding: '8px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center' }}
    >
      <span>{props.displayName}</span>
      {/* 显示排序指示器 */}
      {currentSort === 'asc' && <span style={{ marginLeft: '4px' }}>↑</span>}
      {currentSort === 'desc' && <span style={{ marginLeft: '4px' }}>↓</span>}
    </div>
  );
};

2. 在列定义中使用该组件 #

const columnDefs = [
  {
    headerName: '姓名',
    field: 'name',
    sortable: true,
    headerComponent: CustomSortHeader
  },
  {
    headerName: '年龄',
    field: 'age',
    sortable: true,
    headerComponent: CustomSortHeader
  }
  // 其他列配置...
];

这种方式直接控制列头交互，避免用户触发未排序操作，适合只通过列头点击修改排序的场景。若有其他修改排序的入口，建议结合方法一共同使用。

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