feat: custom feat-custom-pagination

package.json

@@ -20,6 +20,8 @@
     "@mui/system": "^5.4.1",
     "@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/parking/Review.jsx

@@ -140,7 +140,10 @@ 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) => {

src/views/form/DataGridPaging.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { DataGrid, gridPageSelector, gridPageCountSelector, useGridApiContext, useGridApiRef, useGridSelector } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Pagination from '@mui/material/Pagination';
+
+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({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 10
+  });
+
+  const apiRef = useGridApiRef();
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        loading={loading}
+        apiRef={apiRef}
+        pagination
+        pageSize={10}
+        // hideFooter
+        components={{
+          Toolbar
+        }}
+      />
+    </div>
+  );
+}

src/views/form/Modal/index.js

@@ -6,6 +6,7 @@ import SecondaryAction from 'ui-component/cards/CardSecondaryAction';
 import NestedModal from './NestedModal';
 import BasicModal from './BasicModal';
 import CmmModal from './CmmModal';
+import UseGridSelector from '../DataGridPaging';
 
 // ==============================|| MODAL PAGE ||============================== //
 
@@ -15,6 +16,7 @@ const Modal = () => (
     {/* <SimpleModal /> */}
     <BasicModal />
     <NestedModal />
+    <UseGridSelector />
   </MainCard>
 );
 

src/views/form/MuiDataGrid.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 // material-ui
 // import type { GridColumns } from '@mui/x-data-grid/colDef';
 import { DataGrid, useGridApiRef, gridPageSelector, useGridApiContext, useGridSelector, gridPageCountSelector } from '@mui/x-data-grid';
-import { Box, Pagination } from '@mui/material';
+import Box from '@mui/material/Box';
+import Pagination from '@mui/material/Pagination';
 import { useTheme } from '@mui/material/styles';
 import dataGridKoKR from './defaultDataGridLocale';
 
@@ -42,20 +43,20 @@ const MuiDataGrid = ({
     <Box
       sx={{
         height: 670,
-        width: '100%',
-        '& .MuiDataGrid-root': {
-          border: 'none',
-          '& .MuiDataGrid-cell': {
-            borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-          },
-          '& .MuiDataGrid-columnsContainer': {
-            color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900',
-            borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-          },
-          '& .MuiDataGrid-columnSeparator': {
-            color: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
-          }
-        }
+        width: '100%'
+        // '& .MuiDataGrid-root': {
+        //   border: 'none',
+        //   '& .MuiDataGrid-cell': {
+        //     borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+        //   },
+        //   '& .MuiDataGrid-columnsContainer': {
+        //     color: theme.palette.mode === 'dark' ? 'grey.600' : 'grey.900',
+        //     borderColor: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+        //   },
+        //   '& .MuiDataGrid-columnSeparator': {
+        //     color: theme.palette.mode === 'dark' ? theme.palette.text.primary + 15 : 'grey.200'
+        //   }
+        // }
       }}
     >
       <DataGrid
@@ -64,7 +65,7 @@ const MuiDataGrid = ({
         showColumnRightBorder
         hideFooterPagination={isHidePagination}
         localeText={dataGridKoKR}
-        paginationMode="server"
+        // paginationMode="server"
         getRowId={(row) => row.rowId}
         rowCount={totalCount}
         checkboxSelection={isCheckbox}
@@ -79,6 +80,8 @@ const MuiDataGrid = ({
         rowsPerPageOptions={[10, 50, 100]}
         onCellClick={handleCellClick}
         onSelectionModelChange={handleSelection}
+        // hideFooter
+        pagination
         components={{ CustomPagination }}
       />
     </Box>