在AG-Grid React中实现列头自定义图标及自定义排序功能

一、自定义列头组件添加排序图标 #

AG-Grid支持通过headerComponent自定义列头结构，你可以直接在组件中插入排序图标（用SVG、字体图标或纯文本符号都可以）：

1. 创建自定义列头组件：

import React from 'react';

const CustomHeader = (props) => {
  // 根据当前列的排序状态切换图标样式
  const getSortIcon = () => {
    if (props.column.isSortAscending()) {
      return <span className="sort-icon asc">↑</span>;
    } else if (props.column.isSortDescending()) {
      return <span className="sort-icon desc">↓</span>;
    }
    return <span className="sort-icon">↕</span>;
  };

  // 点击图标触发排序的函数，后面会实现逻辑
  const handleSortClick = (e, props) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发列头其他默认交互
    // 排序逻辑写在这里
  };

  return (
    <div className="custom-header">
      <span>{props.displayName}</span>
      {/* 插入带点击事件的排序图标 */}
      <button onClick={(e) => handleSortClick(e, props)} className="sort-btn">
        {getSortIcon()}
      </button>
    </div>
  );
};

export default CustomHeader;

2. 在列定义中使用该组件，并关闭默认排序：

const columnDefs = [
  {
    headerName: '目标列名',
    field: 'targetField',
    headerComponent: CustomHeader,
    sortable: false // 关闭AG-Grid默认排序，避免和自定义逻辑冲突
  }
];

二、绑定自定义排序逻辑 #

在handleSortClick函数中，利用AG-Grid的API实现自定义排序逻辑：

const handleSortClick = (e, props) => {
  e.stopPropagation();
  const gridApi = props.api;
  const columnId = props.column.getId();

  // 切换排序状态：未排序→升序→降序→循环
  let sortDirection;
  if (props.column.isSortAscending()) {
    sortDirection = 'desc';
  } else if (props.column.isSortDescending()) {
    sortDirection = null;
  } else {
    sortDirection = 'asc';
  }

  // 设置排序模型控制网格排序状态
  const sortModel = sortDirection ? [
    { colId: columnId, sort: sortDirection }
  ] : [];
  gridApi.setSortModel(sortModel);

  // 如果需要完全自定义排序规则（而非默认按字段值排序），可在列定义中添加sortComparator：
  // sortComparator: (valueA, valueB, nodeA, nodeB, isDescending) => {
  //   // 自定义比较逻辑，返回-1、0、1分别代表A小于B、相等、A大于B
  //   // 示例：按字符串长度排序
  //   const lenA = valueA?.length || 0;
  //   const lenB = valueB?.length || 0;
  //   return isDescending ? lenB - lenA : lenA - lenB;
  // }
};

三、样式优化（可选） #

给列头和图标加基础样式，让交互更友好：

.custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  height: 100%;
}

.sort-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
}

.sort-icon {
  font-size: 14px;
}

.sort-icon.asc, .sort-icon.desc {
  color: #1890ff; /* 高亮当前排序状态的图标 */
}

核心要点 #

• 用headerComponent完全掌控列头结构，自由插入图标元素
• 关闭列的sortable属性，避免默认排序逻辑干扰自定义交互
• 通过api.setSortModel控制网格的排序状态，配合sortComparator实现特殊排序规则
• 用stopPropagation防止点击图标时触发列头的默认选中、拖拽等事件

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