Pagination

[Fahimansari]

@JOEL PETER SONY Pagination Component spec

Pagination

• Build a Pagination component on top of the Pagination component in @mui-material
• Should have sx= {variant: 'outlined', shape:'rounded'}
• The component should be horizontally centre aligned in it's parent component
• Should take two items
  • pagecount - How many pages are there in a particular table
  • disabled - To disable the pagination component
• How I am planning to use it.
  • I will pass the total number of pages that are available in a particular scenario to the Pagination component to show how much pages are available to swtich between
  • When I switch to another page, the logic should be such that, the url params with page=<page_number> and will load the page with that param.

The below code is something that I am using right now. You can probably start from it and make sure that it's working correctly as an isolated component

'use client';
import * as React from 'react';
import { Pagination as MUIPagination } from "@mui/material";

export default function Pagination({count=1, disabled=false}){

  const handlePageChange = (event, page) => {
    const current = new URLSearchParams(Array.from(searchParams.entries()));
    current.set('page', page.toString());
    const search = current.toString();
    const query = search ? `?${search}` : '';
    router.replace(`${window.location.pathname}${query}`);
  };

  return(
    <MUIPagination count={count}
              variant='outlined'
              shape='rounded'
              onChange={handlePageChange}
              disabled={disabled} />
  )
}

https://www.loom.com/share/fc96d378fae1499c81b6a25ed5713a13?focus_title=1&muted=1&from_recorder=1

[Pete-Sony]

In brief This is a pagination component

• with variant ='outlined' shape='rounded', NOT the SX prop
• with props pageCount and disabled
• the pagination component should update the search param url

[Fahimansari]

@Pete-Sony Yes