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