How to hide sort order indicator in Ag-Grid?

Question

I'm using AgGrid and ag-grid-angular 15.0.0

All my columns are sortable. Ag-grid prints a number into each header, indicating the sort order. How to hide this? I'm using suppressMultiSort = true, as I wanna sort by a single column only.

EDIT:

If only 1 column is sortable, the numbers are not printed. But if more than 1 can be sorted, agGrid displays those numbers in the headers..

Furthermore, once I click any of the headers to trigger sorting, the numbers disappear..

Any help would be greatly appreciated.

Thanks in advance!

Answer 1

I can see there are many questions (and confusions you are having :) ) in you post.

1. "If only 1 column is sortable, the numbers are not printed. But if more than 1 can be sorted, agGrid displays those numbers in the headers.."

If you want to enable multisort and don't want to see the numbers indicating sort orders, then you can do it with CSS.

Check this plunk: ag-grid Multi Column Sort - hide sortorder numbers

.ag-header-cell-label .ag-header-icon.ag-sort-order {
  display: none
}

2. "Furthermore, once I click any of the headers to trigger sorting, the numbers disappear.."

ag-grid sorting on multiple columns works when you click on column with Ctrl pressed.
If multi-column sort is already there, and if you click on any other column without Ctrl, then the older column sorting vanished, and it is replaced with the last column you have clicked.

3. If you want to disable multi-sort, you need to set below attribute on ag-grid element

[suppressMultiSort]="true"

4. multiSortKey can be changed - you need to mention it as the below attribute

multiSortKey = "ctrl";

You can see in the Plunk I provided.

Hope this helps.

Answer 2

Easiest way is to override the default css header template used by ag-grid.

default Header css:

<div class="ag-cell-label-container" role="presentation">
    <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>
    <div ref="eLabel" class="ag-header-cell-label" role="presentation">
        <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>
        <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>
        <span ref="eSortOrder" class="ag-header-icon ag-sort-order" ></span>
        <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>
        <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>
        <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>
    </div>
</div>

see this reference link

For example , if i see sort order indicator for my below header. i'll remove default order indicator like this in my typescript code :

headerComponentParams = 
    '<div class="ag-cell-label-container" role="presentation">' +
    '  <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"></span>' +
    '  <div ref="eLabel" class="ag-header-cell-label" role="presentation">' +          
    '    <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" ></span>' +
    '    <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" ></span>' +
    '    <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" ></span>' +
    '    <span ref="eText" class="ag-header-cell-text" role="columnheader"></span>' +
    '    <span ref="eFilter" class="ag-header-icon ag-filter-icon"></span>' +
    '  </div>' +
    '</div>';  


this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          fieldKey: 'name',
          width:100,          
          headerComponentParams: { template:this.headerComponentParams}        
        } ]

You'll note that i have removed the span tag "eSortOrder" in my template code. Apply same approach to other column for whom you want to remove sort order reference. Handle to css template also gives you power to manipulate the header display. see the reference link for more info.