SetPage отлично работает в компоненте нумерации страниц. Однако это не меняет страницу в самой сетке данных. Я вижу количество изменений (страницы) в консоли браузера.
Если номер страницы введен статически в useState, страница отображается правильно.
Вот мой код:
компонент datagrid:
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;
компонент нумерации страниц:
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;
Приложение.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.info(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
🤔 А знаете ли вы, что...
React поддерживает однонаправленный поток данных (unidirectional data flow) для предсказуемого управления состоянием.
В разбиении на страницы сетки данных MUI упоминается использование apiRef.
Затем эта ссылка предоставит правильный обратный вызов setPage через useImperativeHandle, для которого требуется эта ссылка.
Итак, вместо того, чтобы звонить
<Button onClick = {() => setPage(1)}>Click me</Button>
вместо этого ты бы сделал
<Button onClick = {() => apiRef.current.setPage(1)}>Click me</Button>
Кроме того, вам нужно передать правильный реквизит, а не размещать его случайным образом за пределами компонента, как здесь.
slots = {{
pagination: YourCustomPaginationComponent
}}