Pagination
Pagination with page navigation, next and previous links.
Usage
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "uilab-core"<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#" isActive>
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">3</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationEllipsis />
</PaginationItem>
<PaginationItem>
<PaginationNext href="#" />
</PaginationItem>
</PaginationContent>
</Pagination>Examples
Simple
A simple pagination with only page numbers.
Icons only
Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.
TanStack Router
By default the <PaginationLink /> component renders an <a /> tag. Wrap it with createLink to get a type-safe router link with to, params and search.
import { createLink } from "@tanstack/react-router"
import { PaginationLink } from "uilab-core"
const PaginationRouterLink = createLink(PaginationLink)
<PaginationRouterLink to="/posts" search={{ page: 2 }} isActive>
2
</PaginationRouterLink>