如何隐藏Ag-Grid默认排序指示图标并自定义升序降序展示图标

1. 隐藏默认排序指示器 #

在全局样式文件或者组件对应的样式文件中添加以下CSS，覆盖ag-grid默认样式：

/* 隐藏原生排序指示图标 */
.ag-header-cell .ag-sort-indicator,
.ag-header-cell .ag-sort-ascending-icon,
.ag-header-cell .ag-sort-descending-icon {
  display: none !important;
}

2. 快速配置自定义排序图标 #

如果仅需要替换图标样式，不需要复杂交互，直接在列定义或者全局grid配置中指定icons属性即可：

单列自定义配置 #

// 组件内列定义
public columnDefs = [
  {
    field: '字段名',
    sortable: true,
    // 自定义当前列的排序图标
    icons: {
      // 升序图标，可替换为自定义svg、图标类名等
      sortAscending: '<i class="your-sort-up-icon"></i>',
      // 降序图标
      sortDescending: '<i class="your-sort-down-icon"></i>',
      // 可选：未排序状态图标，不需要可删除
      sortUnSort: '<i class="your-sort-default-icon"></i>'
    }
  },
  // 其余列配置
]

全局统一配置 #

所有可排序列统一用一套自定义图标，直接在gridOptions中配置即可，不需要每列单独声明：

public gridOptions = {
  icons: {
    sortAscending: '<i class="your-sort-up-icon"></i>',
    sortDescending: '<i class="your-sort-down-icon"></i>'
  },
  // 其余grid配置
}

3. 复杂场景：自定义头部组件 #

如果需要结合Angular业务逻辑、自定义交互效果，可以自己实现头部组件：

1. 首先创建自定义头部组件

// custom-sort-header.component.ts
import { Component } from '@angular/core';
import { IAngularHeaderComp } from 'ag-grid-angular';

@Component({
  selector: 'app-custom-sort-header',
  template: `
    <div class="custom-header" (click)="handleSort()">
      <span class="header-text">{{ params.displayName }}</span>
      <span class="sort-icon-wrapper">
        <i class="icon-arrow-up" *ngIf="currentSort === 'asc'"></i>
        <i class="icon-arrow-down" *ngIf="currentSort === 'desc'"></i>
      </span>
    </div>
  `,
  styles: [/* 自定义头部样式 */]
})
export class CustomSortHeaderComponent implements IAngularHeaderComp {
  params: any;
  currentSort: 'asc' | 'desc' | '' = '';

  agInit(params: any): void {
    this.params = params;
    // 监听排序变更事件更新图标状态
    this.params.column.addEventListener('sortChanged', () => {
      this.currentSort = this.params.column.getSort() || '';
    });
  }

  handleSort() {
    // 触发ag-grid原生排序逻辑
    this.params.progressSort(this.params.multiSort);
  }
}

2. 在使用ag-grid的模块中声明该组件，然后在grid配置中注册使用：

// 业务组件grid配置
public columnDefs = [
  {
    field: '字段名',
    sortable: true,
    headerComponent: 'customSortHeader'
  }
];

public gridOptions = {
  components: {
    customSortHeader: CustomSortHeaderComponent
  },
  // 其余配置
}

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