Incorrect pagination behavior with autoResetPageIndex set to true when deleting rows
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28.4k
- Forks
- 3.6k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 10
Description
Describe the bug
Currently working on a table with pagination and a display column that removes the current row.
- The data for the table is stored in react state and passed into the data prop.
- The display column performs a removal by filtering the current row out of the state.
Accordingly, autoResetPageIndex needs to be set to false to prevent the pageIndex state from resetting on every row delete.
Everything works well until all of the rows are deleted on the last page.
The pageIndex state doesnt update, even though the getPageCount response does.
I would assume that even with autoResetPageIndex set to false, the pageIndex state should update when data is deleted and the page count decreases.
Your minimal, reproducible example
will provide on request
Steps to reproduce
Steps To preproduce
- Create a table that:
- uses pagination
- has a display column to remove the current row
- has autoResetPageIndex set to false
- has enough data to populate more than one page
- navigate to the last page
- remove all of the rows by clicking the delete buttons one by one
Expected behavior
Expected:
When the last row is removed the table state should decrease the pageIndex state to match the page count
Actual:
pageIndex is unchanged and there is no data shown since the pageIndex is out of range relative to the new number of pages
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
issue happens on any OS with any browser
react-table version
8.5.15
TypeScript version
No response
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by creating the promised minimal reproducible example using pagination, a deleting display column, and autoResetPageIndex set to false. Trace how pagination state responds when deleting the final row on the last page, then verify that pageIndex remains within the updated page count and that the relevant pagination tests pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100