{"id":2008,"date":"2024-09-01T12:00:00","date_gmt":"2024-09-01T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/how-to-implement-pagination-in-react-application-using-material-ui\/"},"modified":"2026-08-28T12:57:45","modified_gmt":"2026-08-28T10:57:45","slug":"how-to-implement-pagination-in-react-application-using-material-ui","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-implement-pagination-in-react-application-using-material-ui\/","title":{"rendered":"How to Implement Pagination in React Application \u2013 Using Material UI"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn how to implement pagination in a React application using Material UI, including page states, row limits, table slicing, and TablePagination.<\/em><\/p>\n\n\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p>Use <code>page<\/code> and <code>rowsPerPage<\/code> states to control pagination.<\/p>\n<\/li>\n<li>\n<p>Handle page changes with <code>handleChangePage<\/code>.<\/p>\n<\/li>\n<li>\n<p>Use <code>handleChangeRowsPerPage<\/code> to change the number of records displayed.<\/p>\n<\/li>\n<li>\n<p>Slice the product list based on the current page and rows per page.<\/p>\n<\/li>\n<li>\n<p>Use Material UI&#8217;s <code>TablePagination<\/code> component to display pagination controls.<\/p>\n<\/li>\n<\/ul>\n<p>In this tutorial, I will show you how to implement pagination on react table using Material UI.<\/p>\n<ol>\n<li><a href=\"#t1\">Define the page and rowsPerPage States<\/a><\/li>\n<li><a href=\"#t2\">Setup the handleChangePage Function<\/a><\/li>\n<li><a href=\"#t3\">Setup the handleChangeRowsPerPage Function<\/a><\/li>\n<li><a href=\"#t4\">Slice the\u00a0 Product List<\/a><\/li>\n<li><a href=\"#t5\">Display the TablePagination Component<\/a><\/li>\n<li><a href=\"#t6\">Fix the Pagination Buttons Alignment<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><strong>Prerequisites<\/strong>:<\/p>\n<p>You\u2019ve fetched some data from an api endpoint and displayed it on a table and now you want to add a neat pagination at the bottom of the table. The steps are as follows:<\/p>\n<p>&nbsp;<\/p>\n<h4 id=\"t1\"><strong>1. Define the page and rowsPerPage States<\/strong><\/h4>\n<p>The page is the variable that holds the current page while the rowsPerPage holds the value of the number of records in a single page.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">const<\/span> [page, setPage] <span style=\"color: #333333;\">=<\/span> useState(<span style=\"color: #0000dd; font-weight: bold;\">0<\/span>);  <span style=\"color: #888888;\">\/\/ Current page index<\/span>\n<span style=\"color: #008800; font-weight: bold;\">const<\/span> [rowsPerPage, setRowsPerPage] <span style=\"color: #333333;\">=<\/span> useState(<span style=\"color: #0000dd; font-weight: bold;\">5<\/span>);  <span style=\"color: #888888;\">\/\/ Number of rows per page<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"t2\"><strong>2. Setup the handleChangePage Function<\/strong><\/h4>\n<p>This is the function that runs when a user changes page (either moves to next or previous page)<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/ Handle page change<\/span>\n<span style=\"color: #008800; font-weight: bold;\">const<\/span> handleChangePage <span style=\"color: #333333;\">=<\/span> (event, newPage) <span style=\"color: #333333;\">=&gt;<\/span> {\n   setPage(newPage);\n};\n<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"t3\"><strong>3. Setup the handleChangeRowsPerPage Function<\/strong><\/h4>\n<p>This is the function that gets called when a user selects\u00a0 the rows per page value from the dropdown.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #888888;\">\/\/ Handle change in rows per page<\/span>\n<span style=\"color: #008800; font-weight: bold;\">const<\/span> handleChangeRowsPerPage <span style=\"color: #333333;\">=<\/span> (event) <span style=\"color: #333333;\">=&gt;<\/span> {\n     setRowsPerPage(<span style=\"color: #007020;\">parseInt<\/span>(event.target.value, <span style=\"color: #0000dd; font-weight: bold;\">10<\/span>));\n     setPage(<span style=\"color: #0000dd; font-weight: bold;\">0<\/span>);  <span style=\"color: #888888;\">\/\/ Reset the table to the first page whenever rows per page changes<\/span>\n};\n<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"t4\"><strong>4. Slice the Products List<\/strong><\/h4>\n<p>Now we must slice the products list based on the current page and the rows per page. And this slice is what would be displayed. Therefore, before you map, you must add the slice like so:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">products.slice(page <span style=\"color: #333333;\">*<\/span> rowsPerPage, page <span style=\"color: #333333;\">*<\/span> rowsPerPage <span style=\"color: #333333;\">+<\/span> rowsPerPage)\n<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"t5\"><strong>5. Display the TablePagination Component<\/strong><\/h4>\n<p>This is part of the Material ui components and shown below:<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;TablePagination<\/span>\n    <span style=\"color: #0000cc;\">component=<\/span><span style=\"background-color: #fff0f0;\">\"div\"<\/span>\n    <span style=\"color: #0000cc;\">count=<\/span><span style=\"background-color: #fff0f0;\">{products.length}<\/span>\n    <span style=\"color: #0000cc;\">page=<\/span><span style=\"background-color: #fff0f0;\">{page}<\/span>\n    <span style=\"color: #0000cc;\">onPageChange=<\/span><span style=\"background-color: #fff0f0;\">{handleChangePage}<\/span>\n    <span style=\"color: #0000cc;\">rowsPerPage=<\/span><span style=\"background-color: #fff0f0;\">{rowsPerPage}<\/span>\n    <span style=\"color: #0000cc;\">onRowsPerPageChange=<\/span><span style=\"background-color: #fff0f0;\">{handleChangeRowsPerPage}<\/span>\n    <span style=\"color: #0000cc;\">rowsPerPageOptions=<\/span><span style=\"background-color: #fff0f0;\">{[5,<\/span> 10, 25]}  <span style=\"color: #777777;\">\/\/<\/span> <span style=\"color: #777777;\">Options<\/span> <span style=\"color: #777777;\">for<\/span> <span style=\"color: #777777;\">rows<\/span> <span style=\"color: #777777;\">per<\/span> <span style=\"color: #777777;\">page<\/span>\n<span style=\"color: #007700;\">\/&gt;<\/span>\n<\/pre>\n<p>&nbsp;<\/p>\n<h4 id=\"t6\"><strong>6. Fix the Pagination Buttons Alignment (Material UI &gt;5)<\/strong><\/h4>\n<p>If you are using Material UI &gt;5, then the alignment of the pagination buttons would not display as expected. To fix that, you have to do two things:<\/p>\n<ul>\n<li>install bootstrap\n<pre style=\"margin: 0; line-height: 125%;\">npm install bootstrap@3\n<\/pre>\n<p>&nbsp;<\/p>\n<\/li>\n<li>modify the sx prop of the TablePagination component using the code below<\/li>\n<\/ul>\n<pre style=\"margin: 0; line-height: 125%;\">sx={{\n    \".MuiTablePagination-displayedRows, .MuiTablePagination-selectLabel\": {\n        \"margin-top\": \"1em\",\n        \"margin-bottom\": \"1em\"\n    }\n    }}\n<\/pre>\n<p>&nbsp;<\/p>\n<p>At this point, you are all set, you can fire up\u00a0 the application using<strong><em> \u2018npm run start\u2019<\/em><\/strong> and enjoy!!<\/p>\n<h3>FAQs<\/h3>\n<p><strong>How do I implement pagination in a React application?<\/strong><\/p>\n<p>You can implement pagination by tracking the current page and number of rows per page with React state, then displaying only the relevant records.<\/p>\n<p><strong>What is <code>rowsPerPage<\/code> in React pagination?<\/strong><\/p>\n<p><code>rowsPerPage<\/code> determines how many records are displayed on each page of the table.<\/p>\n<p><strong>How do I change pages in Material UI pagination?<\/strong><\/p>\n<p>Use the <code>onPageChange<\/code> property of the <code>TablePagination<\/code> component and update the <code>page<\/code> state with the new page value.<\/p>\n<p><strong>How do I display only the records for the current page?<\/strong><\/p>\n<p>Use JavaScript&#8217;s <code>slice()<\/code> method with the current <code>page<\/code> and <code>rowsPerPage<\/code> values to select the records that should be displayed.<\/p>\n<p><strong>What is the Material UI component used for pagination?<\/strong><\/p>\n<p>Material UI provides the <code>TablePagination<\/code> component, which provides controls for changing pages and selecting the number of rows displayed per page.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>Pagination makes it easier to display large amounts of data in a React table without showing every record on a single page. With React state and Material UI&#8217;s <code>TablePagination<\/code> component, you can add a simple and practical pagination system.<\/p>\n<p>The key is to keep track of the current page and rows per page, then use <code>slice()<\/code> to determine which records should be displayed. Once this is working, you can further improve the table with features such as searching, filtering, and sorting.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to implement pagination in a React application using Material UI, including page states, row limits, table slicing, and TablePagination. TL;DR Use page and &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2008","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2008","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=2008"}],"version-history":[{"count":2,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2552,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions\/2552"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}