BumblebeeBumblebee

Pagination

Contents

Live demoDesignCode

Live demo

Cursor Pagination

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Viewing 1-15 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}`}
/>;