Paginator

[Ibabalola]

As a developer

I want to be able use a paginator component

so that I can easily paginate between pages

The paginator should:

• Have a clickable left and right angular bracket to change the current page on display
• Have a clickable horizontal list of page numbers, when a page number is clicked it should return the chosen page number in the onPageChange callback
• have an ellipse for a range of a large number of pages, it should always show 3 or 4 pages in between the ellipse
• optional first and last page buttons which will accept a JSX element

for example

      <Pagination
        className={"some-class-name"}
        currentPage={currentPage}
        totalCount={data.length}
        firstPageBtn={<></>}
        lastPageBtn={<></>}
        onPageChange={page => setCurrentPage(page)}
      />

Please draw inspiration from the amazon paginator

Please follow these steps to create your branch:

git checkout release/1.1.0
git pull
git checkout -b 'feature/paginator-component'

[rishabhkum-Dev-1799]

Hi , can you please assign this to me ?

[cg-julian-taylor]

So would this behave as just a navigation item containing links or does it wrap the pages themselves?

e.g.

<Pagination {props}>
<div>1</div>
<div>2</div>
</Pagination>

With the expectation that the two divs are treated as pages and visibility toggled?

Or are we after a <Pagination> component that exposes something via context api to allow conditional rendering of external <Page> components?

[Ibabalola]

Hi @cg-julian-taylor

so long as the component meets these points:

The paginator should:

Have a clickable left and right anglar bracket to change the current page on display
Have a clickable horizontal list of page numbers, when a page number clicked the page on display should present the contents of the current page
have an ellipse for a range of a large number of pages

it's completely up to you as you see fit.