Pagination
The Pagination component is used to show page directory.
1. Import
KUMUI exports 7 Pagination-related components:
import { Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationPrevious,
PaginationNext,
PaginationEllipsis,} from "@rohitgadekar/kimui";
2. Usage
3. API
3.1 Pagination
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Pagination container component for organizing the pagination structure, including page links and control buttons. | - |
3.2 PaginationContent
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Holds the pagination controls such as previous/next buttons, page number items, and separators (e.g., ellipsis). | - |
3.3 PaginationPrevious
| Attribute | Type | Description | Default |
|---|---|---|---|
| onClick | Function | Click handler to move to the previous page in pagination. | - |
3.4 PaginationNext
| Attribute | Type | Description | Default |
|---|---|---|---|
| onClick | Function | Click handler to move to the next page in pagination. | - |
3.5 PaginationItem
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Represents a single item, such as a page number, in the pagination controls. | - |
3.6 PaginationLink
| Attribute | Type | Description | Default |
|---|---|---|---|
| isActive | boolean | Indicates if this page number is the currently active page in pagination. | false |
| onClick | Function | Handler to navigate to the clicked page number. | - |
3.7 PaginationEllipsis
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | React.ReactNode | Represents the ellipsis ("...") used to indicate skipped page numbers when there are too many pages to show directly in pagination. | - |