Pagination
Displays data in paged format and provides navigation between pages.
Features
- Enable quick access to first, or last page
- Enable to show edges constantly, or not
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | nav |
asChild | boolean | false |
defaultPage | number | 1 |
disabled | boolean | false |
itemsPerPage | number | 10 |
page | number | - |
showEdges | boolean | false |
siblingCount | number | 2 |
total | number | 0 |
| Event | Type |
|---|---|
update:page | [_value: number] |
| Slot (default) | Type |
|---|---|
page | number |
pageCount | number |
List
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
| Slot (default) | Type |
|---|---|
items | { type: 'ellipsis'; } | { type: 'page'; value: number; } |
Item
Ellipsis
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-type] | ellipsis |
First
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
Last
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
Prev
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |
Next
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | button |
asChild | boolean | false |