How to intercept column header click and do something else?

[Irfy]

I've asked this question on StackOverflow, so far to no avail.

Basically, I wish to sort by the clicked column instead of selecting the column. The sorting already works with the <Menu> component (similar to the table sort example in the docs), but the requirement is that a simple click on the column header cell must work as well.

As described in the linked SO question, I'm customizing the columnHeaderCellRenderer of each Column and then providing a simple div with onClick as the nameRenderer:

const columnHeaderCellRendererFor = (colName: string) => (
  <ColumnHeaderCell
    nameRenderer={() => (<div onClickCapture={e => e.stopPropagation()} onClick={() => {throw "foobar"}}>{colName}</div>)}
  />
);

And this does not work, clicking the column header cell still selects the column. As an experiment, when I use nameRenderer={() => <EditableName name={colName} />} that component works correctly. I don't understand why a simple div's onClick isn't working.