Paginator component #396
Paginator component #396
Conversation
|
Thanks @bgptr, i think ideally we should use this component in https://github.com/decred/pi-ui/blob/master/src/components/Table/Table.jsx which has pagination already and looks like the design attached. |
There was a problem hiding this comment.
I agree we should use the Paginator component in the Table component.
There is a behavior I don't like in our current table pagination:
table_paginator.mp4
See how it expands to the left? You did the same in your component but you're expanding to the right. Ideally the width of the component should be fixed for the same screen size. Like MUI's React Pagination component.
pagination.mp4
Can you create the same behavior?
Other than that, your code looks good. You added an arrow icon but we already have left and right icons so I guess it's unnecessary. You also added the hexadecimal of colors we already have named, for example: "paginator-arrow-color": "#2970FF" should be: "paginator-arrow-color": "var(--color-primary)".
To integrate your component on Table:
Table has basically 2 booleans and 2 functions responsible for dealing with pagination. They are: canGoBack, canGoNext, previousPage and nextPage. The booleans are used to disable/enable left and right arrows and the functions are responsible to navigate through the pages. Should be pretty straight forward. Feel free to adapt the Table component if you must but I'd rather adapt the Paginator component to accept these props.
- arrow colors - fixed width pagination - use Paginator in Table component
|
@tiagoalvesdulce I've implemented your suggestions but left the arrow icon because the |
|
No particular reason. I've replaced them. |
|
Good catch. Removed it. |
This introduces a new Paginator component.
Design-wise it follows: https://www.figma.com/file/EanUbqJmPs8EMqY26j9zwo/decred---piui---decrediton?node-id=12%3A1024
This new component is used in decred/decrediton#3603