feat(core): add auto pagination to fit rows to container height#339
Merged
Conversation
Widen `pagination.length` to `number | 'auto'`. When set to 'auto' the table measures its (height-constrained) host container, subtracts the header and footer heights, and divides by the row height to display as many rows as fit. A ResizeObserver and an afterRenderEffect keep the page size in sync with container resizes and async data loads; measurement no-ops safely on SSR/jsdom or unconstrained containers, falling back to a default page size. Adds an "Auto pagination" docs example demonstrating a fixed-height flex wrapper with a live height control.
The _source.ts snippet files consumed by the docs examples are gitignored and generated by scripts/generate-sources.mjs. That script only ran via prebuild:docs, so a fresh clone running `npm start` failed with "Could not resolve './_source'". Add a prestart hook so the files are generated before the dev server starts.
Add p-3 padding to the auto-pagination demo wrapper and make it resizable like a text area (resize: vertical). A ResizeObserver syncs drag-resizes back into the height control so both interactions stay in step and the auto page size recalculates.
|
🎉 This PR is included in version 5.1.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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
Adds support for automatic pagination that dynamically adjusts the number of visible rows based on the available container height. This allows tables to fill their parent container while maintaining a consistent row height, with pagination controls adapting as the container is resized.
Key Changes
Core library (
projects/core/)TableConfig.pagination.lengthto accept'auto'in addition to numeric valuesautoPageSizesignal to track the measured page size for auto-pagination modeResizeObserver-based measurement in_setupAutoPagination()to detect container/table size changes_measureAutoPageSize()to calculate how many rows fit based on available height, row height, and header/footer heightsafterRenderEffecthook to re-measure after data/config changes (e.g., async data loads)processedDatacomputed signal to use measured page size whenlength: 'auto'isAutoPaginationcomputed signal to track auto mode stateDEFAULT_AUTO_ROWS = 10as fallback before measurement completesangular-generic-tablea block element (required for height constraints)TableConfigJSDoc to document the new'auto'optionDocs app (
projects/docs/)AutoPaginationComponentexample demonstrating the featureResizeObserversync to height control/auto-paginationto app routingTests (
projects/core/)Implementation Details
ResizeObserverto monitor both the host element and table element for size changesheight: 420pxormax-height: 100%)DEFAULT_AUTO_ROWS(10) until measurement completes, ensuring pagination works immediatelyhttps://claude.ai/code/session_01DgAfyT6dwHcsR9wztyHJM8