put back everything else minus the styling
This commit is contained in:
csawatzky
parent
77405b36b0
commit
a48145b25e
1 changed files with 121 additions and 121 deletions
|
|
@ -96,7 +96,7 @@ interface Props<T> {
|
|||
|
||||
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
||||
const {
|
||||
// rows,
|
||||
rows,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
|
|
@ -136,7 +136,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
|
||||
|
||||
console.log("Most of the function and the table container")
|
||||
console.log("Put back everything minus the style classes")
|
||||
|
||||
const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
const saved = localStorage.getItem(filterKey);
|
||||
|
|
@ -260,125 +260,125 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
}
|
||||
|
||||
// const renderMobileRow = (row: T) => {
|
||||
// if (renderMobile) return (
|
||||
// renderMobile(row)
|
||||
// )
|
||||
// if (columns) {
|
||||
// return (
|
||||
// <Grid2 container direction={"row"} spacing={1} >
|
||||
// {columns.map((column, index) => {
|
||||
// return (
|
||||
// <React.Fragment key={"mobile-row-column-"+index}>
|
||||
// { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
|
||||
// <Typography fontWeight={"bold"} >
|
||||
// {column.title+": "}
|
||||
// </Typography>
|
||||
// </Grid2>}
|
||||
// <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
|
||||
// {column.render(row)}
|
||||
// </Grid2>
|
||||
// </React.Fragment>
|
||||
// )
|
||||
// })}
|
||||
// </Grid2>
|
||||
// )
|
||||
// }
|
||||
// return (
|
||||
// Object.keys(row).map((key, index) => {
|
||||
// let value = row[key as keyof typeof row]
|
||||
const renderMobileRow = (row: T) => {
|
||||
if (renderMobile) return (
|
||||
renderMobile(row)
|
||||
)
|
||||
if (columns) {
|
||||
return (
|
||||
<Grid2 container direction={"row"} spacing={1} >
|
||||
{columns.map((column, index) => {
|
||||
return (
|
||||
<React.Fragment key={"mobile-row-column-"+index}>
|
||||
{ !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
|
||||
<Typography fontWeight={"bold"} >
|
||||
{column.title+": "}
|
||||
</Typography>
|
||||
</Grid2>}
|
||||
<Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
|
||||
{column.render(row)}
|
||||
</Grid2>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Grid2>
|
||||
)
|
||||
}
|
||||
return (
|
||||
Object.keys(row).map((key, index) => {
|
||||
let value = row[key as keyof typeof row]
|
||||
|
||||
// return (
|
||||
// <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
|
||||
// <Grid2 size={{ xs: 4 }} alignContent={"center"} >
|
||||
// <Typography fontWeight={"bold"} >
|
||||
// {capitalize(key)+": "}
|
||||
// </Typography>
|
||||
// </Grid2>
|
||||
// <Grid2 size={{ xs: 8 }}>
|
||||
// <Typography>
|
||||
// {value+""}
|
||||
// </Typography>
|
||||
// </Grid2>
|
||||
// </Grid2>
|
||||
// )
|
||||
// })
|
||||
// )
|
||||
// }
|
||||
return (
|
||||
<Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
|
||||
<Grid2 size={{ xs: 4 }} alignContent={"center"} >
|
||||
<Typography fontWeight={"bold"} >
|
||||
{capitalize(key)+": "}
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 8 }}>
|
||||
<Typography>
|
||||
{value+""}
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
)
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
// if (isMobile || mobileView) return (
|
||||
// <Box>
|
||||
// <Box className={classes.mobileTitleBox}>
|
||||
// {renderTitle()}
|
||||
// {renderSubtitle()}
|
||||
// {setSearchText && searchBar()}
|
||||
// </Box>
|
||||
// {rows.map((row, index) => {
|
||||
// return (
|
||||
// <Card className={classNames(classes.card, onRowClick&&classes.rowHover)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
|
||||
// {renderMobileRow(row)}
|
||||
// {renderGutter &&
|
||||
// <>
|
||||
// <Divider/>
|
||||
// <Collapse className={classes.gutter} in={openGutters.includes(index)} >
|
||||
// {renderGutter(row)}
|
||||
// </Collapse>
|
||||
// {openGutters.includes(index) && <Divider/>}
|
||||
// <ListItemButton
|
||||
// sx={{
|
||||
// width: "100%",
|
||||
// display: "flex",
|
||||
// justifyContent: "center",
|
||||
// padding: gutterPadding
|
||||
// }}
|
||||
// onClick={(event) => handleCollapse(index, event)}
|
||||
// // style={{pre}}
|
||||
// >
|
||||
// <IconButton
|
||||
// sx={{
|
||||
// transform: openGutters.includes(index) ?
|
||||
// 'rotate(-90deg)' : 'rotate(90deg)',
|
||||
// transition: 'transform 0.3s ease',
|
||||
// alignContent: "center"
|
||||
// }}
|
||||
// >
|
||||
// <ChevronRight/>
|
||||
// </IconButton>
|
||||
// </ListItemButton>
|
||||
// </>
|
||||
// }
|
||||
// </Card>
|
||||
// )
|
||||
// })}
|
||||
// {(rows && rows.length < 1) &&
|
||||
// (!isLoading ?
|
||||
// <Typography sx={{ textAlign: "center" }} color="textSecondary">
|
||||
// { noDataMessage ? noDataMessage : "No data."}
|
||||
// </Typography>
|
||||
// :
|
||||
// <Box sx={{ width: "100%", textAlign: "center" }} >
|
||||
// <CircularProgress/>
|
||||
// </Box>
|
||||
// )
|
||||
// }
|
||||
// </Box>
|
||||
// )
|
||||
if (isMobile || mobileView) return (
|
||||
<Box>
|
||||
<Box /*className={classes.mobileTitleBox}*/>
|
||||
{renderTitle()}
|
||||
{renderSubtitle()}
|
||||
{setSearchText && searchBar()}
|
||||
</Box>
|
||||
{rows.map((row, index) => {
|
||||
return (
|
||||
<Card /*className={classNames(classes.card, onRowClick&&classes.rowHover)}*/ key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
|
||||
{renderMobileRow(row)}
|
||||
{renderGutter &&
|
||||
<>
|
||||
<Divider/>
|
||||
<Collapse /*className={classes.gutter}*/ in={openGutters.includes(index)} >
|
||||
{renderGutter(row)}
|
||||
</Collapse>
|
||||
{openGutters.includes(index) && <Divider/>}
|
||||
<ListItemButton
|
||||
sx={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
padding: gutterPadding
|
||||
}}
|
||||
onClick={(event) => handleCollapse(index, event)}
|
||||
// style={{pre}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
transform: openGutters.includes(index) ?
|
||||
'rotate(-90deg)' : 'rotate(90deg)',
|
||||
transition: 'transform 0.3s ease',
|
||||
alignContent: "center"
|
||||
}}
|
||||
>
|
||||
<ChevronRight/>
|
||||
</IconButton>
|
||||
</ListItemButton>
|
||||
</>
|
||||
}
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
{(rows && rows.length < 1) &&
|
||||
(!isLoading ?
|
||||
<Typography sx={{ textAlign: "center" }} color="textSecondary">
|
||||
{ noDataMessage ? noDataMessage : "No data."}
|
||||
</Typography>
|
||||
:
|
||||
<Box sx={{ width: "100%", textAlign: "center" }} >
|
||||
<CircularProgress/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
)
|
||||
|
||||
// const filter = (colName: string) => {
|
||||
// let newFilterList = [...filterList]
|
||||
// if (filterList.includes(colName)) {
|
||||
// newFilterList = newFilterList.filter(name => name !== colName)
|
||||
// } else {
|
||||
// newFilterList.push(colName)
|
||||
// }
|
||||
// setFilterList(newFilterList)
|
||||
// }
|
||||
const filter = (colName: string) => {
|
||||
let newFilterList = [...filterList]
|
||||
if (filterList.includes(colName)) {
|
||||
newFilterList = newFilterList.filter(name => name !== colName)
|
||||
} else {
|
||||
newFilterList.push(colName)
|
||||
}
|
||||
setFilterList(newFilterList)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<TableContainer /*className={classes.tableContainer}*/ component={Paper}>
|
||||
{/* <Table>
|
||||
<Table>
|
||||
<TableHead>
|
||||
|
||||
<TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
|
||||
|
|
@ -396,7 +396,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
{actions && actions}
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
{setSearchText &&<Box className={classes.searchContainer}>
|
||||
{setSearchText &&<Box /*className={classes.searchContainer}*/>
|
||||
{searchBar()}
|
||||
</Box>}
|
||||
</Grid2>
|
||||
|
|
@ -459,7 +459,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
// if (filterList.includes()) return null
|
||||
return (
|
||||
<React.Fragment key={"row-"+index}>
|
||||
<TableRow onClick={() => onRowClick&&onRowClick(row)} className={onRowClick ? classes.rowHover : undefined}>
|
||||
<TableRow onClick={() => onRowClick&&onRowClick(row)} /*className={onRowClick ? classes.rowHover : undefined}*/>
|
||||
{rowSelect &&
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
|
|
@ -508,7 +508,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
}
|
||||
</TableRow>
|
||||
{renderGutter &&
|
||||
<TableRow className={classes.gutter}>
|
||||
<TableRow /*className={classes.gutter}*/>
|
||||
<TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
|
||||
<Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
|
||||
{renderGutter(row)}
|
||||
|
|
@ -530,8 +530,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
</TableRow>
|
||||
}
|
||||
</TableBody>
|
||||
</Table> */}
|
||||
{/* {!hidePagination &&
|
||||
</Table>
|
||||
{!hidePagination &&
|
||||
<TablePagination
|
||||
rowsPerPageOptions={rowsPerPageOptions ? rowsPerPageOptions : [5, 10, 20]}
|
||||
component="div"
|
||||
|
|
@ -541,8 +541,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
onPageChange={(_event, page) => handlePageChange(page)}
|
||||
onRowsPerPageChange={handleRowsPerPageChange}
|
||||
/>
|
||||
} */}
|
||||
{/* <Menu
|
||||
}
|
||||
<Menu
|
||||
id="userMenu"
|
||||
anchorEl={columnAnchor}
|
||||
open={columnAnchor !== null}
|
||||
|
|
@ -566,7 +566,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Menu> */}
|
||||
</Menu>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue