fix: 페이징 표시

src/views/biz/parking/Regist.jsx

@@ -78,12 +78,14 @@ const ParkingRegister = () => {
     setOpen(false);
     // return false;
 
-    opstBizService.saveSimsaTargetList(param).then((response) => {
+    opstBizService.saveSimsaTargetList(param).then(() => {
-      console.log(response);
+      setSelection([]);
-      if (response && response.data) {
+      search();
-        setTotalCount(response.count);
+      // console.log(response);
-        setRowsStatus((prevRows) => ({ ...prevRows, rows: response.data }));
+      // if (response && response.data) {
-      }
+      //   setTotalCount(response.count);
+      //   setRowsStatus((prevRows) => ({ ...prevRows, rows: response.data }));
+      // }
     });
   };
 
@@ -101,7 +103,6 @@ const ParkingRegister = () => {
 
   const handleSelection = (newSelection) => {
     setSelection(newSelection);
-    // alert(newSelection.selectionModel);
   };
 
   return (
@@ -175,6 +176,7 @@ const ParkingRegister = () => {
         <Divider />
       </Grid>
       <MuiDataGrid
+        // apiRef={apiRef}
         isCheckbox
         isHideFooter
         columns={columns}

src/views/form/CustomPagination.js

@@ -1,17 +1,19 @@
 import { gridPageSelector, gridPageCountSelector, useGridApiContext, useGridSelector } from '@mui/x-data-grid';
 import Pagination from '@mui/material/Pagination';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import PropTypes from 'prop-types';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import { Typography } from '@mui/material';
 
-const CustomPagination = () => {
+const CustomPagination = ({ totalCount, pageSize }) => {
   const apiRef = useGridApiContext();
   const page = useGridSelector(apiRef, gridPageSelector);
   const pageCount = useGridSelector(apiRef, gridPageCountSelector);
 
   return (
-    <Grid>
+    <Grid sx={{ padding: '10px', display: 'flex', justifyContent: 'center' }}>
-      <span>Total : {apiRef.current.getRowsCount()}</span>
       <Pagination
-        sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
+        // sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
         color="primary"
         variant="outlined"
         shape="rounded"
@@ -27,7 +29,23 @@ const CustomPagination = () => {
           apiRef.current.setPage(value - 1);
         }}
       />
+      <FiberManualRecordIcon
+        fontSize="small"
+        sx={{
+          ml: 2,
+          mr: 0.5,
+          color: '#4caf50'
+        }}
+      />
+      <Typography variant="h5" color="inherit">
+        {page * pageSize + 1} / {totalCount}
+      </Typography>
     </Grid>
   );
 };
+
+CustomPagination.propTypes = {
+  totalCount: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired
+};
 export default CustomPagination;

src/views/form/MuiDataGrid.jsx

@@ -9,7 +9,9 @@ import CustomPagination from './CustomPagination';
 
 // project imports
 const MuiDataGrid = ({
+  // apiRef = () => {},
   isCheckbox = false,
+  // isDisableSelection = true,
   columns,
   rowsState = { page: 0, pageSize: 10, rows: [] },
   totalCount = 0,
@@ -18,7 +20,7 @@ const MuiDataGrid = ({
   handleSelection = () => {}
 }) => {
   const theme = useTheme();
-  // const apiRef = useGridApiRef();
+  const { page, pageSize, rows } = rowsState;
 
   return (
     <Box
@@ -55,7 +57,6 @@ const MuiDataGrid = ({
         rowCount={totalCount}
         checkboxSelection={isCheckbox}
         disableSelectionOnClick
-        // isRowSelectable={(params: any) => params.row.id > 0}
         columns={columns}
         {...rowsState}
         onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
@@ -63,12 +64,16 @@ const MuiDataGrid = ({
         rowsPerPageOptions={[10, 50, 100]}
         onCellClick={handleCellClick}
         onSelectionModelChange={handleSelection}
+        // isRowSelectable={(params) => params.row.rowId < 50000}
         pagination
         // hideFooter
         // hideFooterPagination
         components={{
           Footer: CustomPagination
         }}
+        componentsProps={{
+          footer: { totalCount, pageSize }
+        }}
         initialState={{
           pagination: {
             pageSize: rowsState.pageSize,
@@ -81,10 +86,15 @@ const MuiDataGrid = ({
 };
 
 MuiDataGrid.propTypes = {
+  // apiRef: PropTypes.func,
   isCheckbox: PropTypes.bool,
-  // isHideFooter: PropTypes.bool,
+  // isDisableSelection: PropTypes.bool,
   columns: PropTypes.array,
-  rowsState: PropTypes.any,
+  rowsState: {
+    page: PropTypes.number,
+    pageSize: PropTypes.number,
+    rows: PropTypes.array
+  },
   totalCount: PropTypes.number,
   setRowsState: PropTypes.func,
   handleCellClick: PropTypes.func,