Remove all selected rows even though I'm in other page using react-table with controlled pagination

Question

Using react-table v7, I'm having a hard time trying to delete all rows selected even though I'm in other page using toggleAllRowsSelected from hook-plugin useRowSelect.

I'm using controlled pagination for server-side and as the documentation says, I set autoResetSelectedRows: false to store in the state the prop selectedRowIds. So when I change the page, the data changes but I can keep the selectedRowIds intact. It works fine when I check or uncheck one single row, but I can't figure out how to uncheck all of them, not just the rows in the current page, which is what toggleAllRowsSelected is doing.

I'm doing something wrong or is a bug in toggleAllRowsSelected callback? Is there a way to manipulate the state of react-table to change manually the selectedRowIds prop?

I solved it this way.. but it could cause performance issues I think... :

  const handleUnselectAll = () => {
    state.selectedRowIds = {};
    toggleAllRowsSelected(false);
  };

Documentation:

useRowSelect: https://react-table.tanstack.com/docs/api/useRowSelect#userowselect

Data from server-side: https://react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

user_10191832 · Answer

I solved the issue by using stateReducer option.

  stateReducer: (newState, action) => {
    switch (action.type) {
      case 'toggleAllRowsSelected':
        return {
          ...newState,
          selectedRowIds: {},
        };

      default:
        return newState;
    }
  }

Reference: https://react-table-v7.tanstack.com/docs/api/useTable#usetable

Remove all selected rows even though I'm in other page using react-table with controlled pagination

1 Answers