如何设置ag-grid始终显示表头排序图标？

没问题，我来帮你搞定这个ag-grid的排序图标显示问题～ag-grid默认确实只会在列处于排序状态或者鼠标悬停时显示排序图标，但我们可以通过两种方式修改这个行为：

方法一：CSS强制显示（最简单快速） #

直接通过自定义CSS覆盖ag-grid的默认样式，强制让所有表头的排序图标保持可见：

/* 强制显示所有表头的排序图标，无视默认的显示规则 */
.ag-header-cell .ag-header-icon.ag-sort-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 可选：给未排序状态的图标设置不同样式，和排序状态区分开 */
.ag-header-cell:not(.ag-header-cell-sorted-asc):not(.ag-header-cell-sorted-desc) .ag-sort-icon {
    color: #cccccc; /* 比如设为灰色 */
}

这种方法不需要修改任何JS代码，适合快速实现需求。

方法二：自定义表头组件（更灵活的定制） #

如果需要更复杂的自定义逻辑（比如动态调整图标样式、添加额外交互），可以使用ag-grid的自定义表头组件：

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

const CustomHeaderComponent = (props) => {
    // 获取当前列的排序方向
    const sortDirection = props.column.getSort();
    
    return (
        <div className="ag-header-cell-label">
            {/* 显示列名 */}
            <span className="ag-header-cell-text">{props.displayName}</span>
            {/* 始终渲染排序图标，根据排序方向添加对应类名 */}
            <span 
                className={`ag-header-icon ag-sort-icon ${
                    sortDirection === 'asc' ? 'ag-header-cell-sorted-asc' : 
                    sortDirection === 'desc' ? 'ag-header-cell-sorted-desc' : ''
                }`}
            ></span>
        </div>
    );
};

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

const columnDefs = [
    {
        headerName: '你的列名',
        field: 'yourField',
        sortable: true,
        headerComponent: CustomHeaderComponent // 指定自定义表头组件
    },
    // 其他列定义...
];

这种方式完全由你掌控表头的渲染逻辑，能实现更多个性化需求。

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