Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Use pagination for numbered links and pagination-arrow for compact arrow controls.
Number pagination
Use this when you want numbered page links with `Previous`, `Next`, and ellipsis handling.
Page 4 of 12
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/pagination/pagination.svelte
table/pagination/index.ts
Folder Structure
Folder Structure
Usage
usage.svelte
Props
Number pagination props
| Name | Type | Default | Description |
|---|---|---|---|
currentPage | number | required | Current page number. Use a `1`-based value. |
pageCount | number | required | Total number of pages. |
canPreviousPage | boolean | required | Disable previous actions when the current page is the first page. |
canNextPage | boolean | required | Disable next actions when the current page is the last page. |
onPrevious | () => void | required | Runs when the previous control is pressed. |
onNext | () => void | required | Runs when the next control is pressed. |
onGoToPage | (page: number) => void | required | Runs with a `1`-based page number. |
siblingCount | number | 1 | How many page links to show on each side of the active page. |
Arrow pagination
Use this when you want compact first, previous, next, and last controls with range details.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
table/pagination-arrow/pagination-arrow.svelte
table/pagination-arrow/index.ts
Folder Structure
Folder Structure
Usage
usage.svelte
Props
Arrow pagination props
| Name | Type | Default | Description |
|---|---|---|---|
currentPage | number | required | Current page number. Use a `1`-based value. |
pageCount | number | required | Total number of pages. |
canPreviousPage | boolean | required | Disable previous actions when the current page is the first page. |
canNextPage | boolean | required | Disable next actions when the current page is the last page. |
onPrevious | () => void | required | Runs when the previous control is pressed. |
onNext | () => void | required | Runs when the next control is pressed. |
onGoToPage | (page: number) => void | required | Runs with a `1`-based page number. |
siblingCount | number | 1 | How many page links to show on each side of the active page. |
pageSize | number | 1 | Items shown per page. Used to render the visible item range. |
totalItems | number | pageCount * pageSize | Total items across all pages. |
class | string | "" | Optional class for the root navigation wrapper. |
Examples
Coming soon.