BumblebeeBumblebee

Pagination

Contents

Live demoDesignCode

Live demo

Cursor Pagination

  • 1
  • 2
  • 3
  • 4
  • 5

Viewing 1-5 of 20

Showing results
Load more

Code

The Pagination component takes the shape of the pagination object returned from any API calls which return a collection with the addition of a callback to request a new . The 
pageSize
field will be used to determine the results returned in that request, this should be equal or less than the set 
limit
, which is also a field present for the maximum amount of results per page.

Example:

Page 1 
totalCount: 16,
nextCursor: 'abc'
Page 2 
totalCount: 16,
nextCursor: null

import { Pagination } from '@shieldpay/bumblebee/pagination';

<Pagination
  totalCount={totalCount}
  nextCursor={nextCursor}
  offset={offset}
  pageSize={pageSize}
  loadMoreTo={`?nextCursor=${nextCursor}`}
/>;