Overview
The Pagination component provides navigation controls for multi-page content with customizable styling and behavior.
Basic Usage
import Pagination from '@newtonschool/grauity';
import { useState } from 'react';
function MyComponent() {
const [currentPage, setCurrentPage] = useState(1);
return (
<Pagination
totalPageCount={10}
defaultCurrentPage={currentPage}
onPageChange={(page) => setCurrentPage(page)}
/>
);
}
Callback function when the page changes.Signature: (pageNumber: number) => void
The default current page number.
size
ButtonSizes
default:"small"
Size of the pagination buttons.Available choices: extra-small, small, medium, large, extra-large
justifyContent
string
default:"space-between"
Alignment of pagination items (analogous to CSS justifyContent).Available choices: space-between, space-around, space-evenly, flex-start, flex-end
buttonVariant
ButtonVariants
default:"secondary"
Visual variant for inactive page buttons.
buttonColor
ButtonColors
default:"neutral"
Color theme for inactive page buttons.
activeButtonVariant
ButtonVariants
default:"primary"
Visual variant for the active page button.
activeButtonColor
ButtonColors
default:"neutral"
Color theme for the active page button.
controlButtonVariant
ButtonVariants
default:"secondary"
Visual variant for control buttons (Previous/Next).
controlButtonColor
ButtonColors
default:"neutral"
Color theme for control buttons.
Additional CSS class name.
Custom Alignment
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
justifyContent="center"
/>
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
justifyContent="flex-end"
/>
Custom Size
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
size="medium"
/>
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
size="large"
/>
Custom Button Styling
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
buttonVariant="tertiary"
buttonColor="neutral"
activeButtonVariant="primary"
activeButtonColor="brand"
controlButtonVariant="secondary"
controlButtonColor="brand"
/>
Complete Example
function PaginatedList() {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const totalItems = 95;
const totalPages = Math.ceil(totalItems / itemsPerPage);
const handlePageChange = (page: number) => {
setCurrentPage(page);
// Fetch data for the new page
fetchData(page, itemsPerPage);
};
return (
<div>
<div>
{/* Render your paginated content here */}
<NSTypography variant="paragraph-md-p2">
Showing page {currentPage} of {totalPages}
</NSTypography>
</div>
<Pagination
totalPageCount={totalPages}
defaultCurrentPage={currentPage}
onPageChange={handlePageChange}
size="medium"
justifyContent="center"
/>
</div>
);
}
With Data Fetching
function DataTable() {
const [currentPage, setCurrentPage] = useState(1);
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const totalPages = 20;
const fetchPageData = async (page: number) => {
setLoading(true);
try {
const response = await fetch(`/api/data?page=${page}`);
const result = await response.json();
setData(result.data);
setCurrentPage(page);
} catch (error) {
console.error('Failed to fetch data:', error);
} finally {
setLoading(false);
}
};
return (
<div>
<NSTable
columns={columns}
rows={data}
loading={loading}
/>
<Pagination
totalPageCount={totalPages}
defaultCurrentPage={currentPage}
onPageChange={fetchPageData}
/>
</div>
);
}
Branded Pagination
<Pagination
totalPageCount={10}
onPageChange={handlePageChange}
activeButtonVariant="primary"
activeButtonColor="brand"
buttonVariant="tertiary"
controlButtonVariant="secondary"
controlButtonColor="brand"
/>