React Ag-Grid IP列排序问题：按数量及IP大小排序，取消第三排序状态

一、实现自定义排序逻辑 #

当前已实现按IP列表数量排序，需补充第二阶段的IP排序逻辑。核心是利用Ag-Grid comparator函数的第三个参数sortDirection，结合IP地址的数值比较：

1. 完善IP转整数工具函数 #

将IP地址转为整数，确保比较的准确性：

const ipToInt = (ip: string): number => {
  return ip.split('.').reduce((acc, octet) => {
    return (acc << 8) + parseInt(octet, 10);
  }, 0);
};

2. 改造comparator函数 #

替换原listSizeComparator，实现完整排序规则：

export const ipListComparator = (list1: Array<string>, list2: Array<string>, sortDirection: 'asc' | 'desc') => {
  // 优先按列表长度排序
  const lengthDiff = list1.length - list2.length;
  if (lengthDiff !== 0) {
    return sortDirection === 'asc' ? lengthDiff : -lengthDiff;
  }

  // 长度相同时，按排序方向取最小/最大IP比较
  const getTargetIp = (list: string[], direction: 'asc' | 'desc') => {
    if (!list?.length) return 0;
    const sortedIpInts = list.map(ipToInt).sort((a, b) => a - b);
    return direction === 'asc' ? sortedIpInts[0] : sortedIpInts.at(-1);
  };

  const ip1 = getTargetIp(list1, sortDirection);
  const ip2 = getTargetIp(list2, sortDirection);

  return sortDirection === 'asc' ? ip1 - ip2 : ip2 - ip1;
};

3. 更新列定义 #

将列的comparator替换为新的函数：

{
  headerName: t('tables.allIps.columns.ip.header'),
  headerTooltip: t('tables.allIps.columns.ip.desc'),
  colId: DeviceColumnIds.ip,
  valueGetter: agFields.interfaceIPSumGetter,
  comparator: agFields.ipListComparator // 替换为新比较器
}

二、取消第三排序状态（仅保留升序/降序） #

Ag-Grid默认点击列头会循环「升序→降序→无排序」，通过配置sortingOrder可限制仅保留升序和降序：

1. 配置gridOptions #

在表格的配置对象中添加sortingOrder：

const gridOptions = {
  // 其他原有配置...
  sortingOrder: ['asc', 'desc'], // 跳过无排序状态
};

2. 传入AgGridReact组件 #

将配置传给表格组件：

<AgGridReact
  gridOptions={gridOptions}
  // 其他props（如columnDefs、rowData等）
/>

内容的提问来源于stack exchange，提问作者D. Crypt