Pagination
Help users navigation between multiple pages or screens as part of a set.
Props
version
Version
The design system version for styling purposes.
Defaults to
1.
pagenumber
number
The current page being viewed (non-zero based).
itemcount
number
Total number of data items within all pages.
perpagecount
number
Number of data items shown per page.
Defaults to
10.
variant
all | links-only
Controls which nav controls are visible.
Defaults to
all.
testId
string
Sets a data-testid attribute for automated testing.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Events
onChange
(event: Event) => void
_change
CustomEvent
Show number of results per page
interface User {
id: string;
firstName: string;
lastName: string;
age: number;
}
const [users, setUsers] = useState<User[]>([]);
const [pageUsers, setPageUsers] = useState<User[]>([]);
const [page, setPage] = useState<number>(1);
const [perPage, setPerPage] = useState<number>(10);
useEffect(() => {
// Generate sample data
const firstNames = ["Emma", "Liam", "Olivia", "Noah", "Ava", "James", "Sophia", "William", "Isabella", "Oliver", "Mia", "Benjamin", "Charlotte", "Elijah", "Amelia", "Lucas", "Harper", "Mason", "Evelyn", "Logan"];
const lastNames = ["Smith", "Johnson", "Williams", "Brown", "Jones", "Garcia", "Miller", "Davis", "Rodriguez", "Martinez", "Wilson", "Anderson", "Taylor", "Thomas", "Moore", "Jackson", "Martin", "Lee", "Thompson", "White"];
const _users: User[] = [];
for (let i = 1; i <= 100; i++) {
_users.push({
id: `user-${i}`,
firstName: firstNames[(i - 1) % firstNames.length],
lastName: lastNames[(i - 1) % lastNames.length],
age: 20 + (i % 40),
});
}
setUsers(_users);
setPageUsers(_users.slice(0, perPage));
}, [perPage]);
function changePage(newPage: number) {
const offset = (newPage - 1) * perPage;
const _users = users.slice(offset, offset + perPage);
setPage(newPage);
setPageUsers(_users);
}
function handlePerPageCountChangeEvent(event: GoabDropdownOnChangeDetail) {
const perPageValue = parseInt(event.value || "10");
setPage(1);
setPerPage(perPageValue);
const _users = users.slice(0, perPageValue);
setPageUsers(_users);
}<GoabTable width="100%" mb="xl">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{pageUsers.map((u) => (
<tr key={u.id}>
<td>{u.firstName}</td>
<td>{u.lastName}</td>
<td>{u.age}</td>
</tr>
))}
</tbody>
</GoabTable>
<GoabBlock alignment="center" width="100%">
<GoabBlock mb="m" alignment="center">
Show
<GoabDropdown
onChange={handlePerPageCountChangeEvent}
value={perPage.toString()}
width="9ch"
>
<GoabDropdownItem value="10" label="10" />
<GoabDropdownItem value="20" label="20" />
<GoabDropdownItem value="30" label="30" />
</GoabDropdown>
<span style={{ width: "75px" }}>per page</span>
</GoabBlock>
<GoabSpacer hSpacing="fill" />
<GoabPagination
itemCount={users.length}
perPageCount={perPage}
pageNumber={page}
onChange={(event) => changePage(event.page)}
/>
</GoabBlock>