@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
104 lines • 7.71 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Paper from '@mui/material/Paper';
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import React from 'react';
import SvgNoData from '../components/assets/SvgNoData';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { headerProps } from './Table';
import { useStyles } from './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 = useStyles();
const [open, setOpen] = React.useState(false);
return (_jsxs(React.Fragment, { children: [_jsxs(TableRow, 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 (_jsxs(TableCell, { children: [' ', cell.render('Cell')] }, `cell ${cellKey}`));
}), _jsx(TableCell, Object.assign({ align: "right" }, { children: _jsx(IconButton, Object.assign({ "aria-label": "expand row", size: "small", onClick: () => setOpen(!open) }, { children: open ? _jsx(KeyboardArrowDownIcon, {}) : _jsx(ArrowForwardIosIcon, {}) })) }))] }), `ttt+${row.id}`), _jsx(TableRow, Object.assign({ style: { marginTop: '2px' } }, { children: _jsx(TableCell, Object.assign({ style: { paddingBottom: 0, paddingTop: 0, paddingLeft: 0 }, colSpan: 6 }, { children: _jsx(Collapse, Object.assign({ in: open, timeout: "auto", unmountOnExit: true }, { children: _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: _jsx(Table, Object.assign({ "aria-label": row.id }, { children: _jsx(TableBody, { 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 (_jsxs(TableRow, Object.assign({ style: {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
} }, { children: [_jsx(TableCell, Object.assign({ align: "left", scope: "key", variant: "body", className: classes.cell_short }, { children: cell.column.Header })), _jsx(TableCell, { className: classes.cell_short }), _jsx(TableCell, 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
export default function CollapsibleTable(instance, cellClickHandler) {
// const { t } = useTranslation();
const classes = useStyles();
const { headerGroups, page, prepareRow } = instance.props;
return (_jsx(TableContainer, Object.assign({ component: Paper, style: { minHeight: '200', maxHeight: '99vh', overflowX: 'hidden' } }, { children: _jsxs(Table, Object.assign({ "aria-label": "collapsible table", stickyHeader: true }, { children: [_jsx(TableHead, Object.assign({ id: "TableHeader", style: {
zIndex: '200',
position: 'sticky',
borderTop: '0',
top: '0',
} }, { children: _jsx(TableRow, Object.assign({ style: {
display: 'grid',
minWidth: '100vw',
gridTemplateColumns: 'repeat(4, 1fr)',
} }, { children: headerGroups.map((headerGroup, index) => (_jsxs(React.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(headerProps);
return (_jsx(TableCell, { children: column.render('Header') }, headerKey));
}), _jsx(TableCell, Object.assign({ align: "right" }, { children: "Actions" }), "actions")] }, `headerKey${index}`))) })) })), _jsx(TableBody, { children: page.length === 0 ? (_jsx("div", Object.assign({ className: classes.SvgNoDataCss }, { children: _jsx(SvgNoData, {}) }))) : (page === null || page === void 0 ? void 0 : page.map((row) => {
prepareRow(row);
return (_jsx(MobileRow, { row: row, headerGroups: headerGroups, cellClickHandler: cellClickHandler }, `mobRoww ${row.id}`));
})) })] })) })));
}
//# sourceMappingURL=CollapsibleTable.js.map