@@ -62,6 +62,55 @@ export function FiDataGrid({ rows, columns, sx, autoHeight, | |||||
} | } | ||||
}, []); | }, []); | ||||
React.useEffect(() => { | |||||
if (sx) { | |||||
set_sx(sx); | |||||
} | |||||
}, [sx]); | |||||
React.useEffect(() => { | |||||
if (hideFooterSelectedRowCount) { | |||||
setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount); | |||||
} | |||||
}, [hideFooterSelectedRowCount]); | |||||
React.useEffect(() => { | |||||
if (rowModesModel) { | |||||
set_rowModesModel(rowModesModel) | |||||
} | |||||
}, [rowModesModel]); | |||||
React.useEffect(() => { | |||||
if (rows) { | |||||
set_rows(rows) | |||||
} | |||||
}, [rows]); | |||||
React.useEffect(() => { | |||||
if (columns) { | |||||
set_columns(columns) | |||||
} | |||||
}, [columns]); | |||||
React.useEffect(() => { | |||||
if (pageSizeOptions) { | |||||
set_pageSizeOptions(pageSizeOptions) | |||||
} | |||||
}, [pageSizeOptions]); | |||||
React.useEffect(() => { | |||||
if(autoHeight != undefined){ | |||||
set_autoHeight(autoHeight) | |||||
} | |||||
}, [autoHeight]); | |||||
React.useEffect(() => { | |||||
if(editMode){ | |||||
set_editMode(editMode); | |||||
} | |||||
}, [editMode]); | |||||
return ( | return ( | ||||
<DataGrid | <DataGrid | ||||
{...props} | {...props} | ||||
@@ -1,14 +1,12 @@ | |||||
// material-ui | // material-ui | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
import { | import { | ||||
Stack, | Stack, | ||||
Typography, | Typography, | ||||
Button, | Button, | ||||
Dialog, DialogTitle, DialogContent, DialogActions | Dialog, DialogTitle, DialogContent, DialogActions | ||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import {FiDataGrid} from "components/FiDataGrid"; | |||||
import * as DateUtils from "utils/DateUtils" | import * as DateUtils from "utils/DateUtils" | ||||
import * as StatusUtils from "./PublicNoteStatusUtils"; | import * as StatusUtils from "./PublicNoteStatusUtils"; | ||||
import {useNavigate} from "react-router-dom"; | import {useNavigate} from "react-router-dom"; | ||||
@@ -111,36 +109,19 @@ export default function SubmittedTab({ rows }) { | |||||
return ( | return ( | ||||
<> | <> | ||||
<div style={{ height: 400, width: '100%', padding: 4 }}> | <div style={{ height: 400, width: '100%', padding: 4 }}> | ||||
<DataGrid | |||||
<FiDataGrid | |||||
checkboxSelection | checkboxSelection | ||||
disableRowSelectionOnClick | disableRowSelectionOnClick | ||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
editMode="row" | |||||
rowSelectionModel={selectedRowItems} | |||||
initialState={{ | initialState={{ | ||||
pagination: { | pagination: { | ||||
paginationModel: { page: 0, pageSize: 5 }, | paginationModel: { page: 0, pageSize: 5 }, | ||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | |||||
autoHeight={true} | |||||
onRowSelectionModelChange={(newSelection) => { | onRowSelectionModelChange={(newSelection) => { | ||||
setSelectedRowItems(newSelection); | setSelectedRowItems(newSelection); | ||||
}} | }} | ||||
sx={{ | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
'& .MuiDataGrid-cell': { | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
}, | |||||
'& .MuiDataGrid-footerContainer':{ | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
} | |||||
}} | |||||
/> | /> | ||||
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | <Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | ||||
</div> | </div> | ||||
@@ -1,27 +1,23 @@ | |||||
// material-ui | // material-ui | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | |||||
DataGrid, | |||||
} from "@mui/x-data-grid"; | |||||
import { | import { | ||||
Button | Button | ||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import { useEffect } from "react"; | |||||
import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
import * as StatusUtils from "./PublicNoteStatusUtils"; | import * as StatusUtils from "./PublicNoteStatusUtils"; | ||||
import {useNavigate} from "react-router-dom"; | import {useNavigate} from "react-router-dom"; | ||||
import {FiDataGrid} from "components/FiDataGrid"; | |||||
// ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
export default function SearchPublicNoticeTable({ recordList }) { | export default function SearchPublicNoticeTable({ recordList }) { | ||||
const [rows, setRows] = React.useState(recordList); | |||||
const [rowModesModel] = React.useState({}); | |||||
const [rows, setRows] = React.useState([]); | |||||
const navigate = useNavigate() | const navigate = useNavigate() | ||||
const handleDetailClick = (params) => () => { | const handleDetailClick = (params) => () => { | ||||
navigate('/publicNotice/'+ params.id); | navigate('/publicNotice/'+ params.id); | ||||
}; | }; | ||||
useEffect(() => { | |||||
React.useEffect(() => { | |||||
setRows(recordList); | setRows(recordList); | ||||
}, [recordList]); | }, [recordList]); | ||||
@@ -98,32 +94,14 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
return ( | return ( | ||||
<div style={{ height: 400, width: '100%' }}> | <div style={{ height: 400, width: '100%' }}> | ||||
<DataGrid | |||||
hideFooterSelectedRowCount={true} | |||||
<FiDataGrid | |||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
editMode="row" | |||||
rowModesModel={rowModesModel} | |||||
initialState={{ | initialState={{ | ||||
pagination: { | pagination: { | ||||
paginationModel: { page: 0, pageSize: 5 }, | paginationModel: { page: 0, pageSize: 5 }, | ||||
}, | }, | ||||
}} | }} | ||||
pageSizeOptions={[5, 10]} | |||||
autoHeight | |||||
sx={{ | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
'& .MuiDataGrid-cell': { | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
}, | |||||
'& .MuiDataGrid-footerContainer':{ | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
} | |||||
}} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||