TanStack / TanStack/table

Incorrect pagination behavior with autoResetPageIndex set to true when deleting rows

Open
#4,994 1 comment 3 reactions 0 assignees View on GitHub

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

  1. 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
  1. navigate to the last page
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.