如何在ag-grid侧边栏面板中将勾选、未勾选列按字母顺序排序

你的现有代码仅实现了「显示列在前、隐藏列在后」的分组逻辑，要实现同组内按字母排序，只需在比较函数中补充同状态下的字符串比较规则即可，修改后的代码如下：

import type { GridColDef, GridApi } from 'ag-grid-community';

const sortColumns = (columnDefs: GridColDef[]): void => {
  columnDefs.sort((cd1, cd2) => {
    // 第一步：先按隐藏状态分组，显示列（未勾选隐藏）在前，隐藏列（已勾选隐藏）在后
    const hideDiff = +cd1.hide - +cd2.hide;
    if (hideDiff !== 0) return hideDiff;
    // 第二步：同状态下按列名的字母顺序排序，默认忽略大小写
    // 优先取headerName显示名排序，无显示名则取field字段名，可根据实际需求调整取值优先级
    const colName1 = (cd1.headerName || cd1.field || '').toLowerCase();
    const colName2 = (cd2.headerName || cd2.field || '').toLowerCase();
    return colName1.localeCompare(colName2);
  });
};

// 排序完成后调用setColumnDefs同步到ag-grid实例，侧边栏工具面板会自动同步排序结果
sortColumns(gridColumns);
gridApi.setColumnDefs(gridColumns);

补充说明：

• 如果需要将未勾选（隐藏）列放在前面，仅需把hideDiff的计算逻辑修改为+cd2.hide - +cd1.hide即可
• 内置的localeCompare方法天然适配多语言字母排序规则，不需要额外处理特殊字符排序问题

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