This doesn't work:
onClick={() => {
header.column.getToggleSortingHandler();
}}
However if I invoke it like this then it works - why?
onClick={
header.column.getToggleSortingHandler()
}
I was expecting the arrow function to give similar results.
getToggleSortingHandler returns a function that can be used to toggle this column's sorting state
In other words, getToggleSortingHandler is not the sort function, it creates sort function.
The first case doesn't work because you pass in a function that is not yet invoke the sort function
Working version:
onClick={() => {
const sortFn = header.column.getToggleSortingHandler(); //only create sort function
sortFn();//invoke the sorting
//or header.column.getToggleSortingHandler()();
}}
The second case it works because when you invoke it once, the sort function is created and passed to onClick