Add Infinite Scroll Mode for List Views#773
Open
Alwinator wants to merge 4 commits into
Open
Conversation
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.
Summary
This PR adds an optional infinite scroll mode to
BaseModelViewlist views. When enabled, items are loaded dynamically as the user scrolls down, replacing traditional DataTables pagination with a smoother, continuous browsing experience.Additionally, the export functionality has been refactored to fetch all matching records from the API (in paginated batches) before generating the export file, ensuring complete exports regardless of the current page or scroll position.
Changes
New Features
infinite_scrollattribute onBaseModelView(bool, defaultFalse)When set to
True, the list view uses a new infinite-scroll template instead of the default paginated DataTable.list_infinite.html— New Jinja2 template for infinite scroll list viewsIncludes a scroll sentinel element, intersection observer-based loading, sort headers, search input, select-all checkbox, and a scroll-to-top button.
list_infinite.js— Client-side logic for infinite scrollHandles paginated fetching, sorting, searching, SearchBuilder integration, row selection, scroll position persistence, and URL state management.
export_all.js— New paginated export utilityFetches all records from the API in batches (500 per page) with a progress overlay, then generates CSV/Excel/PDF/Print exports client-side. Used by both the classic list view and the infinite scroll view.
Modified Files
starlette_admin/views.py— Addedinfinite_scrollattribute, auto-switcheslist_templatetolist_infinite.htmlwhen enabled, includesnoItemsMessagein the JS model config.starlette_admin/statics/js/list.js— Export buttons now useExportAll.exportAll()instead of DataTables built-in export (fetches all records).starlette_admin/templates/list.html— Added<script>tag forexport_all.js..gitignore— Added.DS_Store.Usage
Testing
tests/test_infinite_scroll.pywith 9 tests covering:infiniteScroll,noItemsMessage)export_all.js,list_infinite.js)