ReactJs Pagination: How Do You Page Your Data With React.js Pagination?
What Is React.js Pagination?
Who doesn’t know what Pagination is?
Imagine you are reading a book without any page numbers? It wouldn’t be weird if there wasn’t the concept of paging. So, if your friend asks you how many pages you finished, what will you answer? Or, let us take an even worse case; suppose somehow there is an incident that has happened, and you lost some pages from your book, and the book had really important information. Now, you have no idea which pages or which information you lost! That’s really scary, isn’t it?
Going back through history, can you believe there used to be a time when books and documents used to be published without page numbers? Only after 1500 c, it became a common practice to publish books with page numbers. If only some genius would have figured out that before.
Similarly, there is a concept of pagination in the digital world where we divide a document into discrete pages/electronic pages. These electronics pages are rendered on a web browser and are called web pages. Also, these pages and the content in these pages, which is supposed to be rendered are related to each other using React.js pagination.
Ways to Render Data
For the rendering of data, we also have an option of progressive loading instead of React.js pagination. A very successful example of progressive loading is the Facebook or Instagram newsfeed where we have an option of infinite scroll while the news feed keeps updating and renders. Or, a better way to say it is that it exposes as much information that they can deliver to an end-user.
But, pagination has its own importance in terms of filtering and showing only relevant data. For example, the Google search engine. So, React.js pagination becomes crucial when a user is searching for particular information and not consuming any random information. There is an enormous number of inbuilt libraries that are available to handle pagination in web development, especially in the case of React. Also, there are a huge number of resources available which you can use directly to handle pagination for your application.
Some of the NPM and other pagination libraries available are:
It is also ideal to use these existing libraries instead of re-writing your own, the same as there is no need of reinventing the wheel. Instead, you can focus on other things. But, at the same time, it is also very important to know what is happening behind the scenes so that you can build and customize your application as needed without compromising any requirements. There is also a possibility of different logics being used for different reactjs pagination packages available. For the implementation of react-pagination into your application, read this great article. Here, I will be explaining about react-pagination with the help of the code below and some calculations.
Let us review some examples to understand the above code.
Assume current page = 1, page size = 10 , total item = 160; then total pages to be rendered = Math.ceil(160/10) = 16; since current page = 1, and it has to render a total of 10 pages, so according to the very first condition, that is current page <= 6, follows. This implies start page = 1; end page = 10
Assume current page = 12, page size = 10, total item = 160 ; then total pages to be rendered = Math.ceil(160/10) = 16; since current page = 12, and it still has to render a total of 10 pages, so according to the second condition, that is current page +4 (12+4 = 16) >= total no of pages(16) satisfies, which implies start page = 16-9 = 7 end page = 16.
Assume current page = 7, page size = 10 , total item = 160; then total pages to be rendered = Math.ceil(160/10) = 16; now current page = 7, and it still has to render total of 10 pages, so according to the third condition, that is current page +4 = (7+4 = 11) < = total no of pages(16), satisfies, which implies start page = 11-5 = 6. React pagination library can be used directly for paging functionality for any list of items.
The required props here are an array of items of the list to be rendered and a callback function onChange, which informs the parent component about the page change. The default value for the current page is 1, items per page are 10, and the page range to be displayed is 5. There are a lot of other packages available which you can use as per your requirements. For example, end page = 11+ 4 = 15 React.js pagination library can be used directly for paging functionality for any list of items.
There are many other packages available that you can use according to your requirements, and you can customize it too. If you have any doubts, feel free to ask questions in the comment section. Thank you!
Credit: Source link