In this tutorial, I will show you how to implement pagination on react table using Material UI.<\/p>\n
<\/p>\n
Prerequisites<\/strong>:<\/p>\n You’ve 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>\n 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 <\/p>\n This is the function that runs when a user changes page (either moves to next or previous page)<\/p>\n <\/p>\n This is the function that gets called when a user selects\u00a0 the rows per page value from the dropdown.<\/p>\n <\/p>\n 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 <\/p>\n This is part of the Material ui components and shown below:<\/p>\n <\/p>\n <\/p>\n If you are using Material UI >5, then the alignment of the pagination buttons would not display as expected. To fix that, you have to do two things:<\/p>\n <\/li>\n <\/p>\n At this point, you are all set, you can fire up\u00a0 the application using ‘npm run start’<\/em><\/strong> and enjoy!!<\/p>\n","protected":false},"excerpt":{"rendered":" In this tutorial, I will show you how to implement pagination on react table using Material UI. Define the page and rowsPerPage States Setup the … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2008","post","type-post","status-publish","format-standard","hentry","category-programming"],"_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":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions"}],"predecessor-version":[{"id":2176,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2008\/revisions\/2176"}],"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}]}}1. Define the page and rowsPerPage States<\/strong><\/h4>\n
const<\/span> [page, setPage] =<\/span> useState(0<\/span>); \/\/ Current page index<\/span>\r\nconst<\/span> [rowsPerPage, setRowsPerPage] =<\/span> useState(5<\/span>); \/\/ Number of rows per page<\/span>\r\n<\/pre>\n2. Setup the handleChangePage Function<\/strong><\/h4>\n
\/\/ Handle page change<\/span>\r\nconst<\/span> handleChangePage =<\/span> (event, newPage) =><\/span> {\r\n setPage(newPage);\r\n};\r\n<\/pre>\n3. Setup the handleChangeRowsPerPage Function<\/strong><\/h4>\n
\/\/ Handle change in rows per page<\/span>\r\nconst<\/span> handleChangeRowsPerPage =<\/span> (event) =><\/span> {\r\n setRowsPerPage(parseInt<\/span>(event.target.value, 10<\/span>));\r\n setPage(0<\/span>); \/\/ Reset the table to the first page whenever rows per page changes<\/span>\r\n};\r\n<\/pre>\n4. Slice the Products List<\/strong><\/h4>\n
products.slice(page *<\/span> rowsPerPage, page *<\/span> rowsPerPage +<\/span> rowsPerPage)\r\n<\/pre>\n5. Display the TablePagination Component<\/strong><\/h4>\n
<TablePagination<\/span>\r\n component=<\/span>\"div\"<\/span>\r\n count=<\/span>{products.length}<\/span>\r\n page=<\/span>{page}<\/span>\r\n onPageChange=<\/span>{handleChangePage}<\/span>\r\n rowsPerPage=<\/span>{rowsPerPage}<\/span>\r\n onRowsPerPageChange=<\/span>{handleChangeRowsPerPage}<\/span>\r\n rowsPerPageOptions=<\/span>{[5,<\/span> 10, 25]} \/\/<\/span> Options<\/span> for<\/span> rows<\/span> per<\/span> page<\/span>\r\n\/><\/span>\r\n<\/pre>\n6. Fix the Pagination Buttons Alignment (Material UI >5)<\/strong><\/h4>\n
\n
npm install bootstrap@3\r\n<\/pre>\n
sx={{\r\n \".MuiTablePagination-displayedRows, .MuiTablePagination-selectLabel\": {\r\n \"margin-top\": \"1em\",\r\n \"margin-bottom\": \"1em\"\r\n }\r\n }}\r\n<\/pre>\n