Navigation

Pagination

Storybook

The Pagination component is a handy tool that facilitates user navigation through different pages, especially when used with tables. With a minimalist interface and clear controls for moving pages forward or backward, jumping to a specific page and adjusting the number of elements displayed per page, this component is highly customizable and complies with accessibility standards. It improves usability and efficiency when handling large data sets, making it a valuable addition.

Imports

The first alternative is recommended since they can reduce the application bundle.

1import Pagination from 'dd360-ds/Pagination'

1import { Pagination } from 'dd360-ds'

Usage

You can use it by importing the usePagination hook and use it like this

1import { Pagination, usePagination } from 'dd360-ds'
2
3const paginationProps = usePagination()
4
5<Pagination {...paginationProps} firstText="Show" secondText="of the 50 items" currentPage={paginationProps.currentPage + 1} totalPages={10} />
6
7

Or you can customize it your way with your functions and variables

1import Pagination from 'dd360-ds/Pagination'
2
3<Pagination
4    totalPages={5}
5    currentPage={1}
6    sliceSize="10"
7    firstText="Show"
8    secondText="of the 65 items"
9    goToPreviousPage={() => alert('goToBackPage')}
10    goToNextPage={() => alert('goToNextPage')}
11    goToPage={() => alert('goPage')}
12    setSize={() => null}
13/>
14

API Reference