diff --git a/package.json b/package.json index 72e2e77..893165e 100755 --- a/package.json +++ b/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", diff --git a/src/views/biz/board/PublicBoard.jsx b/src/views/biz/board/PublicBoard.jsx index d93da21..2a2e9f6 100644 --- a/src/views/biz/board/PublicBoard.jsx +++ b/src/views/biz/board/PublicBoard.jsx @@ -38,10 +38,10 @@ const PublicBoard = () => { headerAlign: 'center', field: 'inFile', align: 'center', - renderCell: (params) => { - console.log(params.row.inFilename); - return <>{params.row.inFilename ? : ''}; - } + renderCell: (params) => ( + // console.log(params.row.inFilename); + <>{params.row.inFilename ? : ''} + ) }, { 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 })); diff --git a/src/views/biz/parking/Regist.jsx b/src/views/biz/parking/Regist.jsx index f84cc3b..c6e6a3a 100644 --- a/src/views/biz/parking/Regist.jsx +++ b/src/views/biz/parking/Regist.jsx @@ -200,7 +200,7 @@ const ParkingRegister = () => { { 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, - rowLength: 100, - maxColumns: 10, - dataSet: 'Commodity' + size: rowsState.pageSize }; 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([]); } }); }; diff --git a/src/views/form/CustomPagination.js b/src/views/form/CustomPagination.js new file mode 100644 index 0000000..ec329ed --- /dev/null +++ b/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 ( + <> + Total : {apiRef.current.getRowsCount()} + ({ 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; diff --git a/src/views/form/DataGridPaging.js b/src/views/form/DataGridPaging.js index 759ec53..4f250bc 100644 --- a/src/views/form/DataGridPaging.js +++ b/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'; - -const Toolbar = () => { - const apiRef = useGridApiContext(); - const page = useGridSelector(apiRef, gridPageSelector); - const pageCount = useGridSelector(apiRef, gridPageCountSelector); - - return ( - ({ padding: theme.spacing(1.5, 0) })} - color="primary" - count={pageCount} - page={page + 1} - onChange={(event, value) => apiRef.current.setPage(value - 1)} - /> - ); -}; +import CustomPagination from './CustomPagination'; 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 }} /> diff --git a/src/views/form/MuiDataGrid.jsx b/src/views/form/MuiDataGrid.jsx index ccaceba..c5be62e 100644 --- a/src/views/form/MuiDataGrid.jsx +++ b/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, gridPageSelector, useGridApiContext, useGridSelector, gridPageCountSelector } from '@mui/x-data-grid'; +import { DataGrid, useGridApiRef } 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'; - -const CustomPagination = () => { - const apiRef = useGridApiContext(); - const page = useGridSelector(apiRef, gridPageSelector); - const pageCount = useGridSelector(apiRef, gridPageCountSelector); - - return ( - ({ padding: theme.spacing(1.5, 0) })} - color="primary" - count={pageCount} - page={page + 1} - onChange={(event, value) => apiRef.current.setPage(value - 1)} - /> - ); -}; +import CustomPagination from './CustomPagination'; // 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 = ({ 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 + } + }} /> ); @@ -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,