react-table (seen in both v7.5.1 & v7.6.3) with manualPagination
& useRowSelect
crashes when deselecting rows that are not on the currently visible page. Data for this example is provided by Laravel's server-side pagination
- Run
docker-compose up
to start the example - Choose one to many rows on the first page
- Change to another page
- Choose another one to many rows
- Click the "Do something" button
The selected row counter should reset to 0.
The selected row counter is not 0 & is the sum of selected rows on non-visible pages
- Run
docker-compose up
to start the example - Click the "Mode" button to change it from "All" to "Row" to enable use of
toggleRowSelected
- Choose one to many rows on the first page
- Change to another page
- Choose another one to many rows
- Click the "Do something" button
The selected row counter should reset to 0.
The page crashes
This started when trying to use toggleAllRowsSelected(false)
to clear all the selected rows, but that resulted in only the current visible rows being deselected - you could go to the other pages with previously selected rows and still see them selected.
To work around this, I tried tracking the selected row IDs externally & using toggleRowSelected(rowId, false)
to iterate over the selected IDs to set selected=false but then the page crashed when it tried to toggle a row that was not visible.
Using toggleRowSelected
, the following lines in useRowSelect.js
break when a not-visible row is being deselected:
const row = rowsById[id] // off-page row = undefined
if (!row.isGrouped) { ... // errors here
- By design when server-side pagination is enabled, only the displayed rows are returned from the API - IE
page[] = rows[]
useRowSelect
seems to expectsrows[]
to have all possible, not just the currently visible ones
- Not sure if this is a proper fix but it fixed the crash at least
cd demo/laravel/react-table && git checkout repro-potential-fix
cd ../../.. && docker-compose build && docker-compose up
- react-table instance
- demo page that loads data from api
- api endpoint that returns paginated data from the controller
- controller that returns test data
- test data
- https://github.com/tannerlinsley/react-table/pull/2651/files - unrelated to this issue but happens to partially fix the crash
const isSelected = row.isSelected
->const isSelected = id in state.selectedRowIds
- Fixes #2171
- https://github.com/tannerlinsley/react-table/pull/2666/files -
const isSelected = row.isSelected
->const isSelected = state.selectedRowIds[id]
- Fixes #2659 & 2171
- TanStack/table#2833
- Another "Cannot read property 'isGrouped' of undefined" error, not sure if they're using manualPagination or if it's the same root cause