@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
43 lines • 2.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Divider } from '@mui/material';
// import { useTranslation } from 'react-i18next';
import React from 'react';
import { useStyles } from './TableStyle';
export function ColumnHidePageCustom({ instance, }) {
// const { t } = useTranslation();
const classes = useStyles();
const [isVisible, setIsVisible] = React.useState(false);
const { allColumns, toggleHideAllColumns, toggleHideColumn } = instance;
const hideableColumns = allColumns.filter((column) => !(column.id === '_selector') &&
!(column.id === 'expander') &&
!(column.id === 'hidecolumns') &&
!(column.id === '_Actions') &&
!column.id.toLowerCase().includes('action'));
const uncheckedCount = hideableColumns.reduce((acc, val) => acc + (val.isVisible ? 0 : 1), 0);
const onlyOneOptionLeft = uncheckedCount + 1 >= hideableColumns.length;
React.useEffect(() => {
if (uncheckedCount === 0) {
setIsVisible(true);
}
else {
setIsVisible(false);
}
}, [uncheckedCount]);
return hideableColumns.length > 1 ? (_jsxs("div", Object.assign({ className: "d-flex flex-column" }, { children: [_jsxs("div", Object.assign({ className: " mx-2 d-flex align-items-center justify-content-between" }, { children: [_jsx("label", Object.assign({ style: {
font: 'normal normal normal 13px/17px Segoe UI',
letterSpacing: '0px',
color: '#495057 ',
} }, { children: "Afficher tous:" })), _jsx("input", { type: "checkbox", checked: isVisible, onChange: () => {
toggleHideAllColumns(false);
setIsVisible(true);
} })] }), "showall"), _jsx(Divider, { className: classes.DividerCss }), _jsx("div", Object.assign({ style: { overflowY: 'auto', maxHeight: '40vh' } }, { children: hideableColumns.map((column) => (_jsxs("div", Object.assign({ className: " my-1 mx-2 d-flex align-items-center justify-content-between" }, { children: [_jsx("label", Object.assign({ style: {
font: 'normal normal normal 13px/17px Segoe UI',
letterSpacing: '0px',
color: '#495057 ',
} }, { children: column.id })), _jsx("input", { type: "checkbox",
// {...column.getToggleHiddenProps()}
onChange: () => {
toggleHideColumn(column.id, column.isVisible);
}, disabled: column.isVisible && onlyOneOptionLeft, checked: column.isVisible })] }), column.id))) }))] }))) : null;
}
//# sourceMappingURL=ColumnHidePageCustom.js.map