Crate leptos_pagination

Expand description

Pagination for Leptos.

This crate contains hooks and components for easy pagination of data. It provides efficient loading, caching and displaying of large data. At the same time it is very easy to use even for small datasets.

§Usage

pub struct Book {
    title: String,
}

// Implement one of the loader traits for this struct (not shown here, see below).
pub struct BookLoader;

let state = PaginationState::new_store();

view! {
    <ul>
        <PaginatedFor loader=BookLoader query=() state item_count_per_page=10 let:idx_book>
            // idx_book is a tuple containing the index and the book data
            <li>{idx_book.1.title.clone()}</li>
        </PaginatedFor>
    </ul>

    <PaginationPrev state>"Prev"</PaginationPrev>
    <PaginationNext state>"Next"</PaginationNext>

    <nav>
        <PaginationPages state />
    </nav>
}

§Loading data

Loading data is done through implementing one of the various Loader traits. Depending on your use case you should implement the trait that best fits your needs:

MemoryLoader: If your dataset is already in memory like in a Vec, HashSet, array, …
PaginatedLoader: If your data source provides data in pages (independent of if you use UI pagination or virtualization).
ExactLoader: If your data source can provide an exact range of items (start index to end index).
Loader: If none of the above fit your needs, you can implement this trait to provide your own loading logic.

Please refer to the documentation and the examples to see how to implement these traits.

§Components

This crate provides several components designed to help you with the pagination of data. These components are:

PaginatedFor: A component that displays a list of items in a paginated manner.
PaginationPages: A component that displays the buttons to jump to a certain page.
PaginationNext: A component that displays a button to navigate to the next page.
PaginationPrev: A component that displays a button to navigate to the previous page.

Please refer to the examples to see how to use these components.

§Hooks

All components are just thin wrappers that add commonly used html to hook functions that implement the actual logic. So if you want to customize your markup more than what the pre-made components allow you can use these hooks directly.

These are the hooks:

use_pagination: Logic for PaginatedFor. Handles loading items on-demand from the data source and caching them.
use_pagination_controls: Logic for PaginationPages. Returns page ranges that can be used to display pagination controls.

If you want to implement your own custom components using these hooks, please have a look at the pre-made components in this crate. You’ll see that there is really nothing special about them.

Modules§

cache
hook
item_state

Structs§

ExactLoaderMarker
ItemWindow: This is bascially a signal of a slice of the internal cache.
LoadError: Props for the LoadError slot.
LoadErrorBuilder: Builder for LoadError instances.
LoadedItems: Return type of Loader::load_items.
LoaderMarker
Loading: Props for the Loading slot.
LoadingBuilder: Builder for Loading instances.
MemoryLoaderMarker
PaginatedForProps: Props for the PaginatedFor component.
PaginatedLoaderMarker
PaginationControls: Return type of use_pagination_controls. It provides a bunch of signals to easily build a pagination component.
PaginationNextProps: Props for the PaginationNext component.
PaginationPagesProps: Props for the PaginationPages component.
PaginationPrevProps: Props for the PaginationPrev component.
PaginationRangeProps: Props for the PaginationRange component.
PaginationState: The state of pagination.
UsePaginationControlsOptions: Options for [use_pagination].
UsePaginationOptions

Enums§

PaginatedCount: Return type of PaginatedLoader::count.

Traits§

ExactLoader: Trait for loading items on-demand from an data source that let’s you request precise ranges.
InternalLoader: This is the trait for the actually used internal loaders. This trait is automatically implemented for all the user facing loader traits.
Loader: Loader trait for loading items on-demand from a data source.
MemoryLoader: Loader trait for loading items on-demand from an in-memory data source.
PaginatedLoader: Loader trait for loading items on-demand from a paginated data source.
PaginationStateStoreFields

Functions§

PaginatedFor: Quite similar to Leptos’ <For> this displays a list of items.
PaginationNext: Button to navigate to the next page.
PaginationPages: A component that renders pagination page controls.
PaginationPrev: Button to navigate to the previous page.
PaginationRange: Used by PaginationPages to render the pagination ranges (button groups).
use_pagination: Hook for the pagination logic.
use_pagination_controls: Hook for pagination page controls.