Import
import { Pagination } from '@dnb/eufemia'
Description
The Pagination component is used to split up larger data sets into pages / sections so the users can interact sequentially through the content. It supports both classical page pagination and infinity scrolling.
Screen reader support
To make it easier for screen readers to navigate, the navigation bar markup is placed above the content, even if it is visually the opposite.
Default pagination and content handling
You can put your content inside the pagination wrapper. This has the advantage that it gives screen reader users an easier way to interact and understand the content. It will also "keep" the old page height until the next page is inserted while showing an indicator.
The pagination component can be used outside of the content. Then you have to export the Bar
component directly from Pagination and link it together with your own states.
import { Bar } from '@dnb/eufemia/components/Pagination'
We recommend contacting one of the developers at Eufemia (Slack channel #eufemia-web) to help you set up Bar
, so that the pagination becomes screen reader compliant.
Pagination method #1
Returning a component directly inside a function as a child.
import { Pagination } from '@dnb/eufemia/components'render(<Pagination page_count={2}>{() => {return ReactComponent}}</Pagination>,)
Pagination method #2
Returning a function as a child and using setContent
.
import { Pagination } from '@dnb/eufemia/components'render(<Pagination page_count={2}>{({ pageNumber, setContent }) => {setContent(pageNumber, ReactComponent)}}</Pagination>,)
Pagination method #3
Using the on_change
event together with setContent
.
import { Pagination } from '@dnb/eufemia/components'render(<Paginationpage_count={2}on_change={({ pageNumber, setContent }) => {setContent(pageNumber, ReactComponent)}}/>,)
Pagination method #4
Create the instance before using it.
import { createPagination } from '@dnb/eufemia/components/Pagination'// create our Component instanceconst { Pagination, setContent, resetContent } = createPagination()// Later we can do call thissetContent(pageNumber, ReactComponent)render(<Pagination page_count={2} />)
Demos
Default pagination
<Pagination page_count={888} current_page={4} on_change={({ pageNumber }) => { console.log('on_change:', pageNumber) }} > <P>Current Page Content</P> </Pagination>
If you need to access methods provided by the render property arguments.
Centered Pagination with random delay
Note that we keep the height of the previous page. All pages can for sure have their own height.
<Pagination align="center" page_count={30}> {({ pageNumber, setContent }) => { // simulate server communication delay const timeout = setTimeout(() => { setContent(pageNumber, <LargePage>{pageNumber}</LargePage>) }, Math.ceil(Math.random() * 500)) return () => clearTimeout(timeout) }} </Pagination>
Infinity scroller demos
Check out demos for the Infinity Scroller.