Struct PaginatedForProps 

pub struct PaginatedForProps<T, L, Q, CF, V, M>
where
    T: Send + Sync + 'static,
    L: InternalLoader<M, Item = T, Query = Q> + 'static,
    L::Error: Send + Sync,
    Q: Send + Sync + 'static,
    CF: Fn((usize, Arc<T>)) -> V + Send + Clone + 'static,
    V: IntoView,
{
    pub loader: L,
    pub query: Signal<Q>,
    pub state: Store<PaginationState>,
    pub item_count_per_page: Signal<usize>,
    pub overscan_page_count: usize,
    pub loading: Option<Loading>,
    pub load_error: Option<LoadError>,
    pub children: CF,
    pub _marker: PhantomData<(M, L)>,
}

Props for the PaginatedFor component.

Quite similar to Leptos’ <For> this displays a list of items.

But these items are loaded and cached on-demand using the provided loader.

Example

pub struct Book {
    title: String,
    author: String,
}

let state = PaginationState::new_store();

view! {
    <ul>
        <PaginatedFor
            loader=BookLoader
            query=()
            state
            item_count_per_page=20
            let:idx_book
        >
            // Shown when the data has finished loading.
            <li class={if idx_book.0 % 2 == 0 { "even" } else { "odd" }}>
                <h3>{idx_book.1.title.clone()}</h3>
                <p>{idx_book.1.author.clone()}</p>
            </li>

            // Shown while the data is loading.
            <Loading slot>
                <li class="loading">Loading...</li>
            </Loading>
        </PaginatedFor>
    </ul>

    <div class="pagination-buttons">
        <PaginationPrev state attr:class="pagination-prev">
            "Previous"
        </PaginationPrev>
        <PaginationNext state attr:class="pagination-next">
            "Next"
        </PaginationNext>
    </div>
}

pub struct BookLoader;

impl ExactLoader for BookLoader {
    type Item = Book;
    type Query = ();
    type Error = ();

    async fn load_items(&self, range: Range<usize>, query: &Self::Query) -> Result<Vec<Self::Item>, Self::Error> {
        todo!()
    }

    async fn item_count(&self, _query: &Self::Query) -> Result<Option<usize>, Self::Error> {
        todo!()
    }
}

For more in-depth demonstration, please refer to the example pagination_rest_api.

Required Props

• loader: [L]
  • The loader to get the data on-demand.
• query: impl Into<Signal<Q>>
  • The query to get the data on-demand.
• state: [Store<PaginationState>]

  • The pagination state.

    Used to communicate between the pagination controls and this component.

• item_count_per_page: impl Into<Signal<usize>>
  • How many items to display per page.
• children: [CF]
  • The normal children are rendered when an item is loaded. This would be a normal <li> or <tr> element for example.

Optional Props

• overscan_page_count: usize

  • How many pages to load before and after the current page.

    A value of 1 means that the current page as well as the one before and after will be loaded. Defaults to 1.

• loading: Loading
  • Slot that is rendered instead of children when the data is being loaded. This is recommended to be used to show a loading skeleton.
• load_error: LoadError
  • Slot that is rendered instead of children when an error occurs.
• _marker: PhantomData<(M, L)>

Fields

loader: L

The loader to get the data on-demand.

query: Signal<Q>

The query to get the data on-demand.

state: Store<PaginationState>

The pagination state.

Used to communicate between the pagination controls and this component.

item_count_per_page: Signal<usize>

How many items to display per page.

overscan_page_count: usize

How many pages to load before and after the current page.

A value of 1 means that the current page as well as the one before and after will be loaded. Defaults to 1.

loading: Option<Loading>

Slot that is rendered instead of children when the data is being loaded. This is recommended to be used to show a loading skeleton.

load_error: Option<LoadError>

Slot that is rendered instead of children when an error occurs.

children: CF

The normal children are rendered when an item is loaded. This would be a normal <li> or <tr> element for example.

_marker: PhantomData<(M, L)>

Implementations

impl<T, L, Q, CF, V, M> PaginatedForProps<T, L, Q, CF, V, M>

where T: Send + Sync + 'static, L: InternalLoader<M, Item = T, Query = Q> + 'static, L::Error: Send + Sync, Q: Send + Sync + 'static, CF: Fn((usize, Arc<T>)) -> V + Send + Clone + 'static, V: IntoView,

pub fn builder() -> PaginatedForPropsBuilder<T, L, Q, CF, V, M, ((), (), (), (), (), (), (), (), ())>

Create a builder for building PaginatedForProps. On the builder, call .loader(...), .query(...), .state(...), .item_count_per_page(...), .overscan_page_count(...)(optional), .loading(...)(optional), .load_error(...)(optional), .children(...), ._marker(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of PaginatedForProps.

Trait Implementations

impl<T, L, Q, CF, V, M> Props for PaginatedForProps<T, L, Q, CF, V, M>

where T: Send + Sync + 'static, L: InternalLoader<M, Item = T, Query = Q> + 'static, L::Error: Send + Sync, Q: Send + Sync + 'static, CF: Fn((usize, Arc<T>)) -> V + Send + Clone + 'static, V: IntoView,

type Builder = PaginatedForPropsBuilder<T, L, Q, CF, V, M>

fn builder() -> Self::Builder