Skip to content
Home

Pagination

Info
Demos
Properties
Events

Demos

Default pagination

Side 4
Code Editor
<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.

Side undefined

Horizontal pagination

Side 4
Code Editor
<Pagination
  page_count={888}
  current_page={4}
  on_change={({ pageNumber }) => {
    console.log('on_change:', pageNumber)
  }}
  paginationBarLayout="horizontal"
>
  <P>Current Page Content</P>
</Pagination>

Centered Pagination with random delay

Note that we keep the height of the previous page. All pages can for sure have their own height.

Side undefined
Code Editor
<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.