The pagination component can be used to show a list of pages with numbers and links to allow the users to navigate through multiple pages, data from tables, and more.
Choose one of the examples below based on various styles and sizes and customize them using the React props API and the utility classes from Tailwind CSS.
You need to import the pagination component from the pol-ui library before using it:
import { Pagination } from "pol-ui";Default pagination
Use the <Pagination> component to create a default pagination element and use the currentPage prop to set the currently active page, the totalPages prop to set how many pages there are in total and update the onPageChange even listener to set the state of the pagination component via React.
Default pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination currentPage={page} onPageChange={setPage} totalPages={100} />
);
};
export default PaginationComponent;Props
Pagination
| Prop name | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | The className to apply to the pagination component. |
| currentPage | number | 1 | The current page number. |
| hasRange | boolean | true | Show the range of pages. |
| hasLabels | boolean | false | Show the labels. |
| labels | Labels | Labels | The labels to show. |
| onPageChange | (page: number) => void | undefined | The event listener to handle the page change. |
| renderPaginationButton | (props) => ReactNode | <PaginationButton /> | The render prop to customize the pagination button. |
| showIcons | boolean | false | Show the icons. |
| theme | PaginationTheme | {} | The theme to apply to the pagination component. |
| totalPages | number | 1 | The total number of pages. |
| pageSize | number | 5 | The number of pages to show. |
| outline | boolean | false | Show the outline. |
You can also provide any prop comming from the HTML nav tag.
PaginationButton
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | The active state of the button. |
| children | ReactNode | undefined | The children to render. |
| onClick | (event) => void | undefined | The event listener to handle the click. |
| outline | boolean | false | Show the outline. |
| theme | PaginationButtonTheme | The theme to apply to the pagination button. |
You can also provide any prop comming from the HTML button tag.
Examples
Pagination with icons
Add next and previous icons to the pagination component by passing theshowIcon` prop via React.
Default pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
showIcons={true}
/>
);
};
export default PaginationComponent;Navigation layout with icons
Show only the next and previous control buttons by passing the hasRange="false" prop from React.
Navigation pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
hasRange={false}
/>
);
};
export default PaginationComponent;Control button icons
Show the control buttons with icons by passing both the hasRange="false" and showIcons props.
Control button icons
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
hasRange={false}
showIcons={true}
/>
);
};
export default PaginationComponent;Outline
If you want to show the pagination component with an outline, you can pass the outline prop.
Outline pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
outline={true}
/>
);
};
export default PaginationComponent;Table data navigation
Use this example show table data navigation by turning true the hasLabels prop.
Table data navigation
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
hasLabels={true}
/>
);
};
export default PaginationComponent;Table data navigation with icons
Show icons for the next and previous control buttons for table navigation by passing the showIcons prop.
Default pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
hasLabels={true}
showIcons={true}
/>
);
};
export default PaginationComponent;Custom Labels
Customize the text for the next and previous buttons by passing a Labels object to the labels prop.
Default pagination
import { Pagination } from "pol-ui";
const PaginationComponent = () => {
const [page, setPage] = useState(1);
return (
<Pagination
currentPage={page}
onPageChange={setPage}
totalPages={100}
hasLabels={true}
labels={{
entries: "dades",
of: "de",
showing: "Mostrant",
to: "de",
next: "Següent",
previous: "Anterior",
}}
/>
);
};
export default PaginationComponent;Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
PaginationTheme
export interface PaginationTheme {
base: string;
layout: {
table: {
base: string;
span: string;
};
};
pages: {
base: string;
showIcon: string;
previous: {
base: string;
icon: string;
};
next: {
base: string;
icon: string;
};
selector: {
base: string;
active: string;
disabled: string;
};
};
}Labels
interface Labels {
next: string;
previous: string;
of: string;
to: string;
entries: string;
showing: string;
}