Add Custom and reusable pagination

Viet Nguyen
Jul 02, 2022

A custom pagination has been born, It now can carry every style of Children Component with ease.

Hi there,

Long time did not post anything. I have recently added a new feature into the page. It is pagination 👏🏻. From now, I can fix the height of the pages and do not need to worry about applying back to top of page anymore.

This feature was sponsored by Material UI Pagination Component 🎁 for the UI. But I did modified it very much following my ideas:

First, I have add margin between the pages number through vanilla-extract typescript css.

Then, I have turned the CustomPagination Component to a wrapper component, where I can display all of the pages inside it. Provided the options to put the pagination list below or on the top of button. Of course, the Custom Pagination itself is just a structure, I then have to add the Child Component to display (as we might want a different style of Child Component):

<CustomPagination position="top" elements={records} totalCount={records.length} pageSize={9} ChildComponent={Picture}/>


We can see above example. elements store all the information about the children that you want to divide into Pagination. totalCount is for calculation the displayed pagination buttons. pageSize defined how many elements per pages we want and ChildComponent is the styled Child Component which we want to carry child information props.

There are a difficulties when I did try to pass the key to the child components from the beginning (they were not passed). But eventually, it did. Thanks 🥲.

So, I now can apply the custom pagination to display every list.


There is no comment here yet. Let's have one! ⌨️
Leave a Reply
Please be responsible and respectful when commenting. I reserve the right to remove any comment that I feel is inappropriate.