The setPage is working fine in the pagination component. However, it doesn’t change the page in the datagrid itself. I can see the number changes (page) in the browser console.

If a entered the page number statically in the useState, it correctly displays the page.

Here’s my code:

datagrid component:

import { FC } from "react";
import { Paper, Stack, Typography } from "@mui/material";
import { DataGrid, GridToolbar, GridColDef } from "@mui/x-data-grid";


const CustomDataGrid: FC<{
    tableTitle: string;
    rowsData: any;
    columnsData: GridColDef[];
    currentPage: number;
    pageSize: number;
    getRowId?: (params: any) => any;
    error?: any;
    NoDataMsg: string;
    NoResultMsg: string;
}> = ({
    tableTitle,
    rowsData,
    columnsData,
    currentPage,
    pageSize,
    getRowId,
    error,
    NoDataMsg,
    NoResultMsg
}) => {
    return (
        <Paper elevation={4} style={{ marginBottom: "10px", borderRadius: "10px" }}>
            <Typography
                textAlign="center"
                variant="h5"
                style={{ paddingTop: "20px", paddingBottom: "40px", fontWeight: "bold" }}
            >
                {tableTitle}
            </Typography>
            <DataGrid
                columns={columnsData}
                rows={rowsData}
                rowHeight={64}
                initialState={{
                    pagination: { paginationModel: { pageSize: pageSize, page: currentPage - 1 } }
                }}
                ignoreDiacritics
                hideFooterPagination
                disableRowSelectionOnClick
                disableColumnFilter
                disableColumnMenu
                disableColumnSelector
                disableDensitySelector
                hideFooterSelectedRowCount
                getRowId={getRowId}
                autoHeight={true}
                slotProps={{ toolbar: { showQuickFilter: true } }}
                slots={{
                    toolbar: GridToolbar,
                    noRowsOverlay: () => (
                        <Stack height="100%" alignItems="center" justifyContent="center">
                            <Typography
                                variant="h4"
                                sx={{ fontSize: "24px", color: error ? "error.main" : "primary.main" }}
                            >
                                { NoDataMsg }
                            </Typography>
                        </Stack>
                    ),
                    noResultsOverlay: () => (
                        <Stack height="100%" alignItems="center" justifyContent="center">
                            <Typography variant="h4" sx={{ fontSize: "24px", color: "primary.main" }}>
                                { NoResultMsg }
                            </Typography>
                        </Stack>
                    )
                }}
            />
        </Paper>
    );
};

export default CustomDataGrid;

pagination component:

import { FC } from "react";
import { Pagination } from "@mui/material";


const CustomPagination: FC<{
    page: number;
    setPage: (params: any) => any;
    totalRows: number;
    pageSize: number;
}> = ({
    page,
    setPage,
    pageSize,
    totalRows
}) => {
    return (
        <Pagination
            count={Math.ceil(totalRows / pageSize)}
            variant="outlined"
            shape="rounded"
            page={page}
            hideNextButton
            hidePrevButton
            size="small"
            sx={{ width: "100%" }}
            onChange={(e) => {
                const target = e.target as HTMLElement;
                setPage(Number(target.innerText));
            }}
        />
    );
};

export default CustomPagination;

App.tsx:

import { useState } from 'react'
import { GridColDef } from "@mui/x-data-grid";
import { clinicsData } from "../data";
import CustomDataGrid from './comps/datagridComp';
import CustomPagination from './comps/paginationComp';

function App() {

  const pageSize = 7;
    const [page, setPage] = useState(1);
  const columns: GridColDef[] = [
        {
            field: "name",
            headerName: "Name",
            flex: 1,
            headerAlign: "center",
            sortable: false
        }
    ];

  

  console.log(page)

  return (
    <>
      <CustomDataGrid
        tableTitle='Clinics Table'
        getRowId={(row) => row.id}
        columnsData={columns}
        rowsData={clinicsData}
        currentPage={page}
        pageSize={pageSize}
        // error={error}
        NoDataMsg={"No Data Available"}
        NoResultMsg={"No Data Matching"}
      />
      {clinicsData.length / pageSize > 1 && (
        <CustomPagination
          page={page}
          setPage={setPage}
          pageSize={pageSize}
          totalRows={clinicsData.length}
        />
      )}
    </>
  )
}

export default App