I'd like to keep the sort icons visible in table header columns all the time. But the default behavior of ag-grid is hiding the icons (.ag-header-cell-sorted-asc, .ag-header-cell-sorted-desc) as soon as I click on any header label.

Is there any option to change this behavior?

This is how I define the header columns:

@Component({
  selector: 'test-list',
  templateUrl: './test-listponent.html'
})
export class TestListComponent {
    public columnDefs = [
        { headerName: 'Test', field: 'test', minWidth: 150, sort: 'asc' },
        { headerName: 'Test1', field: 'test1', minWidth: 150, sort: 'desc'},
        { headerName: 'Test2', field: 'test2', minWidth: 250 }
      ];
}

I'd like to keep the sort icons visible in table header columns all the time. But the default behavior of ag-grid is hiding the icons (.ag-header-cell-sorted-asc, .ag-header-cell-sorted-desc) as soon as I click on any header label.

Is there any option to change this behavior?

This is how I define the header columns:

@Component({
  selector: 'test-list',
  templateUrl: './test-list.component.html'
})
export class TestListComponent {
    public columnDefs = [
        { headerName: 'Test', field: 'test', minWidth: 150, sort: 'asc' },
        { headerName: 'Test1', field: 'test1', minWidth: 150, sort: 'desc'},
        { headerName: 'Test2', field: 'test2', minWidth: 250 }
      ];
}

• javascript
• css
• angular
• ag-grid

• Could you please add some code in plunker to show what you exactly mean? – koolhuman Commented Mar 7, 2018 at 17:11

1 Answer 1

Are you talking about the unSortIcon?

{
        headerName: "Year",
        field: "year",
        width: 90,
        unSortIcon: true
},

Have a look at the below plunker example from ag-grid

https://plnkr.co/edit/FylOQ5cAD9id4LbgI3NN?p=preview

See the difference in column 'Year' and all other sort enabled columns? For Year column there is unSortIcon: true is applied.