fix(datatables): keep the current page across dataset refreshes - #13271
Open
irfanfandi wants to merge 5 commits into
Open
irfanfandi wants to merge 5 commits into
irfanfandi wants to merge 5 commits into
Conversation
Datatable passed autoResetExpanded but left autoResetPageIndex at its TanStack default of true, so any change of the data array identity queued a resetPageIndex. React Query refetches on window focus, which sends every paginated list back to page 1. NestedDatatable had the same gap. Disable the auto reset in both, and clamp pageIndex to the last available page so a shrinking dataset cannot strand the user on an empty page.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #13251
Changes:
Problem
Switching away from the Portainer tab and back sends any paginated table back to
page 1. It affects every list view — containers, stacks, images, volumes,
Kubernetes — not just one.
Cause
Datatable.tsxpassesautoResetExpanded: falsetouseReactTablebut leavesautoResetPageIndexat its TanStack default oftrue. On every change of thedataarray identity,getCoreRowModel'sonChangecallstable._autoResetPageIndex(), which queuesresetPageIndex()on a microtask.React Query refetches on window focus, which produces a new array, so returning
to the tab resets the page.
NestedDatatable.tsxhas the same gap, and expandedrows survive refetches (that is what
autoResetExpanded: falseis for), sonested tables hit it too.
Fix
Set
autoResetPageIndex: falsein both components.On its own that would strand the user: if the dataset shrinks — items removed, or
a search narrowing the results — the retained page index can point past the end
and the table renders empty with no obvious way back. So each component also
clamps
pageIndexto the last available page when it falls out of range.The clamp is skipped for server-side pagination, where the parent owns the page
state through the
page/onPageChangeprops. That path already hadautoResetPageIndexeffectively disabled viamanualPagination: true, so itsbehaviour is unchanged.
Note on #13221
#13221 addresses the same underlying defect for the containers view only, by
passing
autoResetPageIndex: falsethroughextendTableOptionsinContainersDatatable.tsx. This change fixes it once in the shared components soevery table benefits, and adds the out-of-range clamp that the per-view fix does
not cover. Happy to rebase or close in favour of whichever the maintainers
prefer.
Tests
Added to
Datatable.test.tsxand a newNestedDatatable.test.tsx:Both were confirmed to fail before the change and pass after.
Verification
pnpm test— 305 files, 2237 tests passing (baseline 2233, plus the 4 added)pnpm typecheck— 20 pre-existing errors, unchanged, none in the touched filespnpm exec eslinton the touched files — 0 errors, same 4 pre-existing warnings as ondeveloppnpm exec prettier --check— clean