@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
58 lines • 2.14 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createStyles, makeStyles } from '@mui/styles';
import { Popover } from '@mui/material';
import React from 'react';
const useStyles = makeStyles(createStyles({
columnsPopOver: {
padding: 24,
display: 'flex',
},
filtersResetButton: {
position: 'absolute',
top: 18,
right: 21,
},
popoverTitle: {
fontWeight: 500,
padding: '0 24px 24px 0',
textTransform: 'uppercase',
},
grid: {
display: 'grid',
gridTemplateColumns: 'repeat(2, 218px)',
'@media (max-width: 600px)': {
gridTemplateColumns: 'repeat(1, 180px)',
},
gridColumnGap: 24,
gridRowGap: 24,
},
cell: {
width: '100%',
display: 'flex',
flexDirection: 'column',
},
hidden: {
display: 'none',
},
}));
export function FilterPage({ instance, anchorEl, onClose, show, }) {
const classes = useStyles({});
const { allColumns } = instance;
const onSubmit = React.useCallback((e) => {
e.preventDefault();
onClose();
}, [onClose]);
// const resetFilters = React.useCallback(() => {
// setAllFilters([]);
// }, [setAllFilters]);
return (_jsx(Popover, Object.assign({ anchorEl: anchorEl, id: 'popover-filters', onClose: onClose, open: show, anchorOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, transformOrigin: {
vertical: 'top',
horizontal: 'right',
} }, { children: _jsx("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell) }, { children: _jsx("form", Object.assign({ onSubmit: onSubmit, className: classes.cell }, { children: _jsx("div", { children: allColumns
.filter((it) => it.canFilter)
.map((column) => (_jsx("div", Object.assign({ className: "d-flex mt-2" }, { children: column.render('Filter') }), column.id))) }) })) })) })));
}
//# sourceMappingURL=FilterPage.js.map