onClick event notification in addition to column sorting.

[jzbuchalski]

Column sorting was simple enough to enable by adding getSortByToggleProps()

   <th
          {...column.getHeaderProps(column.getSortByToggleProps())}
    >

I would also like notification when the sorting (click event) occurs. If I add an onClick, this works, but breaks the default sorting:

   <th
          {...column.getHeaderProps(column.getSortByToggleProps())}
          onClick={() => {/*callback*/}
    >

Any ideas on getting notified of an onClick() while still retaining default sorting functionality? I could add a

as a child of the , and add an onClick to that div, but seems hacky.

[belashjack]

Actually, if you look at https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useSortBy.js#L39 you see that getSortByToggleProps returns onClick fn, so you can do like that:

const { onClick, ...otherHeaderProps } = column.getHeaderProps(column.canSort ? column.getSortByToggleProps() : undefined);

<th {...otherHeaderProps} onClick={(e) => { console.log('clicked'); onClick?.(e); }}>...</th>

The problem I faced is that the return type of getSortByToggleProps is TableSortByToggleProps, and it doesn't contain onClick