Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – setPage doesn't change the page in mui datagrid

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
Tags:

2

Answers


  1. 0

    The documentation says that the initialState is not controlled (so it will only initialize data). To update the page you should probably use the paginationModel prop.

    Login or Signup to reply.
  2. 0

    MUI’s datagrid pagination mentions using apiRef.

    That ref will then provide the correct setPage callback via useImperativeHandle for which that ref is required.

    So then, instead of calling

    <Button onClick={() => setPage(1)}>Click me</Button>

    you would instead do

    <Button onClick={() => apiRef.current.setPage(1)}>Click me</Button>

    Also, you need to pass the correct prop, and not have it just randomly placed outside of the component, like this

    slots={{
  pagination: YourCustomPaginationComponent
}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search