如何在 React table 中使 header 可点击

Question

我正在使用 React table，我想让我的 header 之一可以点击，因此当用户点击它时，会出现一个下拉菜单。我知道您可以为 onRowClick 添加自定义函数，例如

const onRowClick = cell => {return {onClick: () => {// do something here}}}

但是有没有办法只在 header 单元格中做到这一点？您是否应该将其添加到您的专栏中，例如

const columns = React.useMemo(() => [{Header: 'Header', accessor: 'header', onClick: () => // do something}])

Answer 1

您可以创建一个像 onRowClick 这样的自定义函数，但是对于您的 headers，这里有一个。

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

然后将其传递给您的 table 组件

<Table
    clickableHeader={onHeaderClick}
/>

然后在您的 table 组件中，您可以像这样在 th 组件中调用它

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

How to make a header clickable in react table