@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
110 lines • 9.06 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
const Collapse_1 = __importDefault(require("@mui/material/Collapse"));
const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
const Paper_1 = __importDefault(require("@mui/material/Paper"));
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
const react_1 = __importDefault(require("react"));
const SvgNoData_1 = __importDefault(require("../components/assets/SvgNoData"));
const Table_1 = __importDefault(require("@mui/material/Table"));
const TableBody_1 = __importDefault(require("@mui/material/TableBody"));
const TableCell_1 = __importDefault(require("@mui/material/TableCell"));
const TableContainer_1 = __importDefault(require("@mui/material/TableContainer"));
const TableHead_1 = __importDefault(require("@mui/material/TableHead"));
const TableRow_1 = __importDefault(require("@mui/material/TableRow"));
const Table_2 = require("./Table");
const TableStyle_1 = require("./TableStyle");
// import { motion } from 'framer-motion/dist/framer-motion';
// import { useTranslation } from 'react-i18next';
const variants = {
open: { opacity: 1, height: 'auto' },
collapsed: { opacity: 0, height: 0 },
};
function MobileRow(props) {
const { row, cellProps } = props;
const classes = (0, TableStyle_1.useStyles)();
const [open, setOpen] = react_1.default.useState(false);
return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(TableRow_1.default, Object.assign({ sx: { '& > *': { borderBottom: 'unset' }, alignItems: 'center' }, style: {
display: 'grid',
minWidth: '100vw',
gridTemplateColumns: 'repeat(4, 1fr)',
} }, { children: [row.cells
.filter((cell) => cell.column.id !== 'rating' &&
cell.column.id !== 'subRows' &&
cell.column.id !== 'hidecolumns' &&
cell.column.id !== 'expander')
.slice(0, 3)
.map((cell) => {
const { key: cellKey } = cell.getCellProps(cellProps);
return ((0, jsx_runtime_1.jsxs)(TableCell_1.default, { children: [' ', cell.render('Cell')] }, `cell ${cellKey}`));
}), (0, jsx_runtime_1.jsx)(TableCell_1.default, Object.assign({ align: "right" }, { children: (0, jsx_runtime_1.jsx)(IconButton_1.default, Object.assign({ "aria-label": "expand row", size: "small", onClick: () => setOpen(!open) }, { children: open ? (0, jsx_runtime_1.jsx)(KeyboardArrowDown_1.default, {}) : (0, jsx_runtime_1.jsx)(ArrowForwardIos_1.default, {}) })) }))] }), `ttt+${row.id}`), (0, jsx_runtime_1.jsx)(TableRow_1.default, Object.assign({ style: { marginTop: '2px' } }, { children: (0, jsx_runtime_1.jsx)(TableCell_1.default, Object.assign({ style: { paddingBottom: 0, paddingTop: 0, paddingLeft: 0 }, colSpan: 6 }, { children: (0, jsx_runtime_1.jsx)(Collapse_1.default, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({
// initial='collapsed'
// animate='open'
// exit='collapsed'
// variants={variants}
// transition={{
// duration: 0.5,
// cubicbezier: [0.29, 1.01, 1, -0.68],
// }} //good for mobile
style: { marginLeft: 0, marginRight: 0 } }, { children: (0, jsx_runtime_1.jsx)(Table_1.default, Object.assign({ "aria-label": row.id }, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { children: row.cells
.filter((cell) => cell.column.id !== 'rating' &&
cell.column.id !== 'subRows' &&
cell.column.id !== 'hidecolumns' &&
cell.column.id !== 'expander')
.slice(3)
.map((cell) => {
const { key: cellKey } = cell.getCellProps(cellProps);
return ((0, jsx_runtime_1.jsxs)(TableRow_1.default, Object.assign({ style: {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
} }, { children: [(0, jsx_runtime_1.jsx)(TableCell_1.default, Object.assign({ align: "left", scope: "key", variant: "body", className: classes.cell_short }, { children: cell.column.Header })), (0, jsx_runtime_1.jsx)(TableCell_1.default, { className: classes.cell_short }), (0, jsx_runtime_1.jsx)(TableCell_1.default, Object.assign({
// {...getCellProps}
style: {
width: 'auto',
// flex: 'inherit',
alignContent: 'end',
display: 'flex',
justifyContent: 'start',
border: 0,
} }, { children: cell.render('Cell') }), cellKey)] }), `celrow+${cellKey}`));
}) }) })) })) })) })) }))] }));
}
// eslint-disable-next-line
function CollapsibleTable(instance, cellClickHandler) {
// const { t } = useTranslation();
const classes = (0, TableStyle_1.useStyles)();
const { headerGroups, page, prepareRow } = instance.props;
return ((0, jsx_runtime_1.jsx)(TableContainer_1.default, Object.assign({ component: Paper_1.default, style: { minHeight: '200', maxHeight: '99vh', overflowX: 'hidden' } }, { children: (0, jsx_runtime_1.jsxs)(Table_1.default, Object.assign({ "aria-label": "collapsible table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(TableHead_1.default, Object.assign({ id: "TableHeader", style: {
zIndex: '200',
position: 'sticky',
borderTop: '0',
top: '0',
} }, { children: (0, jsx_runtime_1.jsx)(TableRow_1.default, Object.assign({ style: {
display: 'grid',
minWidth: '100vw',
gridTemplateColumns: 'repeat(4, 1fr)',
} }, { children: headerGroups.map((headerGroup, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerGroup.headers
.filter((column) =>
// column.id !== '_selector' &&
column.id !== 'rating' &&
column.id !== 'subRows' &&
column.id !== 'hidecolumns' &&
column.id !== 'expander' &&
column.id !== '_Actions')
.slice(0, 3)
.map((column) => {
const { key: headerKey } = column.getHeaderProps(Table_2.headerProps);
return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { children: column.render('Header') }, headerKey));
}), (0, jsx_runtime_1.jsx)(TableCell_1.default, Object.assign({ align: "right" }, { children: "Actions" }), "actions")] }, `headerKey${index}`))) })) })), (0, jsx_runtime_1.jsx)(TableBody_1.default, { children: page.length === 0 ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.SvgNoDataCss }, { children: (0, jsx_runtime_1.jsx)(SvgNoData_1.default, {}) }))) : (page === null || page === void 0 ? void 0 : page.map((row) => {
prepareRow(row);
return ((0, jsx_runtime_1.jsx)(MobileRow, { row: row, headerGroups: headerGroups, cellClickHandler: cellClickHandler }, `mobRoww ${row.id}`));
})) })] })) })));
}
exports.default = CollapsibleTable;
//# sourceMappingURL=CollapsibleTable.js.map