React Table 设置 Header onClick-Function 不禁用 sort-Function

Question

如何在不删除将通过单击 Header 执行的排序功能 (useSortBy) 的情况下将 onClick-Function 设置为我的 table-header。这是我的代码：

function renderTableHeader() {
  const headers = headerGroups.map(headerGroup => {
    return (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <th
            {...column.getHeaderProps(
              column.sortable && column.getSortByToggleProps()
            )}
          >
            {(column.render("Header")}
            <span>
              <i className={determineSortState(column)} />
            </span>
          </th>
        ))}
      </tr>
    );
  });

Answer 1

react-table 通过以下表达式在 <th> 元素上设置一个 onClick 处理程序：{...column.getHeaderProps(column.getSortByToggleProps())}

如果您将自己的 onClick 处理程序放在它前面，它将被覆盖。如果你把它放在它后面，它会覆盖来自 react-table 的处理程序，这会破坏排序。

因此您需要像这样在覆盖中手动触发 react-table 处理程序：

            <th
              {...column.getHeaderProps(column.getSortByToggleProps())}
              onClick={(e) => {
                //trigger the react-table header onClick manually
                  column
                  .getHeaderProps(column.getSortByToggleProps())
                  .onClick(e);

                //your onclick functionallity goes in here
                console.log("my on click");
              }}
            >

Answer 2

根据文档，对于 v6 或更低版本：https://github.com/TanStack/react-table/tree/v6，我们应该保持 sortOptions 的状态以记住排序，即使在调用 ReactTable 中任何方法的 onClick Func 之后也是如此。

要做到这一点：-

1.State 值 sortOptions 应使用 onSortedChange 方法中的 newSorted 参数进行更新，如下所示：onSortedChange={(newSorted) => {setSortOptions(newSorted)}}

2.State 值 sortOptions 然后应该作为值传递给 ReactTable sorted={sortOptions}

中的排序属性

const [sortOptions, setSortOptions] = useState();
<ReactTable 
sorted={sortOptions}
onSortedChange={(newSorted) => {setSortOptions(newSorted)}}
getTrProps={(state, rowInfo) => {
        if (rowInfo && rowInfo.row) {
          return {
            onClick: (e) => {
              // Do Something...for onCLick Event
            }
          }
        }}}
data={data}
columns={columns}
/>

React Table 设置 Header onClick-Function 不禁用 sort-Function

React Table set Header onClick-Function without disable sort-Function

javascript

reactjs

react-table

react-hooks