fix: Pagination custom 적용

package.json

@@ -21,7 +21,6 @@
     "@mui/utils": "^5.4.1",
     "@mui/x-data-grid": "^5.5.0",
     "@mui/x-data-grid-generator": "^5.7.0",
-    "@mui/x-data-grid-pro": "^5.7.0",
     "@reduxjs/toolkit": "^1.7.2",
     "@tabler/icons": "^1.53.0",
     "apexcharts": "^3.33.1",

src/views/biz/board/PublicBoard.jsx

@@ -38,10 +38,10 @@ const PublicBoard = () => {
       headerAlign: 'center',
       field: 'inFile',
       align: 'center',
-      renderCell: (params) => {
+      renderCell: (params) => (
-        console.log(params.row.inFilename);
+        // console.log(params.row.inFilename);
-        return <>{params.row.inFilename ? <IconFileText stroke={1.5} size="1rem" /> : ''}</>;
+        <>{params.row.inFilename ? <IconFileText stroke={1.5} size="1rem" /> : ''}</>
-      }
+      )
     },
     { headerName: '작성일자', headerAlign: 'center', field: 'inNalja', align: 'center' },
     { headerName: '조회수', headerAlign: 'center', field: 'inHit', align: 'right' }
@@ -54,7 +54,7 @@ const PublicBoard = () => {
     };
 
     opstBizService.getPublicBoardList(params).then((response) => {
-      console.log(response);
+      // console.log(response);
       if (response && response.data) {
         setTotalCount(response.count);
         setRowsState((prevState) => ({ ...prevState, rows: response.data }));

src/views/biz/parking/Regist.jsx

@@ -200,7 +200,7 @@ const ParkingRegister = () => {
       </Grid>
       <MuiDataGrid
         isCheckbox
-        isHidePagination
+        isHideFooter
         columns={columns}
         rowsState={rowsStatus}
         totalCount={totalCount}

src/views/biz/parking/Review.jsx

@@ -46,6 +46,7 @@ const style = {
 
 const ParkingReview = () => {
   const isInit = useRef(true);
+  // const apiRef = useGridApiContext();
   const navigate = useNavigate();
 
   const theme = useTheme();
@@ -140,10 +141,7 @@ const ParkingReview = () => {
   const search = () => {
     const params = {
       page: rowsState.page,
-      size: rowsState.pageSize,
+      size: rowsState.pageSize
-      rowLength: 100,
-      maxColumns: 10,
-      dataSet: 'Commodity'
     };
 
     opstBizService.getSimsa680GroupList({ ...params, msYear: selectedYear, msChasu: searchTxt }).then((response) => {
@@ -151,6 +149,8 @@ const ParkingReview = () => {
       if (response && response.data) {
         setTotalCount(response.count);
         setRowsState((prevState) => ({ ...prevState, rows: response.data }));
+        // apiRef.current.forceUpdate(); //  .updateRowData([]);
+        // apiRef.current.updateRowData([]);
       }
     });
   };

src/views/form/CustomPagination.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { gridPageSelector, gridPageCountSelector, useGridApiContext, useGridSelector } from '@mui/x-data-grid';
+import Pagination from '@mui/material/Pagination';
+import { PaginationItem } from '@mui/lab';
+import { Box } from '@mui/system';
+import { Stack } from '@mui/material';
+
+const CustomPagination = () => {
+  const apiRef = useGridApiContext();
+  const page = useGridSelector(apiRef, gridPageSelector);
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+  console.log(apiRef.current.getRowsCount());
+
+  return (
+    <>
+      <span>Total : {apiRef.current.getRowsCount()}</span>
+      <Pagination
+        sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
+        color="primary"
+        variant="outlined"
+        shape="rounded"
+        size="small"
+        showFirstButton
+        showLastButton
+        count={pageCount}
+        page={page + 1}
+        boundaryCount={5}
+        siblingCount={2}
+        pagesize={10}
+        onChange={(event, value) => {
+          console.log(`change-page : ${value}`);
+          apiRef.current.setPage(value - 1);
+        }}
+      />
+    </>
+  );
+};
+export default CustomPagination;

src/views/form/DataGridPaging.js

@@ -1,23 +1,7 @@
 import * as React from 'react';
-import { DataGrid, gridPageSelector, gridPageCountSelector, useGridApiContext, useGridApiRef, useGridSelector } from '@mui/x-data-grid';
+import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import Pagination from '@mui/material/Pagination';
+import CustomPagination from './CustomPagination';
-
-const Toolbar = () => {
-  const apiRef = useGridApiContext();
-  const page = useGridSelector(apiRef, gridPageSelector);
-  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-
-  return (
-    <Pagination
-      sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
-      color="primary"
-      count={pageCount}
-      page={page + 1}
-      onChange={(event, value) => apiRef.current.setPage(value - 1)}
-    />
-  );
-};
 
 export default function UseGridSelector() {
   const { data, loading } = useDemoData({
@@ -36,9 +20,9 @@ export default function UseGridSelector() {
         apiRef={apiRef}
         pagination
         pageSize={10}
-        // hideFooter
+        hideFooterPagination
         components={{
-          Toolbar
+          Footer: CustomPagination // Toolbar
         }}
       />
     </div>

src/views/form/MuiDataGrid.jsx

@@ -1,41 +1,22 @@
 import PropTypes from 'prop-types';
 
 // material-ui
-// import type { GridColumns } from '@mui/x-data-grid/colDef';
+import { DataGrid, useGridApiRef } from '@mui/x-data-grid';
-import { DataGrid, useGridApiRef, gridPageSelector, useGridApiContext, useGridSelector, gridPageCountSelector } from '@mui/x-data-grid';
 import Box from '@mui/material/Box';
-import Pagination from '@mui/material/Pagination';
 import { useTheme } from '@mui/material/styles';
 import dataGridKoKR from './defaultDataGridLocale';
-
+import CustomPagination from './CustomPagination';
-const CustomPagination = () => {
-  const apiRef = useGridApiContext();
-  const page = useGridSelector(apiRef, gridPageSelector);
-  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-
-  return (
-    <Pagination
-      sx={(theme) => ({ padding: theme.spacing(1.5, 0) })}
-      color="primary"
-      count={pageCount}
-      page={page + 1}
-      onChange={(event, value) => apiRef.current.setPage(value - 1)}
-    />
-  );
-};
 
 // project imports
 const MuiDataGrid = ({
   isCheckbox = false,
-  isHidePagination = false,
   columns,
-  rowsState = { page: 0, pageSize: 1000, rows: [] },
+  rowsState = { page: 0, pageSize: 10, rows: [] },
   totalCount = 0,
   setRowsState = () => {},
   handleCellClick = () => {},
   handleSelection = () => {}
 }) => {
-  // const { columns, rowsState, totalCount, setRowsState } = props;
   const theme = useTheme();
   const apiRef = useGridApiRef();
 
@@ -43,46 +24,57 @@ const MuiDataGrid = ({
     <Box
       sx={{
         height: 670,
-        width: '100%'
+        width: '100%',
-        // '& .MuiDataGrid-root': {
+        '& .MuiDataGrid-root': {
-        //   border: 'none',
+          border: 'none',
-        //   '& .MuiDataGrid-cell': {
+          '& .MuiDataGrid-cell': {
-        //     borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+            borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-        //   },
+          },
-        //   '& .MuiDataGrid-columnsContainer': {
+          '& .MuiDataGrid-columnsContainer': {
-        //     color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900',
+            color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900',
-        //     borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+            borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-        //   },
+          },
-        //   '& .MuiDataGrid-columnSeparator': {
+          '& .MuiDataGrid-columnSeparator': {
-        //     color: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+            color: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-        //   }
+          }
-        // }
+        },
+        '& .MuiPagination-root': {
+          '& .MuiPagination-ul': {
+            justifyContent: 'center'
+          }
+        }
       }}
     >
       <DataGrid
-        apiRef={apiRef}
+        // apiRef={apiRef}
-        showCellRightBorder
+        // showCellRightBorder
-        showColumnRightBorder
+        // showColumnRightBorder
-        hideFooterPagination={isHidePagination}
         localeText={dataGridKoKR}
-        // paginationMode="server"
+        paginationMode="server"
         getRowId={(row) => row.rowId}
         rowCount={totalCount}
         checkboxSelection={isCheckbox}
         disableSelectionOnClick
         // isRowSelectable={(params: any) => params.row.id > 0}
-        // rows={tableData}
         columns={columns}
-        // pageSize={pageSize}
         {...rowsState}
         onPageChange={(page) => setRowsState((prev) => ({ ...prev, page }))}
         onPageSizeChange={(pageSize) => setRowsState((prev) => ({ ...prev, page: 0, pageSize }))}
         rowsPerPageOptions={[10, 50, 100]}
         onCellClick={handleCellClick}
         onSelectionModelChange={handleSelection}
-        // hideFooter
         pagination
-        components={{ CustomPagination }}
+        // hideFooter
+        // hideFooterPagination
+        components={{
+          Footer: CustomPagination
+        }}
+        initialState={{
+          pagination: {
+            pageSize: rowsState.pageSize,
+            page: 1
+          }
+        }}
       />
     </Box>
   );
@@ -90,7 +82,7 @@ const MuiDataGrid = ({
 
 MuiDataGrid.propTypes = {
   isCheckbox: PropTypes.bool,
-  isHidePagination: PropTypes.bool,
+  // isHideFooter: PropTypes.bool,
   columns: PropTypes.array,
   rowsState: PropTypes.any,
   totalCount: PropTypes.number,