Skeleton

  1. components
  2. pagination
  3. svelte

Pagination

Navigate between multiple pages of content.

IDNameEmailCountry
1Robin CummerataTara.Barrows25@gmail.comDjibouti
2Devin Fritsch-ParkerNadia.Dietrich55@yahoo.comUganda
3Steve AbbottPatience.Dickinson36@hotmail.comRussian Federation
4Valerie ShanahanAdriana.Russel23@gmail.comSaint Martin
5Mr. Neal SatterfieldFredy_Cormier@gmail.comTuvalu
6Edmund MitchellMarques.Huel@hotmail.comUnited States of America
7Angela BlandaKavon_Marquardt14@hotmail.comBotswana
8Ms. Eleanor TerryColton_Walker@yahoo.comLesotho
9Karla KuhnDawn.Walsh10@gmail.comKazakhstan
10Cecil SpinkaAllan69@yahoo.comUkraine
1234550

Page Size

IDNameEmailCountry
1Helen Romaguera DDSMandy1@yahoo.comSvalbard & Jan Mayen Islands
2Catherine Heaney DVMEmory0@yahoo.comNew Caledonia
3Lisa GreenEldon_Bailey17@gmail.comNorthern Mariana Islands
4Hazel VonAnabel23@hotmail.comNew Zealand
5Nadine WolffKatlyn_Wisozk@hotmail.comSuriname
6Verna BoganKacie.Ullrich59@gmail.comCuracao
7Clara Denesik DDSGladyce.Schuppe95@yahoo.comMali
8Jodi KunzeGwendolyn.Krajcik@hotmail.comSudan
9Mrs. Regina LangoshSharon.Pfannerstill69@yahoo.comPakistan
10Joyce Boehm-RatkeVanessa33@gmail.comCape Verde
1234550

Direction

IDNameEmailCountry
1Ms. Suzanne SawaynMittie59@yahoo.comEthiopia
2Leah SawaynVicenta39@yahoo.comMoldova
3Albert HoweRonny58@gmail.comEl Salvador
4Irving CorwinJavon.Wilderman20@hotmail.comRussian Federation
5Sandra JohnstonAlda_Champlin@yahoo.comCzechia
6Ada MurphyConcepcion.Ebert5@gmail.comPitcairn Islands
7Andy WalshCarol1@yahoo.comMali
8Daryl ColeDeangelo_Rowe@hotmail.comSwitzerland
9Elmer Hahn IVIbrahim.Kassulke18@gmail.comCook Islands
10Mr. Kenneth ErnserLucienne_Reichert@yahoo.comPortugal
1234550

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; }> | undefined
The ids of the elements in the accordion. Useful for composition.
translations -
IntlTranslations | undefined
Specifies the localized strings that identifies the accessibility elements and their states
count -
number | undefined
Total number of data items
pageSize -
number | undefined
The controlled number of data items per page
defaultPageSize 10
number | undefined
The 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 | undefined
Number of pages to show beside active page
page -
number | undefined
The controlled active page
defaultPage 1
number | undefined
The initial active page when rendered. Use when you don't need to control the active page of the pagination.
onPageChange -
((details: PageChangeDetails) => void) | undefined
Called when the page number is changed
onPageSizeChange -
((details: PageSizeChangeDetails) => void) | undefined
Called when the page size is changed
type "button"
"button" | "link" | undefined
The type of the trigger element
getPageUrl -
((details: PageUrlDetails) => string) | undefined
Function to generate href attributes for pagination links. Only used when `type` is set to "link".
dir "ltr"
"ltr" | "rtl" | undefined
The document's text/writing direction.
getRootNode -
(() => ShadowRoot | Node | Document) | undefined
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
element -
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

RootProvider

Property Default Type
value -
() => PaginationApi<PropTypes>
element -
Snippet<[HTMLAttributes<"div">]> | undefined
Render the element yourself

RootContext

Property Default Type
children -
Snippet<[() => PaginationApi<PropTypes>]>

PrevTrigger

btn preset-tonal
Property Default Type
element -
Snippet<[HTMLAttributes<"button">]> | undefined
Render 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">]> | undefined
Render the element yourself

Ellipsis

btn preset-tonal pointer-events-none
Property Default Type
index -
number
element -
Snippet<[HTMLAttributes<"span">]> | undefined
Render the element yourself

NextTrigger

btn preset-tonal
Property Default Type
element -
Snippet<[HTMLAttributes<"button">]> | undefined
Render the element yourself