added back in most of the functions and the box changed back to the table container, left out the styles however
This commit is contained in:
csawatzky
parent
dd80f56f5a
commit
77405b36b0
1 changed files with 135 additions and 137 deletions
|
|
@ -97,30 +97,30 @@ interface Props<T> {
|
|||
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
||||
const {
|
||||
// rows,
|
||||
// total,
|
||||
// page,
|
||||
// pageSize,
|
||||
// setPage,
|
||||
// handleRowsPerPageChange,
|
||||
// // title,
|
||||
// // subtitle,
|
||||
// renderGutter,
|
||||
// gutterPadding,
|
||||
// setSearchText,
|
||||
// isLoading,
|
||||
// multiGutter,
|
||||
// // columns,
|
||||
// rowsPerPageOptions,
|
||||
// noDataMessage,
|
||||
// renderMobile,
|
||||
// hideKeys,
|
||||
// onRowClick,
|
||||
// actions,
|
||||
// rowSelect,
|
||||
// selectedRows,
|
||||
// customElement,
|
||||
// mobileView,
|
||||
// hidePagination
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
setPage,
|
||||
handleRowsPerPageChange,
|
||||
// title,
|
||||
// subtitle,
|
||||
renderGutter,
|
||||
gutterPadding,
|
||||
setSearchText,
|
||||
isLoading,
|
||||
multiGutter,
|
||||
// columns,
|
||||
rowsPerPageOptions,
|
||||
noDataMessage,
|
||||
renderMobile,
|
||||
hideKeys,
|
||||
onRowClick,
|
||||
actions,
|
||||
rowSelect,
|
||||
selectedRows,
|
||||
customElement,
|
||||
mobileView,
|
||||
hidePagination
|
||||
} = props
|
||||
//const classes = useStyles();
|
||||
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
|
||||
|
|
@ -136,129 +136,129 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
|
||||
|
||||
console.log("Commented out nearly everything")
|
||||
console.log("Most of the function and the table container")
|
||||
|
||||
// const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
// const saved = localStorage.getItem(filterKey);
|
||||
// return saved ? JSON.parse(saved) : [];
|
||||
// });
|
||||
const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
const saved = localStorage.getItem(filterKey);
|
||||
return saved ? JSON.parse(saved) : [];
|
||||
});
|
||||
|
||||
// useEffect(() => {
|
||||
// localStorage.setItem(filterKey, JSON.stringify(filterList));
|
||||
// }, [filterList])
|
||||
useEffect(() => {
|
||||
localStorage.setItem(filterKey, JSON.stringify(filterList));
|
||||
}, [filterList])
|
||||
|
||||
// const openColumnMenu = (event: any) => {
|
||||
// setColumnAnchor(event.currentTarget);
|
||||
// // setUserMenuIsOpen(true);
|
||||
// };
|
||||
const openColumnMenu = (event: any) => {
|
||||
setColumnAnchor(event.currentTarget);
|
||||
// setUserMenuIsOpen(true);
|
||||
};
|
||||
|
||||
// const closeColumnMenu = () => {
|
||||
// setColumnAnchor(null);
|
||||
// // setUserMenuIsOpen(true);
|
||||
// };
|
||||
const closeColumnMenu = () => {
|
||||
setColumnAnchor(null);
|
||||
// setUserMenuIsOpen(true);
|
||||
};
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!setSearchText) return;
|
||||
// if (inputSearchText === undefined) return;
|
||||
// setHandler(setTimeout(() => {
|
||||
// setSearchText(inputSearchText);
|
||||
// }, 750)); // Delay of 750ms
|
||||
useEffect(() => {
|
||||
if (!setSearchText) return;
|
||||
if (inputSearchText === undefined) return;
|
||||
setHandler(setTimeout(() => {
|
||||
setSearchText(inputSearchText);
|
||||
}, 750)); // Delay of 750ms
|
||||
|
||||
// return () => clearTimeout(handler); // Cleanup on change
|
||||
// }, [inputSearchText]);
|
||||
return () => clearTimeout(handler); // Cleanup on change
|
||||
}, [inputSearchText]);
|
||||
|
||||
// const handleCollapse = (index: number, event: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => {
|
||||
// event.stopPropagation();
|
||||
// if (multiGutter) {
|
||||
// if (openGutters.includes(index)) {
|
||||
// setOpenGutters(openGutters => openGutters.filter(num => num !== index));
|
||||
// } else {
|
||||
// setOpenGutters(openGutters => [...openGutters, index]);
|
||||
// }
|
||||
// } else {
|
||||
// if (openGutters.includes(index)) {
|
||||
// setOpenGutters([])
|
||||
// } else {
|
||||
// setOpenGutters([index])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
const handleCollapse = (index: number, event: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => {
|
||||
event.stopPropagation();
|
||||
if (multiGutter) {
|
||||
if (openGutters.includes(index)) {
|
||||
setOpenGutters(openGutters => openGutters.filter(num => num !== index));
|
||||
} else {
|
||||
setOpenGutters(openGutters => [...openGutters, index]);
|
||||
}
|
||||
} else {
|
||||
if (openGutters.includes(index)) {
|
||||
setOpenGutters([])
|
||||
} else {
|
||||
setOpenGutters([index])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// const handleKeyDown = (e: any) => {
|
||||
// if (e.key === 'Enter') {
|
||||
// if (setSearchText) setSearchText(inputSearchText);
|
||||
// clearTimeout(handler)
|
||||
// }
|
||||
// };
|
||||
const handleKeyDown = (e: any) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (setSearchText) setSearchText(inputSearchText);
|
||||
clearTimeout(handler)
|
||||
}
|
||||
};
|
||||
|
||||
// const handlePageChange = (page: number) => {
|
||||
// setOpenGutters([])
|
||||
// setPage(page)
|
||||
// }
|
||||
const handlePageChange = (page: number) => {
|
||||
setOpenGutters([])
|
||||
setPage(page)
|
||||
}
|
||||
|
||||
// const clearSearch = () => {
|
||||
// setInputSearchText("")
|
||||
// }
|
||||
const clearSearch = () => {
|
||||
setInputSearchText("")
|
||||
}
|
||||
|
||||
// const searchBar = () => {
|
||||
// return (
|
||||
// <TextField
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// placeholder="Search..."
|
||||
// className={classes.title}
|
||||
// value={inputSearchText}
|
||||
// onKeyDown={handleKeyDown}
|
||||
// onChange={e => setInputSearchText(e.currentTarget.value)}
|
||||
// InputProps={{
|
||||
// startAdornment: (
|
||||
// <InputAdornment position="start">
|
||||
// <Search />
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
// endAdornment: (
|
||||
// <InputAdornment position="end">
|
||||
// <IconButton onClick={clearSearch}>
|
||||
// <Close />
|
||||
// </IconButton>
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
// )
|
||||
// }
|
||||
const searchBar = () => {
|
||||
return (
|
||||
<TextField
|
||||
fullWidth
|
||||
variant="standard"
|
||||
placeholder="Search..."
|
||||
//className={classes.title}
|
||||
value={inputSearchText}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={e => setInputSearchText(e.currentTarget.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={clearSearch}>
|
||||
<Close />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// const renderTitle = () => {
|
||||
// if (typeof(title) === "string" ) return (
|
||||
// <Typography variant="h5" className={classes.title}>
|
||||
// {title}
|
||||
// </Typography>
|
||||
// )
|
||||
// if (title) return (
|
||||
// <Box className={classes.titleComp}>
|
||||
// {title}
|
||||
// </Box>
|
||||
// )
|
||||
// return null
|
||||
// }
|
||||
const renderTitle = () => {
|
||||
if (typeof(title) === "string" ) return (
|
||||
<Typography variant="h5" /*className={classes.title}*/>
|
||||
{title}
|
||||
</Typography>
|
||||
)
|
||||
if (title) return (
|
||||
<Box /*className={classes.titleComp}*/>
|
||||
{title}
|
||||
</Box>
|
||||
)
|
||||
return null
|
||||
}
|
||||
|
||||
// const renderSubtitle = () => {
|
||||
// if (typeof(subtitle) === "string" ) return (
|
||||
// <Typography variant="body2" color="textSecondary" className={classes.subtitle}>
|
||||
// {subtitle}
|
||||
// </Typography>
|
||||
// )
|
||||
// if (subtitle) return (
|
||||
// <Box className={classes.subtitleComp}>
|
||||
// {subtitle}
|
||||
// </Box>
|
||||
// )
|
||||
// return null
|
||||
// }
|
||||
const renderSubtitle = () => {
|
||||
if (typeof(subtitle) === "string" ) return (
|
||||
<Typography variant="body2" color="textSecondary" /*className={classes.subtitle}*/>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)
|
||||
if (subtitle) return (
|
||||
<Box /*className={classes.subtitleComp}*/>
|
||||
{subtitle}
|
||||
</Box>
|
||||
)
|
||||
return null
|
||||
}
|
||||
|
||||
// function capitalize(val: any) {
|
||||
// return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
// }
|
||||
function capitalize(val: any) {
|
||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
}
|
||||
|
||||
// const renderMobileRow = (row: T) => {
|
||||
// if (renderMobile) return (
|
||||
|
|
@ -377,8 +377,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* <TableContainer className={classes.tableContainer} component={Paper}> */}
|
||||
<TableContainer /*className={classes.tableContainer}*/ component={Paper}>
|
||||
{/* <Table>
|
||||
<TableHead>
|
||||
|
||||
|
|
@ -568,7 +567,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
)
|
||||
})}
|
||||
</Menu> */}
|
||||
{/* </TableContainer> */}
|
||||
</Box>
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue