Ready-Made Ui Components

Being front-end developers, we have come across many challenges on a regular basis. we would have created many components in order to re-use them throughout our Web application. Basically, What is the difference between page and component? In simple words, Pages are a combination of components in most of cases. Components are the minute piece of design which can be reused in any number of pages. To be related to Technical stuff, The component is a kind of module in a programming language that has its own functionality irrespective of other code. i.e. A module takes input and produces an output with respect to the logic Similarly, the Component also has some props and it displays the content accordingly irrespective of the Page on which it is used. In this story, I just wanted to share the ready-made component i.e. Pagination which we normally use on a regular basis and can be configurable as per the requirement.

The Framework I used here is Vue Js. Pagination.vue

Options in the above code might be the number of rows that we can display in the table we show. Ideally, the rows will be multiples of 5. : disabled — Here we disable next and previous based on the count of the pages in the data we have. I used scss for my styling. most enterprise applications prefer to use scss and node-sass in their Applications.

The above component will be configurable and can be used in any of the applications. Hope you guys liked it. If Yes, give it a clap. If any comments or enhancements are required for the above post. please feel free to comment below.

Thank you :) Cheers!!