### Install Development Tools (Bash)

Source: https://github.com/synphonyte/leptos-windowing/blob/main/leptos-pagination/examples/rest_api/README.md

Installs necessary development tools including Trunk for Rust web development, Tailwind CSS for styling, and the wasm32-unknown-unknown target for WebAssembly compilation.

```bash
cargo install trunk
npm install -D tailwindcss
rustup target add wasm32-unknown-unknown
```

--------------------------------

### Watch Tailwind CSS (Bash)

Source: https://github.com/synphonyte/leptos-windowing/blob/main/leptos-pagination/examples/rest_api/README.md

Starts the Tailwind CSS watcher to automatically compile CSS changes from input.css to output.css whenever the source files are modified.

```bash
npx tailwindcss -i ./input.css -o ./style/output.css --watch
```

--------------------------------

### Serve Leptos Application (Bash)

Source: https://github.com/synphonyte/leptos-windowing/blob/main/leptos-pagination/examples/rest_api/README.md

Starts the Trunk development server for the Leptos application, which includes live reloading and automatically opens the application in the default web browser.

```bash
trunk serve --open
```

--------------------------------

### Implement pagination with use_pagination in Rust

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The use_pagination hook manages data windowing and caching. It requires a loader implementation and returns an ItemWindow to track the visible range and item states.

```rust
use leptos::prelude::*;
use leptos_pagination::{
	use_pagination, UsePaginationOptions, PaginationState,
	MemoryLoader, ItemWindow,
};
use leptos_windowing::item_state::ItemState;
use reactive_stores::{Store, StoreFieldIterator};
use std::ops::Range;

pub struct Item { pub name: String }
pub struct ItemLoader;

impl MemoryLoader for ItemLoader {
	type Item = Item;
	type Query = ();
	fn load_items(&self, range: Range<usize>, _: &()) -> Vec<Item> { vec![] }
	fn item_count(&self, _: &()) -> usize { 50 }
}

#[component]
pub fn CustomPaginatedList() -> impl IntoView {
	let state = PaginationState::new_store();

	// Get the item window with cached items
	let window: ItemWindow<Item> = use_pagination(
		state,
		ItemLoader,
		(),                                         // query signal
		20,                                         // items per page
		UsePaginationOptions::default()
			.overscan_page_count(1),                // pre-load adjacent pages
	);

	view! {
		<ul>
			// Iterate over the visible range
			<For each=move || window.range.get() key=|idx| *idx let:index>
				{
					move || {
						// Access cached item state
						match &*window.cache.items().at_unkeyed(index).read() {
							ItemState::Loaded(item) => {
								view! { <li>{item.name.clone()}</li> }.into_any()
							}
							ItemState::Loading => {
								view! { <li class="loading">"Loading..."</li> }.into_any()
							}
							ItemState::Error(err) => {
								view! { <li class="error">{err.clone()}</li> }.into_any()
							}
							ItemState::Placeholder => {
								view! { <li class="placeholder"></li> }.into_any()
							}
						}
					}
				}
			</For>
		</ul>
	}
}
```

--------------------------------

### Manage Pagination State with PaginationState Store

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The PaginationState store provides a reactive interface to track current page, total pages, and navigation status. It allows for programmatic control over pagination via helper methods.

```rust
use leptos::prelude::*;
use leptos_pagination::PaginationState;
use reactive_stores::Store;

#[component]
pub fn PaginationExample() -> impl IntoView {
    let state: Store<PaginationState> = PaginationState::new_store();

    let current_page = move || state.current_page().get();
    let page_count = move || state.page_count().get();

    let go_next = move |_| PaginationState::next(state);
    let go_prev = move |_| PaginationState::prev(state);
    let go_to_page = move |page: usize| state.current_page().set(page);

    let is_first = move || PaginationState::is_first_page(state);
    let is_last = move || PaginationState::is_last_page(state);

    view! {
        <div class="pagination-info">
            "Page " {move || current_page() + 1} " of "
            {move || page_count().map(|c| c.to_string()).unwrap_or("?".to_string())}
        </div>

        <button on:click=go_prev disabled=is_first>"Previous"</button>
        <button on:click=move |_| go_to_page(0)>"First"</button>
        <button on:click=go_next disabled=is_last>"Next"</button>
    }
}
```

--------------------------------

### Implement Pagination with PaginatedFor Component

Source: https://github.com/synphonyte/leptos-windowing/blob/main/leptos-pagination/README.md

Demonstrates how to use the PaginatedFor component alongside navigation controls to display paginated data in a Leptos view. It requires a defined loader and a pagination state store.

```rust
pub struct Book {
    title: String,
}

// Implement one of the loader traits for this struct
pub struct BookLoader;

let state = PaginationState::new_store();

view! {
    <ul>
        <PaginatedFor loader=BookLoader query=() state item_count_per_page=10 let:idx_book>
            <li>{idx_book.data.title.clone()}</li>
        </PaginatedFor>
    </ul>

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

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

--------------------------------

### Build navigation controls with use_pagination_controls in Rust

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The use_pagination_controls hook generates page ranges and state signals for UI navigation. It simplifies rendering page buttons, separators, and handling active states.

```rust
use leptos::prelude::*;
use leptos_pagination::{
	use_pagination_controls, UsePaginationControlsOptions,
	PaginationControls, PaginationState,
};
use reactive_stores::Store;

#[component]
pub fn CustomPaginationControls(state: Store<PaginationState>) -> impl IntoView {
	let PaginationControls {
		current_page,       // Signal<usize> - current page (0-indexed)
		start_range,        // Signal<Vec<usize>> - pages at beginning
		current_range,      // Signal<Vec<usize>> - pages around current
		end_range,          // Signal<Vec<usize>> - pages at end
		show_separator_before,  // Signal<bool> - show "..." before current
		show_separator_after,   // Signal<bool> - show "..." after current
		page_count_error,   // Signal<Option<String>> - error message
	} = use_pagination_controls(
		state,
		UsePaginationControlsOptions::default()
			.display_page_count(5)   // pages around current
			.margin_page_count(1),   // pages at edges
	);

	view! {
		// Show error if page count couldn't be determined
		{move || page_count_error.get().map(|e| view! { <span class="error">{e}</span> })}

		// Render start pages (e.g., [1])
		<For each=move || start_range.get() key=|p| *p let:page>
			<button
				class:active={move || current_page.get() == page}
				on:click=move |_| state.current_page().set(page)
			>
				{page + 1}
			</button>
		</For>

		// Separator before current range
		<Show when=move || show_separator_before.get()>
			<span class="ellipsis">"..."</span>
		</Show>

		// Render current range pages
		<For each=move || current_range.get() key=|p| *p let:page>
			<button
				class:active={move || current_page.get() == page}
				on:click=move |_| state.current_page().set(page)
			>
				{page + 1}
			</button>
		</For>

		// Separator after current range
		<Show when=move || show_separator_after.get()>
			<span class="ellipsis">"..."</span>
		</Show>

		// Render end pages (e.g., [10])
		<For each=move || end_range.get() key=|p| *p let:page>
			<button
				class:active={move || current_page.get() == page}
				on:click=move |_| state.current_page().set(page)
			>
				{page + 1}
			</button>
		</For>
	}
}
```

--------------------------------

### CacheController for Mutations in Leptos

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

Demonstrates how to use `CacheController` to provide write access for updating, inserting, or removing items in a paginated list without triggering full data reloads. This is useful for direct manipulation of cached data within a Leptos application.

```rust
use leptos::prelude::*;
use leptos_pagination::{
    PaginatedFor,
    PaginationState,
    MemoryLoader,
    cache::CacheController,
};
use std::ops::Range;

pub struct Todo {
    pub id: u32,
    pub text: String,
    pub completed: bool,
}

pub struct TodoLoader;

impl MemoryLoader for TodoLoader {
    type Item = Todo;
    type Query = ();
    fn load_items(&self, range: Range<usize>, _: &()) -> Vec<Todo> { vec![] }
    fn item_count(&self, _: &()) -> usize { 10 }
}

#[component]
pub fn EditableTodoList() -> impl IntoView {
    let state = PaginationState::new_store();

    // Create cache controller for mutations
    let cache_controller: CacheController<Todo> = CacheController::new();

    view! {
        <ul>
            <PaginatedFor
                loader=TodoLoader
                query=()
                state
                item_count_per_page=10
                cache_controller           // Pass controller to component
                let:idx_todo
            >
                <li>
                    <span>{idx_todo.data.text.clone()}</span>

                    // Toggle completion using WindowItem methods
                    <button on:click={
                        let data = idx_todo.data.clone();
                        let idx_todo = idx_todo.clone();
                        move |_| {
                            let updated = Todo {
                                id: data.id,
                                text: data.text.clone(),
                                completed: !data.completed,
                            };
                            idx_todo.update(updated);
                            // Also update your data source here!
                        }
                    }>
                        "Toggle"
                    </button>

                    // Delete using WindowItem
                    <button on:click={
                        let idx_todo = idx_todo.clone();
                        move |_| {
                            idx_todo.remove();
                            // Also delete from your data source!
                        }
                    }>
                        "Delete"
                    </button>

                    // Insert new item after this one
                    <button on:click={
                        let idx_todo = idx_todo.clone();
                        move |_| {
                            let new_todo = Todo {
                                id: 999,
                                text: "New Todo".to_string(),
                                completed: false,
                            };
                            idx_todo.insert_after(new_todo);
                            // Also insert in your data source!
                        }
                    }>
                        "Add After"
                    </button>
                </li>
            </PaginatedFor>
        </ul>

        // Or use CacheController directly
        <button on:click=move |_| {
            cache_controller.update_item(0, Todo {
                id: 1,
                text: "Updated first item".to_string(),
                completed: true,
            });
        }>
            "Update First Item"
        </button>
    }
}

```

--------------------------------

### Implement ExactLoader for range-based data fetching

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The ExactLoader trait is designed for data sources that support precise index-based range queries. It requires implementing load_items and item_count to interface with databases using LIMIT and OFFSET clauses.

```rust
use std::ops::Range;
use leptos_pagination::ExactLoader;

pub struct Product {
	pub id: u32,
	pub name: String,
	pub price: f64,
}

pub struct ProductLoader;

impl ExactLoader for ProductLoader {
	type Item = Product;
	type Query = ();
	type Error = String;

	async fn load_items(
		&self,
		range: Range<usize>,
		_query: &Self::Query,
	) -> Result<Vec<Self::Item>, Self::Error> {
		let products: Vec<Product> = sqlx::query_as!(
			Product,
			"SELECT id, name, price FROM products LIMIT $1 OFFSET $2",
			range.len() as i64,
			range.start as i64
		)
		.fetch_all(&pool)
		.await
		.map_err(|e| e.to_string())?;

		Ok(products)
	}

	async fn item_count(&self, _query: &Self::Query) -> Result<Option<usize>, Self::Error> {
		let count: i64 = sqlx::query_scalar!("SELECT COUNT(*) FROM products")
			.fetch_one(&pool)
			.await
			.map_err(|e| e.to_string())?;

		Ok(Some(count as usize))
	}
}
```

--------------------------------

### Implement generic Loader for custom pagination

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The Loader trait provides a flexible interface for non-standard pagination requirements. It allows for custom chunk sizes and returns a LoadedItems struct to handle discrepancies between requested and actual loaded ranges.

```rust
use std::ops::Range;
use leptos_pagination::{Loader, LoadedItems};

pub struct CustomLoader;

impl Loader for CustomLoader {
	const CHUNK_SIZE: Option<usize> = Some(50);

	type Item = String;
	type Query = ();
	type Error = String;

	async fn load_items(
		&self,
		range: Range<usize>,
		_query: &Self::Query,
	) -> Result<LoadedItems<Self::Item>, Self::Error> {
		let items: Vec<String> = fetch_items(range.clone()).await?;

		Ok(LoadedItems {
			items,
			range: range.clone(),
		})
	}

	async fn item_count(&self, _query: &Self::Query) -> Result<Option<usize>, Self::Error> {
		Ok(Some(1000))
	}
}
```

--------------------------------

### Render Paginated Lists with PaginatedFor

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The PaginatedFor component provides a high-level interface for rendering paginated data. It supports custom loaders, loading skeletons, empty states, and error handling, while integrating with navigation components.

```rust
use leptos::prelude::*;
use leptos_pagination::{
    PaginatedFor, PaginationState, PaginationPrev, PaginationNext,
    PaginationPages, Loading, Empty, LoadError, MemoryLoader,
};
use std::ops::Range;

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

pub struct BookLoader;

impl MemoryLoader for BookLoader {
    type Item = Book;
    type Query = ();
    fn load_items(&self, range: Range<usize>, _: &()) -> Vec<Book> { vec![] }
    fn item_count(&self, _: &()) -> usize { 100 }
}

#[component]
pub fn BookList() -> impl IntoView {
    let state = PaginationState::new_store();

    view! {
        <ul class="book-list">
            <PaginatedFor
                loader=BookLoader
                query=()
                state
                item_count_per_page=10
                overscan_page_count=1
                let:idx_book
            >
                <li class={if idx_book.index % 2 == 0 { "even" } else { "odd" }}>
                    <h3>{idx_book.data.title.clone()}</h3>
                    <p>{idx_book.data.author.clone()}</p>
                </li>

                <Loading slot>
                    <li class="loading animate-pulse">
                        <div class="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
                        <div class="h-3 bg-gray-100 rounded w-1/2"></div>
                    </li>
                </Loading>

                <Empty slot>
                    <li class="empty">No books found</li>
                </Empty>

                <LoadError slot let:error>
                    <li class="error">Failed to load: {error}</li>
                </LoadError>
            </PaginatedFor>
        </ul>

        <nav class="pagination-controls">
            <PaginationPrev state attr:class="btn-prev">
                "Previous"
            </PaginationPrev>
            <PaginationPages
                state
                display_page_count=5
                margin_page_count=1
                ul_class="page-list"
                li_class="page-item"
                active_class="page-active"
                anchor_class="page-link"
                separator_class="ellipsis"
            />
            <PaginationNext state attr:class="btn-next">
                "Next"
            </PaginationNext>
        </nav>
    }
}
```

--------------------------------

### Implement MemoryLoader for Synchronous Data

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The MemoryLoader trait allows for efficient, synchronous access to in-memory data structures like vectors. It requires implementing item retrieval based on ranges and a total count method, supporting optional query filtering.

```rust
use std::ops::Range;
use leptos_pagination::MemoryLoader;

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

pub struct BookLoader {
    books: Vec<Book>,
}

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

    fn load_items(&self, range: Range<usize>, _query: &Self::Query) -> Vec<Self::Item> {
        self.books[range.clone()].to_vec()
    }

    fn item_count(&self, _query: &Self::Query) -> usize {
        self.books.len()
    }
}

pub struct FilteredBookLoader {
    books: Vec<Book>,
}

impl MemoryLoader for FilteredBookLoader {
    type Item = Book;
    type Query = String;

    fn load_items(&self, range: Range<usize>, query: &Self::Query) -> Vec<Self::Item> {
        let filtered: Vec<_> = self.books
            .iter()
            .filter(|b| b.title.to_lowercase().contains(&query.to_lowercase()))
            .cloned()
            .collect();
        filtered.get(range).unwrap_or(&[]).to_vec()
    }

    fn item_count(&self, query: &Self::Query) -> usize {
        self.books
            .iter()
            .filter(|b| b.title.to_lowercase().contains(&query.to_lowercase()))
            .count()
    }
}
```

--------------------------------

### Implement PaginatedLoader for Asynchronous APIs

Source: https://context7.com/synphonyte/leptos-windowing/llms.txt

The PaginatedLoader trait is designed for fetching data from remote REST APIs. It handles asynchronous page requests and provides metadata about the total item count to support UI pagination controls.

```rust
use leptos_pagination::{PaginatedLoader, PaginatedCount};
use gloo_net::http::Request;
use serde::Deserialize;

#[derive(Deserialize, Clone)]
pub struct Brewery {
    pub id: String,
    pub name: String,
    pub city: Option<String>,
    pub country: Option<String>,
    pub website_url: Option<String>,
}

#[derive(Default, Clone)]
pub struct BreweryQuery {
    pub sort_by: Option<String>,
    pub sort_order: Option<String>,
}

pub struct BreweryLoader;

impl PaginatedLoader for BreweryLoader {
    const PAGE_ITEM_COUNT: usize = 20;

    type Item = Brewery;
    type Query = BreweryQuery;
    type Error = anyhow::Error;

    async fn load_page(
        &self,
        page_index: usize,
        query: &Self::Query,
    ) -> Result<Vec<Self::Item>, Self::Error> {
        let mut url = format!(
            "https://api.openbrewerydb.org/v1/breweries?page={}&per_page={}",
            page_index + 1,
            Self::PAGE_ITEM_COUNT
        );

        if let Some(ref sort_by) = query.sort_by {
            url.push_str(&format!("&sort={}:{}",
                sort_by,
                query.sort_order.as_deref().unwrap_or("asc")
            ));
        }

        let resp: Vec<Brewery> = Request::get(&url)
            .send()
            .await?
            .json()
            .await?;

        Ok(resp)
    }

    async fn count(&self, _query: &Self::Query) -> Result<Option<PaginatedCount>, Self::Error> {
        #[derive(Deserialize)]
        struct MetaResponse { total: usize }

        let resp: MetaResponse = Request::get("https://api.openbrewerydb.org/v1/breweries/meta")
            .send()
            .await?
            .json()
            .await?;

        Ok(Some(PaginatedCount::Items(resp.total)))
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.