How To Make A Header Clickable In React Table

I'm using react table and I want to make one of my headers clickable, so when the user clicks it a drop down menu will appear. I know you can add a custom function for onRowClick l

Solution 1:

You can make a custom function like onRowClick, but for your headers, here is one.

constonHeaderClick = () => {
      return {
        onClick: () => {
          // do something
        },
      };
  };

then pass it down to your table component

<TableclickableHeader={onHeaderClick}
/>

then in your table component you can call it in your th component like this

<th
{...clickableHeader(column)}
>