feat: add onItemsChange callback to PaginatedTable#3300
Merged
Conversation
Adds an optional onItemsChange callback prop that fires whenever the visible items change (page navigation, fetch, page size change). Enables consumers to react to table data changes without relying on slot prop workarounds.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
andrewzamojc
marked this pull request as ready for review
April 13, 2026 20:04
andrewzamojc
enabled auto-merge (squash)
April 14, 2026 20:43
laurakwhit
reviewed
Apr 14, 2026
Comment on lines
+187
to
+189
| $: if (onItemsChange && $store.visibleItems) { | ||
| onItemsChange($store.visibleItems); | ||
| } |
Collaborator
There was a problem hiding this comment.
Seems like ideally this should be migrated to Svelte 5. That way we could have a $bindable visibleItems prop and let consumers react in their own $effect.
In the meantime, this currently depends on the full $store derived store and will get triggered every time any pagination state changes. Maybe we want to guard with a reference check here?
Suggested change
| $: if (onItemsChange && $store.visibleItems) { | |
| onItemsChange($store.visibleItems); | |
| } | |
| let previousItems; | |
| $: if (onItemsChange && $store.visibleItems !== previousItems) { | |
| previousItems = $store.visibleItems; | |
| onItemsChange($store.visibleItems); | |
| } |
Also, thought it might be worth noting that this fires on the initial load. Not sure if that's expected behavior or not. If we wanted to prevent that we could add a check like so ⬇️
if (previousItems !== undefined) {
onItemsChange($store.visibleItems);
}
Contributor
Author
There was a problem hiding this comment.
I think the initial load one might be necessary to get the first set.
I'll add previous items. It doesn't seem right to fire when the reference hasn't changed 👍
Tracks previous items reference to avoid redundant callbacks when the store re-evaluates but visibleItems hasn't actually changed. Initial call still fires since previousItems starts as undefined.
laurakwhit
approved these changes
Apr 15, 2026
rossnelson
added a commit
that referenced
this pull request
Apr 20, 2026
Auto-generated version bump from 2.48.3 to 2.48.4 Specific version: 2.48.4 Changes included: - [`7cf1be53`](7cf1be5) Adjust breadcrumb spacing and min-height (#3304) - [`c9834815`](c983481) Add missing Nexus Operation events to event groups (#3309) - [`5c7aa86c`](5c7aa86) feat: add onItemsChange callback to PaginatedTable (#3300) - [`66d3cf68`](66d3cf6) Update pre-release badge to secondary in Workers (#3310) - [`393e84de`](393e84d) Keep Pending Activities/Operations at the top of Timeline and Compact view (#3307) - [`9f721347`](9f72134) Update error link in codec-server-error-banner (#3313) - [`e698bda3`](e698bda) Add class prop to BottomNav component (#3314) - [`55767fc9`](55767fc) Add overrides (#3317) - [`256cd274`](256cd27) refactor(decode-payload): clean up decode-payload.ts API surface (#3302) - [`04f8c251`](04f8c25) Make input height full so its easier to click into the input (#3318) - [`b2231056`](b223105) Workflows Table Row Density (#3285) - [`0b2ce4fd`](0b2ce4f) PR Review Notifications (#3322) - [`84618196`](8461819) feat: serverless worker deployment CRUD (#3236) Co-authored-by: rossnelson <[email protected]>
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
2 participants
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.
Summary
onItemsChangecallback prop to theapi-paginatedPaginatedTablecomponent$store.visibleItemschanges (initial fetch, page navigation, cached page, page size change)onError,onShiftUp,onShiftDown,onSpaceMotivation: Cloud UI's billing invoices page (DT-3724) needs to sync a chart component with the table's visible data. The current approach uses a comma expression in the slot to extract
visibleItems, which is fragile. This callback provides a clean, first-class way to observe item changes.This table needs the prop, for this chart.
Test plan
I built ui and tested the new prop in cloud-ui locally. Works well.
onItemsChangeis not providedonItemsChangecallback and verify it fires on initial load