Skip to content

Add Infinite Scroll Mode for List Views#773

Open
Alwinator wants to merge 4 commits into
jowilf:mainfrom
Alwinator:add-infinite-scroll
Open

Add Infinite Scroll Mode for List Views#773
Alwinator wants to merge 4 commits into
jowilf:mainfrom
Alwinator:add-infinite-scroll

Conversation

@Alwinator

Copy link
Copy Markdown
Contributor

Summary

This PR adds an optional infinite scroll mode to BaseModelView list 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_scroll attribute on BaseModelView (bool, default False)
    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 views
    Includes 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 scroll
    Handles paginated fetching, sorting, searching, SearchBuilder integration, row selection, scroll position persistence, and URL state management.

  • export_all.js — New paginated export utility
    Fetches 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 — Added infinite_scroll attribute, auto-switches list_template to list_infinite.html when enabled, includes noItemsMessage in the JS model config.
  • starlette_admin/statics/js/list.js — Export buttons now use ExportAll.exportAll() instead of DataTables built-in export (fetches all records).
  • starlette_admin/templates/list.html — Added <script> tag for export_all.js.
  • .gitignore — Added .DS_Store.

Usage

from starlette_admin.contrib.sqla import ModelView

class MyModelView(ModelView):
    infinite_scroll = True  # Enable infinite scroll

Testing

  • Added tests/test_infinite_scroll.py with 9 tests covering:
    • Template auto-switching logic
    • Custom template preservation
    • Infinite scroll template rendering
    • API pagination (skip/limit)
    • JS config flags (infiniteScroll, noItemsMessage)
    • Script inclusion (export_all.js, list_infinite.js)
  • All existing tests continue to pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant