sort multiple columns on Column header click in ag-grid

Question

In documentation, sorting api i.e columns API method "applyColumnState" used for sorting multiple columns on external button click

But Can we sort multiple columns on a Column header click?

For eg, On Column A header cell click I want Column A to be sorted desencding and Column B to be sort ascending. Is this possible?

Answer 1

from the docs : https://www.ag-grid.com/documentation/javascript/row-sorting/#sorting-api

you can manually sort through multiple columns, one after one using the ColumnState API:

gridOptions.columnApi.applyColumnState({
    state: [
      { colId: 'country', sort: 'asc', sortIndex: 0 },
      { colId: 'sport', sort: 'asc', sortIndex: 1 },
    ],
    defaultState: { sort: null },
  });

if you want to click on a header and sort an other one, you can disable sorting on the header in question, listen for the click on it an execute the above applyColumnState to manually sort.

you can listen to the click on the header by adding a listener on the .ag-header-cell class (https://stackoverflow.com/a/57812319/6641693) or simply by creating your own header component that would trigger any function you want using headerComponentFramework on the column Definition :

headerComponentFramework: (params) =>{
 return (
  <div>
   .....
  </div>
 )
}