diff --git a/src/views/form/CustomPagination.js b/src/views/form/CustomPagination.js index 70dc416..364cfbc 100644 --- a/src/views/form/CustomPagination.js +++ b/src/views/form/CustomPagination.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; import { Typography } from '@mui/material'; -const CustomPagination = ({ totalCount }) => { +const CustomPagination = ({ totalCount, numSelected }) => { const apiRef = useGridApiContext(); const page = useGridSelector(apiRef, gridPageSelector); const pageCount = useGridSelector(apiRef, gridPageCountSelector); @@ -30,6 +30,11 @@ const CustomPagination = ({ totalCount }) => { }} /> )} + {numSelected > 0 && ( + + {numSelected}행 선택 + + )} {pageCount > 1 && ( { }; CustomPagination.propTypes = { - totalCount: PropTypes.number.isRequired - // pageSize: PropTypes.number.isRequired + totalCount: PropTypes.number.isRequired, + numSelected: PropTypes.number }; export default CustomPagination; diff --git a/src/views/form/MuiDataGrid.jsx b/src/views/form/MuiDataGrid.jsx index c15ab13..f1ca431 100644 --- a/src/views/form/MuiDataGrid.jsx +++ b/src/views/form/MuiDataGrid.jsx @@ -9,6 +9,8 @@ import Box from '@mui/material/Box'; import { useTheme } from '@mui/styles'; import dataGridKoKR from './defaultDataGridLocale'; import CustomPagination from './CustomPagination'; +import { IconButton, Toolbar, Tooltip, Typography } from '@mui/material'; +import DeleteIcon from '@mui/icons-material/Delete'; // TODO : grid style /* @@ -91,9 +93,27 @@ const styles = (theme) => ({ }); */ +const EnhancedTableToolbar = ({ children }) => ( + + {children} + +); + +EnhancedTableToolbar.propTypes = { + children: PropTypes.node +}; + // project imports const MuiDataGrid = ({ // apiRef = () => {}, + isToolbar = false, + children =
, isCheckbox = false, // isDisableSelection = true, columns, @@ -107,6 +127,7 @@ const MuiDataGrid = ({ }) => { const theme = useTheme(); const { pageSize } = rowsState; + const numSelected = selectionModel.length; const getRowSpacing = useCallback( (params) => ({ @@ -141,6 +162,7 @@ const MuiDataGrid = ({ } }} > + {isToolbar && {children}}