@maherunlocker/custom-react-table
Version:
dynamic table based on react table v7
439 lines • 32.4 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = exports.headerProps = exports.findFirstColumn = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const KeyboardArrowRight_1 = __importDefault(require("@mui/icons-material/KeyboardArrowRight"));
const KeyboardArrowUp_1 = __importDefault(require("@mui/icons-material/KeyboardArrowUp"));
const material_1 = require("@mui/material");
const reactstrap_1 = require("reactstrap");
const classnames_1 = __importDefault(require("classnames"));
const react_table_1 = require("react-table");
const TableStyle_1 = require("./TableStyle");
const utils_1 = require("../utils");
const filters_1 = require("./filters");
const Choice_1 = __importDefault(require("./Choice"));
const CollapsibleTable_1 = __importDefault(require("./CollapsibleTable"));
const ColumnHidePageCustom_1 = require("./ColumnHidePageCustom");
const CrossIcon_1 = require("../components/assets/CrossIcon");
const defaultGlobalFilter_1 = __importDefault(require("./filters/defaultGlobalFilter"));
const FilterChipBar_1 = require("./FilterChipBar");
const FilterIcon_1 = require("../components/assets/FilterIcon");
const FilterModalMobile_1 = __importDefault(require("./FilterModalMobile"));
const FilterPageCustom_1 = require("./FilterPageCustom");
const isMobileView_1 = require("./isMobileView");
const ResizeHandle_1 = require("./ResizeHandle");
const StyledH2_1 = require("../components/assets/StyledH2");
const SvgNoData_1 = __importDefault(require("../components/assets/SvgNoData"));
const TablePagination_1 = require("./TablePagination");
const TableToolbar_1 = require("./TableToolbar");
const TooltipCell_1 = require("./TooltipCell");
const DefaultColumnFilter_1 = __importDefault(require("./DefaultColumnFilter"));
const ControlledCheckbox_1 = __importDefault(require("../components/ControlledCheckbox"));
function DefaultHeader({ column }) {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: column.id.startsWith('_') ? null : (0, utils_1.camelToWords)(column.id) });
}
// yes this is recursive, but the depth never exceeds three so it seems safe enough
const findFirstColumn = (columns) => columns[0].columns ? (0, exports.findFirstColumn)(columns[0].columns) : columns[0];
exports.findFirstColumn = findFirstColumn;
const getStyles = (props, disableResizing = false, align = 'left') => [
props,
{
style: {
justifyContent: 'start',
alignItems: 'center',
display: 'flex',
},
},
];
const cellProps = (props, { cell }) => getStyles(props, cell.column && cell.column.disableResizing, cell.column && cell.column.align);
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/ban-types
const defaultColumn = {
//Filter: MultiSelectColumnFilter,
Filter: DefaultColumnFilter_1.default,
Cell: TooltipCell_1.TooltipCellRenderer,
Header: DefaultHeader,
// When using the useFlexLayout:
minWidth: 10,
// width: 150, // width is used for both the flex-basis and flex-grow
maxWidth: 200, // maxWidth is only used as a limit for resizing
};
const filterTypes = {
fuzzyText: filters_1.fuzzyTextFilter,
numeric: filters_1.numericTextFilter,
multiSelect: (rows, id, filterValues) => {
if (filterValues.length === 0)
return rows;
return rows.filter((r) => filterValues.includes(r.values[id]));
},
};
const selectionHook = (hooks) => {
hooks.allColumns.push((columns) => [
// Let's make a column for selection
{
id: '_selector',
disableResizing: true,
disableGroupBy: true,
minWidth: 45,
width: 45,
maxWidth: 45,
Aggregated: undefined,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => ((0, jsx_runtime_1.jsx)(TableStyle_1.HeaderCheckbox, Object.assign({}, getToggleAllRowsSelectedProps()))),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => ((0, jsx_runtime_1.jsx)(TableStyle_1.RowCheckbox, Object.assign({}, row.getToggleRowSelectedProps()))),
},
...columns,
]);
};
const customSelectionHook = (hooks) => {
hooks.allColumns.push((columns) => [
// Let's make a column for selection
{
id: '_selector',
disableResizing: true,
disableGroupBy: true,
minWidth: 45,
width: 45,
maxWidth: 45,
Aggregated: undefined,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, }) => ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: true, toggleAllRowsSelected: toggleAllRowsSelected, row: row, allRows: flatRows, dispatchSelectedRows: dispatch, selectedFlatRows: flatRows, isAllRowsSelected: isAllRowsSelected, selectedRows: state.customSelectedRows, indeterminate: isAllRowsSelected ||
(flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length)
? false
: state.customSelectedRows.length > 0 })),
Cell: ({ row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, selectedFlatRows, }) => ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: false, row: row, allRows: flatRows, dispatchSelectedRows: dispatch, selectedFlatRows: selectedFlatRows, isAllRowsSelected: isAllRowsSelected, selectedRows: state.customSelectedRows, indeterminate: false })),
},
...columns,
]);
};
const customSelectionHookWithMoveleft = (hooks) => {
hooks.allColumns.push((columns) => [
// Let's make a column for selection
{
id: '_selector',
disableResizing: true,
disableGroupBy: true,
minWidth: 45,
width: 45,
maxWidth: 45,
Aggregated: undefined,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, }) => ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: true, toggleAllRowsSelected: toggleAllRowsSelected, row: row, allRows: flatRows, dispatchSelectedRows: dispatch, selectedFlatRows: flatRows, isAllRowsSelected: flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length, selectedRows: state.customSelectedRows, indeterminate: isAllRowsSelected ||
(flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length)
? false
: state.customSelectedRows.length > 0 })),
Cell: ({ row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, selectedFlatRows, }) => ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: false, row: row, allRows: flatRows, dispatchSelectedRows: dispatch, selectedFlatRows: selectedFlatRows, isAllRowsSelected: isAllRowsSelected, selectedRows: state.customSelectedRows, indeterminate: false, movedLeft: true })),
},
...columns,
]);
};
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const headerProps = (
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
props, { column }) => getStyles(props, column && column.disableResizing, column && column.align);
exports.headerProps = headerProps;
function Table(_a) {
var { name, columns, canMovedCheckboxLeftOnExpand, onClick, canGroupBy, canSort, canSelect, setSelectedRows, customSelect, canResize, actionColumn, showGlobalFilter, showFilter, showColumnIcon, filterActive, setLocalFilterActive, customJsxSideFilterButton, defaultHiddenColumns, defaultPaginationValues, elevationTable, minHeight, maxHeight } = _a, props = __rest(_a, ["name", "columns", "canMovedCheckboxLeftOnExpand", "onClick", "canGroupBy", "canSort", "canSelect", "setSelectedRows", "customSelect", "canResize", "actionColumn", "showGlobalFilter", "showFilter", "showColumnIcon", "filterActive", "setLocalFilterActive", "customJsxSideFilterButton", "defaultHiddenColumns", "defaultPaginationValues", "elevationTable", "minHeight", "maxHeight"]);
// const { t } = useTranslation();
const classes = (0, TableStyle_1.useStyles)();
if (name === undefined || name === null) {
name = 'mytable';
}
const isMobile = (0, isMobileView_1.IsMobileView)();
const [initialState, setInitialState] = (0, utils_1.useLocalStorage)(`tableState2:${name}`, {});
const customHooks = (hooks) => {
hooks.allColumns.push((columns) => [
...columns,
{
id: 'hidecolumns',
accessor: 'hidecolumns',
disableResizing: false,
disableGroupBy: true,
disableFilters: true,
disableSortBy: true,
canFilter: false,
minWidth: 60,
width: 60,
maxWidth: 100,
Header: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "dropdown " }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ id: "dropdownHideColomuns", "data-bs-toggle": "dropdown" }, { children: (0, jsx_runtime_1.jsx)(Choice_1.default, { height: 25, width: 25 }) })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "dropdown-menu ", "aria-labelledby": "dropdownHideColomuns" }, { children: (0, jsx_runtime_1.jsx)(ColumnHidePageCustom_1.ColumnHidePageCustom, { instance: instance }) }))] }))),
Cell(cell) {
const ActionColumnComponent = actionColumn;
return (0, jsx_runtime_1.jsx)(ActionColumnComponent, { selectedRow: cell.row });
},
},
]);
};
const hooks = [
react_table_1.useColumnOrder,
react_table_1.useFilters,
react_table_1.useGlobalFilter,
react_table_1.useGroupBy,
react_table_1.useSortBy,
react_table_1.useExpanded,
react_table_1.useFlexLayout,
react_table_1.usePagination,
react_table_1.useResizeColumns,
react_table_1.useRowSelect,
];
// eslint-disable-next-line
let localHooks = hooks;
if (canSelect) {
if (customSelect) {
canMovedCheckboxLeftOnExpand !== undefined && canMovedCheckboxLeftOnExpand
? localHooks.push(customSelectionHookWithMoveleft)
: localHooks.push(customSelectionHook);
}
else {
localHooks.push(selectionHook);
}
}
if (actionColumn !== undefined) {
localHooks.push(customHooks);
}
const filterOptions = { filteredIds: [] };
const instance = (0, react_table_1.useTable)(Object.assign(Object.assign({}, props), { columns,
filterTypes,
defaultColumn,
// styledRows: [],
getSubRows: (row) => row.subRows, globalFilter: (rows, columnIds, filterValue) => (0, defaultGlobalFilter_1.default)(rows, columnIds, filterValue, filterOptions), initialState: Object.assign(Object.assign({}, initialState), { customSelectedRows: [], hiddenColumns: defaultHiddenColumns }),
/* in test mode wip */
// useControlledState: (state) =>
// React.useMemo(
// () => ({
// ...state,
// selectedFlatRows: tata,
// // selectedRowIds: [...state.customSelectedRows.map((elm: any) => ({ [elm.id as Record<IdType<T> ]: true }))],
// // pageIndex: controlledPageIndex,
// }),
// [state]
// ),
stateReducer: (newState, action, prevState) => {
switch (action.type) {
case 'customSelectRow':
return Object.assign(Object.assign({}, newState), { customSelectedRows: [
...newState.customSelectedRows,
action.payload,
] });
case 'customUnSelectRow':
return Object.assign(Object.assign({}, newState), { customSelectedRows: [
...newState.customSelectedRows.filter((elm) => elm.id !== action.payload),
] });
case 'unSelectedNestedRows':
const filteredRows = (0, utils_1.filterByReference)(newState.customSelectedRows, action.payload, false);
return Object.assign(Object.assign({}, newState), { customSelectedRows: filteredRows });
case 'selectedNestedRows':
return Object.assign(Object.assign({}, newState), { customSelectedRows: [
...newState.customSelectedRows,
...action.payload,
] });
case 'customSelectAll':
return Object.assign(Object.assign({}, newState), { customSelectedRows: action.payload });
case 'customUnSelectAll':
return Object.assign(Object.assign({}, newState), { customSelectedRows: [] });
default:
return newState;
}
} }), ...localHooks);
const { headerGroups, getTableBodyProps, page, prepareRow, state, selectedFlatRows, } = instance;
const debouncedState = (0, utils_1.useDebounce)(state, 200);
const cellClickHandler = (cell) => () => {
onClick &&
!cell.column.isGrouped &&
!cell.row.isGrouped &&
cell.column.id !== '_selector' &&
onClick(cell.row);
};
react_1.default.useEffect(() => {
const { sortBy, filters, pageSize, columnResizing, hiddenColumns, selectedRowIds, } = debouncedState;
setInitialState({
sortBy,
filters,
pageSize,
columnResizing,
hiddenColumns,
selectedRowIds,
});
if (setSelectedRows !== undefined) {
if (instance.isAllRowsSelected) {
setSelectedRows(instance.flatRows.map((row) => (Object.assign(Object.assign({}, row.original), { depth: row.depth }))));
}
else if (customSelect !== undefined) {
setSelectedRows(state.customSelectedRows.map((row) => (Object.assign(Object.assign({}, row.original), { depth: row.depth }))));
}
else {
setSelectedRows(selectedFlatRows.map((row) => (Object.assign(Object.assign({}, row.original), { depth: row.depth }))));
}
}
// eslint-disable-next-line
}, [setInitialState, state.customSelectedRows]);
react_1.default.useEffect(() => {
!instance.isAllRowsSelected &&
instance.dispatch({ type: 'customUnSelectAll', payload: [] });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [instance.isAllRowsSelected]);
react_1.default.useEffect(() => {
instance.dispatch({ type: 'customUnSelectAll', payload: [] });
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [instance.data, instance]);
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isMobile ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: {
display: 'grid',
gridTemplateColumns: filterActive ? '2fr 1fr ' : 'auto',
gridColumnGap: '4px',
fontFamily: 'Segoe UI, -apple-system, Helvetica Neue, Arial',
} }, { children: [(0, jsx_runtime_1.jsxs)(reactstrap_1.Card, Object.assign({ style: { border: '0px' } }, { children: [(0, jsx_runtime_1.jsxs)(reactstrap_1.CardHeader, Object.assign({ id: "TableToolbar", className: !showGlobalFilter && !showFilter && !showColumnIcon
? 'd-none'
: classes.cardHeaderCss }, { children: [(0, jsx_runtime_1.jsx)(TableToolbar_1.TableToolbar, Object.assign({ instance: instance }, {
showGlobalFilter,
showFilter,
showColumnIcon,
filterActive,
setLocalFilterActive,
customJsxSideFilterButton,
})), (0, jsx_runtime_1.jsx)(FilterChipBar_1.FilterChipBar, { instance: instance })] })), (0, jsx_runtime_1.jsx)(reactstrap_1.CardBody, Object.assign({ id: name, style: {
marginRight: '0',
marginLeft: '0',
padding: 0,
paddingTop: '4px !important ',
border: '1px solid rgba(0,0,0,.125)',
} }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, id: "tablecontainer", direction: 'row', sx: { display: 'grid' } }, { children: (0, jsx_runtime_1.jsxs)(material_1.TableContainer, Object.assign({ sx: {
paddingRight: '0!important',
paddingLeft: '0!important',
overflowX: 'auto',
overflowY: page.length === 0 ? 'hidden' : 'auto',
display: 'block',
width: '100%',
WebkitOverflowScrolling: 'touch',
MsOverflowStyle: '-ms-autohiding-scrollbar',
// flex: '1 1 auto',
paddingBottom: '1rem',
marginTop: '0 !important',
paddingTop: '0 !important',
maxHeight: maxHeight === 0 ||
maxHeight === '' ||
maxHeight === undefined
? '630px'
: maxHeight,
minHeight: minHeight === 0 ||
minHeight === '' ||
minHeight === undefined
? '580px'
: minHeight,
}, className: "table-responsive" }, { children: [(0, jsx_runtime_1.jsxs)(TableStyle_1.RawTable, { children: [(0, jsx_runtime_1.jsx)(TableStyle_1.TableHead, { children: headerGroups.map((headerGroup) => {
const _a = headerGroup.getHeaderGroupProps(), { key: headerGroupKey, title: headerGroupTitle, role: headerGroupRole } = _a, getHeaderGroupProps = __rest(_a, ["key", "title", "role"]);
return ((0, jsx_runtime_1.jsx)(TableStyle_1.TableHeadRow, Object.assign({}, getHeaderGroupProps, { children: headerGroup.headers.map((column) => {
const style = {
textAlign: column.align
? column.align
: 'center ',
};
const _a = column.getHeaderProps(exports.headerProps), { key: headerKey, role: headerRole } = _a, getHeaderProps = __rest(_a, ["key", "role"]);
const _b = column.getGroupByToggleProps(), { title: groupTitle = '' } = _b, columnGroupByProps = __rest(_b, ["title"]);
const _c = column.getSortByToggleProps({
title: 'Trier',
}), { title: sortTitle = '' } = _c, columnSortByProps = __rest(_c, ["title"]);
return ((0, jsx_runtime_1.jsxs)(TableStyle_1.TableHeadCell, Object.assign({}, getHeaderProps, { className: `${column.id
.toLowerCase()
.includes('action') && classes.stickyCol} ${column.id
.toLowerCase()
.includes('hidecolumns') &&
classes.hide_colomns_sticky}` }, { children: [canGroupBy
? column.canGroupBy && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: groupTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.TableSortLabel, Object.assign({ active: true,
// direction={column.isGrouped ? 'desc' : 'asc'}
IconComponent: KeyboardArrowRight_1.default }, columnGroupByProps, { className: classes.headerIcon })) })))
: null, column.canSort && canSort ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: sortTitle }, { children: (0, jsx_runtime_1.jsx)(material_1.TableSortLabel, Object.assign({ active: column.isSorted, direction: column.isSortedDesc ? 'desc' : 'asc' }, columnSortByProps, { className: classes.tableSortLabel, style: { flexDirection: 'row-reverse' } }, { children: column.render('Header') })) }))) : ((0, jsx_runtime_1.jsx)(TableStyle_1.TableLabel, Object.assign({ style: style }, { children: column.render('Header') }))), canResize
? column.canResize && ((0, jsx_runtime_1.jsx)(ResizeHandle_1.ResizeHandle, { column: column }))
: null] }), headerKey));
}) }), headerGroupKey));
}) }), (0, jsx_runtime_1.jsx)(TableStyle_1.TableBody, Object.assign({}, getTableBodyProps(), { className: page.length === 0 ? classes.SvgNoDataCss : '' }, { children: page.length !== 0
? page.map((row) => {
prepareRow(row);
const _a = row.getRowProps(), { key: rowKey, role: rowRole } = _a, getRowProps = __rest(_a, ["key", "role"]);
return ((0, jsx_runtime_1.jsx)(TableStyle_1.TableRow, Object.assign({}, getRowProps, { className: (0, classnames_1.default)({
rowSelected: row.isSelected,
clickable: onClick,
}) }, { children: row.cells.map((cell) => {
const _a = cell.getCellProps(cellProps), { key: cellKey, role: cellRole } = _a, getCellProps = __rest(_a, ["key", "role"]);
return ((0, jsx_runtime_1.jsx)(TableStyle_1.TableCell, Object.assign({}, getCellProps, { onClick: cellClickHandler(cell), className: `${cellKey
.toLowerCase()
.includes('action') &&
classes.stickyCol} ${cellKey
.toLowerCase()
.includes('hidecolumns') &&
classes.hide_colomns_sticky}` }, { children: cell.isGrouped ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.TableSortLabel, Object.assign({ classes: {
iconDirectionAsc: classes.iconDirectionAsc,
iconDirectionDesc: classes.iconDirectionDesc,
}, active: true, direction: row.isExpanded ? 'desc' : 'asc', IconComponent: KeyboardArrowUp_1.default }, row.getToggleRowExpandedProps(), { className: classes.cellIcon })), ' ', cell.render('Cell', {
editable: false,
}), ' ', "(", row.subRows.length, ")"] })) : cell.isAggregated ? (cell.render('Aggregated')) : cell.isPlaceholder ? null : (cell.render('Cell')) }), cellKey));
}) }), rowKey));
})
: null }))] }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: page.length === 0 ? classes.SvgNoDataCss : 'd-none' }, { children: (0, jsx_runtime_1.jsx)(SvgNoData_1.default, {}) }))] })) })) })), (0, jsx_runtime_1.jsx)(reactstrap_1.CardFooter, Object.assign({ id: "TablePagination", style: {
backgroundColor: 'white',
border: '1px solid rgba(0,0,0,.125)',
borderTop: '0px',
borderRadius: '0px 0px 12px 12px',
} }, { children: (0, jsx_runtime_1.jsx)(TablePagination_1.TablePagination, { instance: instance, defaultPaginationValues: defaultPaginationValues ? defaultPaginationValues : [] }) }))] })), filterActive ? ((0, jsx_runtime_1.jsxs)(reactstrap_1.Card, Object.assign({ style: { border: '0px' } }, { children: [(0, jsx_runtime_1.jsxs)(reactstrap_1.CardHeader, Object.assign({ style: {
display: 'flex',
alignItems: 'center',
// marginBottom: '2px',
maxHeight: '64px !important',
justifyContent: 'space-between',
}, className: `${classes.FiltersCss} ${classes.cardHeaderCss}` }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
paddingLeft: '10px',
} }, { children: [(0, jsx_runtime_1.jsx)(FilterIcon_1.FilterIcon, { className: classes.tableFilterAltOutlinedIcon, style: { flexDirection: 'row-reverse' } }), (0, jsx_runtime_1.jsx)(StyledH2_1.StyledH2, Object.assign({ style: { marginBottom: 0 } }, { children: "Filtre(s)" }))] })), (0, jsx_runtime_1.jsx)(CrossIcon_1.CrossIcon, { style: { cursor: 'pointer' }, height: 11, width: 25, onClick: () => {
setLocalFilterActive(false);
} })] })), (0, jsx_runtime_1.jsx)(reactstrap_1.CardBody, Object.assign({ id: "filterbody", style: {
marginRight: '0',
marginLeft: '0',
padding: 0,
paddingTop: '4px !important ',
border: '1px solid rgba(0,0,0,.125)',
backgroundColor: 'white',
borderTop: '1px solid rgba(0,0,0,.125)',
borderRadius: '0px 0px 12px 12px ',
// borderRadius: '20px 20px 12px 12px !important;',
} }, { children: (0, jsx_runtime_1.jsx)(FilterPageCustom_1.FilterPageCustom, { instance: instance, setLocalFilterActive: setLocalFilterActive, filterActive: filterActive, tableName: name }) }))] }))) : null] }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(reactstrap_1.CardHeader, Object.assign({ id: "TablePagination", style: { marginBottom: '2px' }, className: !showGlobalFilter && !showFilter && !showColumnIcon
? 'd-none'
: classes.cardHeaderCss }, { children: [(0, jsx_runtime_1.jsx)(TableToolbar_1.TableToolbar, Object.assign({ instance: instance }, {
showGlobalFilter,
showFilter,
showColumnIcon,
filterActive,
setLocalFilterActive,
customJsxSideFilterButton,
})), (0, jsx_runtime_1.jsx)(FilterChipBar_1.FilterChipBar, { instance: instance })] })), (0, jsx_runtime_1.jsx)(reactstrap_1.CardBody, Object.assign({ id: name, style: {
marginRight: '0',
marginLeft: '0',
padding: 0,
paddingTop: '4px ',
minHeight: '100vh',
fontFamily: 'Segoe UI, -apple-system, Helvetica Neue, Arial',
} }, { children: (0, jsx_runtime_1.jsx)(CollapsibleTable_1.default, { props: instance }) })), (0, jsx_runtime_1.jsx)(reactstrap_1.CardFooter, Object.assign({ id: "TablePagination", style: { backgroundColor: 'white', padding: '0' } }, { children: (0, jsx_runtime_1.jsx)(TablePagination_1.TablePagination, { instance: instance, defaultPaginationValues: defaultPaginationValues ? defaultPaginationValues : [] }) })), filterActive ? ((0, jsx_runtime_1.jsx)(FilterModalMobile_1.default, { instance: instance, setLocalFilterActive: setLocalFilterActive, filterActive: filterActive, tableName: name })) : null] })) }));
}
exports.Table = Table;
//# sourceMappingURL=Table.js.map