@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
55 lines • 2.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox, FormControlLabel, Popover, Typography } from '@mui/material';
import { createStyles, makeStyles } from '@mui/styles';
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 ColumnHidePage({ instance, anchorEl, onClose, show, }) {
const classes = useStyles({});
const { allColumns, toggleHideColumn } = instance;
const hideableColumns = allColumns.filter((column) => !(column.id === '_selector') &&
!(column.id === 'expander') &&
!(column.id === 'hidecolumns'));
const checkedCount = hideableColumns.reduce((acc, val) => acc + (val.isVisible ? 0 : 1), 0);
const onlyOneOptionLeft = checkedCount + 1 >= hideableColumns.length;
return hideableColumns.length > 1 ? (_jsx("div", { children: _jsx(Popover, Object.assign({ anchorEl: anchorEl, id: 'popover-filters', onClose: onClose, open: show, anchorOrigin: {
vertical: 'bottom',
horizontal: 'right',
}, transformOrigin: {
vertical: 'top',
horizontal: 'right',
}, style: { padding: 24 } }, { children: _jsxs("div", Object.assign({ className: (classes.columnsPopOver, classes.grid, classes.cell) }, { children: [_jsx(Typography, Object.assign({ className: classes.popoverTitle }, { children: "Visible Columns" })), _jsx("div", Object.assign({ style: { display: 'grid' } }, { children: hideableColumns.map((column) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { value: `${column.id}`, disabled: column.isVisible && onlyOneOptionLeft }), label: column.id,
// label={column.render('Header')}
checked: column.isVisible, onChange: () => toggleHideColumn(column.id, column.isVisible) }, column.id))) }))] })) })) })) : null;
}
//# sourceMappingURL=ColumnHidePage.js.map