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

user_16908248 0
Viewed 1556

How can I set an onClick-Function to my table-header without removing the sort function (useSortBy) which will be executed by clicking the Header. Here is my code:

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>
    );
  });
react-table react-hooks reactjs javascript
2 Answers

react-table sets up an onClick handler on the <th>element by this expression: {...column.getHeaderProps(column.getSortByToggleProps())}

If you put your own onClick handler before it, it will be overridden. If you put it behind it, it will override the handler from react-table, which will break the sorting.

So you need to trigger the react-table handler manually in your override like this:

            <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");
              }}
            >
user_43166810

For v6 or below as per Docs : https://github.com/TanStack/react-table/tree/v6, we should maintain state for sortOptions to remember the sorting even after calling onClick Func of any methods in ReactTable.

TO achieve that:-

1.State value sortOptions should be updated using newSorted parameter from onSortedChange method, like this: onSortedChange={(newSorted) => {setSortOptions(newSorted)}}

2.State value sortOptions should then be passed as value to sorted attribute in 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}
/>
user_132360740
Related