React-Table - Sort and onClick Handler?-CodePudding

I am creating a project with React-Table and was wondering if it's possible to do the default sort and call an onClick handler when a column header is clicked. It seems that I can do one or the other but trying to do both results in the following error: 'Cannot read properties of undefined (reading 'persist')'. Can anyone please provide insight on how I can get this to work? Here's a link to the sandbox and a snippet of code. Thanks!

https://codesandbox.io/s/stupefied-framework-g405u?file=/src/App.js

const headerProps = column.getHeaderProps(column.getSortByToggleProps());

console.log(headerProps);

const clickHandler = () => {
    console.log("Hello World");
    headerProps.onClick();
};

return (
    <th {...headerProps} onClick={clickHandler}>

CodePudding user response：

you need to pass in the event parameter to your handler

  const clickHandler = (e) => {
                  console.log("Hello World");
                  debugger;
                  toggleProps.onClick(e);
                };