- components
- ›
- pagination
- ›
- svelte
Pagination
Navigate between multiple pages of content.
ID | Name | Country | |
---|---|---|---|
1 | Robin Cummerata | Tara.Barrows25@gmail.com | Djibouti |
2 | Devin Fritsch-Parker | Nadia.Dietrich55@yahoo.com | Uganda |
3 | Steve Abbott | Patience.Dickinson36@hotmail.com | Russian Federation |
4 | Valerie Shanahan | Adriana.Russel23@gmail.com | Saint Martin |
5 | Mr. Neal Satterfield | Fredy_Cormier@gmail.com | Tuvalu |
6 | Edmund Mitchell | Marques.Huel@hotmail.com | United States of America |
7 | Angela Blanda | Kavon_Marquardt14@hotmail.com | Botswana |
8 | Ms. Eleanor Terry | Colton_Walker@yahoo.com | Lesotho |
9 | Karla Kuhn | Dawn.Walsh10@gmail.com | Kazakhstan |
10 | Cecil Spinka | Allan69@yahoo.com | Ukraine |
Page Size
ID | Name | Country | |
---|---|---|---|
1 | Helen Romaguera DDS | Mandy1@yahoo.com | Svalbard & Jan Mayen Islands |
2 | Catherine Heaney DVM | Emory0@yahoo.com | New Caledonia |
3 | Lisa Green | Eldon_Bailey17@gmail.com | Northern Mariana Islands |
4 | Hazel Von | Anabel23@hotmail.com | New Zealand |
5 | Nadine Wolff | Katlyn_Wisozk@hotmail.com | Suriname |
6 | Verna Bogan | Kacie.Ullrich59@gmail.com | Curacao |
7 | Clara Denesik DDS | Gladyce.Schuppe95@yahoo.com | Mali |
8 | Jodi Kunze | Gwendolyn.Krajcik@hotmail.com | Sudan |
9 | Mrs. Regina Langosh | Sharon.Pfannerstill69@yahoo.com | Pakistan |
10 | Joyce Boehm-Ratke | Vanessa33@gmail.com | Cape Verde |
Direction
ID | Name | Country | |
---|---|---|---|
1 | Ms. Suzanne Sawayn | Mittie59@yahoo.com | Ethiopia |
2 | Leah Sawayn | Vicenta39@yahoo.com | Moldova |
3 | Albert Howe | Ronny58@gmail.com | El Salvador |
4 | Irving Corwin | Javon.Wilderman20@hotmail.com | Russian Federation |
5 | Sandra Johnston | Alda_Champlin@yahoo.com | Czechia |
6 | Ada Murphy | Concepcion.Ebert5@gmail.com | Pitcairn Islands |
7 | Andy Walsh | Carol1@yahoo.com | Mali |
8 | Daryl Cole | Deangelo_Rowe@hotmail.com | Switzerland |
9 | Elmer Hahn IV | Ibrahim.Kassulke18@gmail.com | Cook Islands |
10 | Mr. Kenneth Ernser | Lucienne_Reichert@yahoo.com | Portugal |
Total Count
For server-side pagination, your data source may be truncated. Make sure to specify the total records using count
.
{ "data": [...], "pagination": { "page": 1, "limit": 10, "count": 500, }}
<Pagination page={response.pagination.page} count={response.pagination.count} pageSize={response.pagination.limit}> ...</Pagination>
API Reference
Root
inline-flex gap-2 p-2 rounded-container preset-outlined-surface-200-800 w-fit
Property | Default | Type |
---|---|---|
ids | - | Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }> | undefinedThe ids of the elements in the accordion. Useful for composition. |
translations | - | IntlTranslations | undefinedSpecifies the localized strings that identifies the accessibility elements and their states |
count | - | number | undefinedTotal number of data items |
pageSize | - | number | undefinedThe controlled number of data items per page |
defaultPageSize | 10 | number | undefinedThe initial number of data items per page when rendered. Use when you don't need to control the page size of the pagination. |
siblingCount | 1 | number | undefinedNumber of pages to show beside active page |
page | - | number | undefinedThe controlled active page |
defaultPage | 1 | number | undefinedThe initial active page when rendered. Use when you don't need to control the active page of the pagination. |
onPageChange | - | ((details: PageChangeDetails) => void) | undefinedCalled when the page number is changed |
onPageSizeChange | - | ((details: PageSizeChangeDetails) => void) | undefinedCalled when the page size is changed |
type | "button" | "button" | "link" | undefinedThe type of the trigger element |
getPageUrl | - | ((details: PageUrlDetails) => string) | undefinedFunction to generate href attributes for pagination links. Only used when `type` is set to "link". |
dir | "ltr" | "ltr" | "rtl" | undefinedThe document's text/writing direction. |
getRootNode | - | (() => ShadowRoot | Node | Document) | undefinedA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
RootProvider
Property | Default | Type |
---|---|---|
value | - | () => PaginationApi<PropTypes> |
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
RootContext
Property | Default | Type |
---|---|---|
children | - | Snippet<[() => PaginationApi<PropTypes>]> |
PrevTrigger
btn preset-tonal
Property | Default | Type |
---|---|---|
element | - | Snippet<[HTMLAttributes<"button">]> | undefinedRender the element yourself |
Item
btn preset-tonal cursor-pointer select-none data-selected:preset-filled
Property | Default | Type |
---|---|---|
type | - | "page" |
value | - | number |
element | - | Snippet<[HTMLAttributes<"a">]> | undefinedRender the element yourself |
Ellipsis
btn preset-tonal pointer-events-none
Property | Default | Type |
---|---|---|
index | - | number |
element | - | Snippet<[HTMLAttributes<"span">]> | undefinedRender the element yourself |
NextTrigger
btn preset-tonal
Property | Default | Type |
---|---|---|
element | - | Snippet<[HTMLAttributes<"button">]> | undefinedRender the element yourself |