@aures/custom-react-table
Version:
dynamic table based on react table v7
681 lines • 50.2 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 react_window_1 = require("react-window");
const reactstrap_1 = require("reactstrap");
const react_table_1 = require("react-table");
const react_device_detect_1 = require("react-device-detect");
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 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"));
const react_i18next_1 = require("react-i18next");
const important_1 = require("../utils/important");
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
function customFilter(rows, filterValues, id) {
return rows.filter((r) => {
const cellValue = r.values[id]; // Valeur de la cellule dans la colonne spécifiée par id
return filterValues.some((value) => cellValue.includes(value)); // Vérifie si la valeur de la cellule contient au moins une des valeurs de filterValues
});
}
// const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// return rows.filter((r: any) => filterValues.toString().includes(r.values[id]))
// // return rows.filter((r: any) => {
// // return r.values[id]?.includes(filterValues.toString())
// // });
// },
// };
// const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// return rows.filter((r: any) => {
// const cellValue: any = r.values[id]; // Using any type to handle different data types
// if (typeof cellValue === 'string') {
// return filterValues.some((value:any) => cellValue.includes(value));
// } else if (typeof cellValue === 'number') {
// // Convert number to string before checking for inclusion
// const stringValue = cellValue.toString();
// return filterValues.some((value:any) => stringValue.includes(value));
// }
// return false;
// });
// },
// };
// const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// return rows.filter((r: any) => {
// const cellValue: any = r.values[id];
// return filterValues.some((value: any) => cellValue?.toString()?.includes(value))
// });
// },
// };
// const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// return rows.filter((r: any) => {
// const cellValue: any = r.values[id];
// const matched = filterValues.some((value: any) => cellValue?.toString()?.includes(value));
// if (matched) {
// return true; // Si la ligne principale correspond au filtre, retourne true
// } else if (r.subRows) {
// // Si la ligne principale ne correspond pas, vérifie si des sous-lignes existent
// const subRowMatched = r.subRows.some((subRow: any) =>
// filterValues.some((value: any) => subRow.values[id]?.toString()?.includes(value))
// );
// return subRowMatched; // Retourne true si une sous-ligne correspond au filtre
// }
// return false; // Retourne false si ni la ligne principale ni les sous-lignes ne correspondent
// });
// },
// };
// 1032 const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// const filterRow = (row: any): boolean => {
// const cellValue: any = row.values[id];
// const matched = filterValues.some((value: any) => cellValue?.toString()?.includes(value));
// if (matched) {
// return true; // Si la ligne correspond au filtre, retourne true
// } else if (row.subRows) {
// // Si la ligne ne correspond pas, vérifie les sous-lignes récursivement
// return row.subRows.some((subRow: any) => filterRow(subRow));
// }
// return false; // Retourne false si ni la ligne ni les sous-lignes ne correspondent
// };
// // Filtrer les lignes principales en utilisant la fonction récursive
// return rows.filter((row: any) => filterRow(row));
// },
// };
// const filterTypes: any = {
// fuzzyText: fuzzyTextFilter,
// numeric: numericTextFilter,
// multiSelect: (rows: any, id: any, filterValues: any) => {
// if (filterValues.length === 0) return rows;
// const filterRow = (row: any): boolean => {
// const cellValue: any = row.values[id];
// let matched: boolean;
// if (id.includes("skills") || id.includes("hobby")) {
// // Use 'includes' for columns with ids containing 'skills' or 'hobby'
// matched = filterValues.some((value: any) => cellValue?.toString()?.includes(value));
// } else {
// // Use equality for other columns
// matched = filterValues.some((value: any) => cellValue === value);
// }
// if (matched) {
// return true; // If the row matches the filter, return true
// } else if (row.subRows) {
// // If the row does not match, recursively check sub-rows
// const subRowsMatched = row.subRows.some((subRow: any) => filterRow(subRow));
// if (subRowsMatched) {
// return true; // If at least one sub-row matches, return true
// }
// }
// // Return false if neither the row nor the sub-rows match
// return false;
// };
// // Filter rows using the filterRow function
// return rows.filter((row: any) => filterRow(row));
// },
// };
function getWidthByItem(items, targetItem) {
if ((items === null || items === void 0 ? void 0 : items.length) > 0) {
const foundItem = items.find((item) => item.item === targetItem);
return foundItem ? foundItem.width : '150px';
}
else {
return '150px';
}
}
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: (data) => {
const { row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, allRows, selectedFlatRows, } = data;
return ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { data: data, state: state, isHeader: true, toggleAllRowsSelected: toggleAllRowsSelected, row: row, allRows: flatRows, instance: data, dispatchSelectedRows: dispatch, selectedFlatRows: selectedFlatRows, isAllRowsSelected: isAllRowsSelected, selectedRows: state.customSelectedRows, filters: state.filters, indeterminate: flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length
? false
: state.customSelectedRows.length > 0 }));
},
Cell: (data) => {
const { row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, selectedFlatRows, allRows, } = data;
return ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: false, row: row, instance: data, filters: state.filters, 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: (data) => {
const { row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, filteredRows, } = data;
// console.log({data,cc:10});
return ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { data: data, state: state, displayedRows: data.flatRows, isHeader: true, toggleAllRowsSelected: toggleAllRowsSelected, row: row, filteredRows: filteredRows, instance: data, filters: state.filters, allRows: flatRows, dispatchSelectedRows: dispatch, selectedFlatRows: flatRows, isAllRowsSelected: flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length, selectedRows: state.customSelectedRows, indeterminate: flatRows.length > 0 &&
flatRows.length === state.customSelectedRows.length
? false
: state.customSelectedRows.length > 0 }));
},
Cell: (data) => {
const { row, dispatch, flatRows, isAllRowsSelected, state, toggleAllRowsSelected, selectedFlatRows, } = data;
return ((0, jsx_runtime_1.jsx)(ControlledCheckbox_1.default, { isHeader: false, row: row, instance: data, filters: state.filters, 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 _b;
var { name, columns, canMovedCheckboxLeftOnExpand, onClick, canGroupBy, canSort, canSelect, setSelectedRows, customSelect, canResize, actionColumn, showGlobalFilter, showFilter, showColumnIcon, filterActive, setLocalFilterActive, customJsxDir, customJsxSideFilterButton, defaultHiddenColumns, defaultPaginationValues, toggleAllRowsExpanded, elevationTable, minHeight, maxHeight, tableFooter, isTableHasFooter, customClasses, customFilterJsx, allFiltersCustom, colsSetting } = _a, props = __rest(_a, ["name", "columns", "canMovedCheckboxLeftOnExpand", "onClick", "canGroupBy", "canSort", "canSelect", "setSelectedRows", "customSelect", "canResize", "actionColumn", "showGlobalFilter", "showFilter", "showColumnIcon", "filterActive", "setLocalFilterActive", "customJsxDir", "customJsxSideFilterButton", "defaultHiddenColumns", "defaultPaginationValues", "toggleAllRowsExpanded", "elevationTable", "minHeight", "maxHeight", "tableFooter", "isTableHasFooter", "customClasses", "customFilterJsx", "allFiltersCustom", "colsSetting"]);
const { t } = (0, react_i18next_1.useTranslation)();
const classes = (0, TableStyle_1.useStyles)();
const defaultColumn = {
//Filter: MultiSelectColumnFilter,
Filter: DefaultColumnFilter_1.default,
Cell: TooltipCell_1.TooltipCellRenderer,
Header: DefaultHeader,
colsSetting: colsSetting || [],
// When using the useFlexLayout:
minWidth: 10,
//width: getWidthOfLongestString(columns.map((x: any) => x.id)), // width is used for both the flex-basis and flex-grow
maxWidth: 200, //getWidthOfLongestString(columns.map((x: any) => x.id)), // maxWidth is only used as a limit for resizing
};
if (name === undefined || name === null) {
name = 'mytable';
}
if (defaultHiddenColumns === undefined || defaultHiddenColumns === null) {
defaultHiddenColumns = ['78'];
}
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 });
},
},
]);
};
function isUrl(str) {
// Regular expression for a simple URL check
const urlRegex = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
return urlRegex.test(str);
}
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;
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,
// align:"left",
// 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,
]);
};
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: [] };
let spCols = colsSetting
? (_b = colsSetting === null || colsSetting === void 0 ? void 0 : colsSetting.filter((setting) => typeof setting.filterContentSeparation === 'string')) === null || _b === void 0 ? void 0 : _b.map((setting) => setting.item)
: [];
const filterTypes = {
fuzzyText: filters_1.fuzzyTextFilter,
numeric: filters_1.numericTextFilter,
multiSelect: (rows, id, filterValues, columnsEquals) => {
if (filterValues.length === 0)
return rows;
const filterRow = (row) => {
const cellValue = row.values[id];
let matched;
// if (id.includes("skills") || id.includes("hobby")) {
if (spCols.some((keyword) => id.includes(keyword))) {
// Use 'includes' for columns with ids containing 'skills' or 'hobby'
matched = filterValues.some((value) => { var _a; return (_a = cellValue === null || cellValue === void 0 ? void 0 : cellValue.toString()) === null || _a === void 0 ? void 0 : _a.includes(value); });
}
else {
// Use equality for other columns
matched = filterValues.some((value) => cellValue === value);
}
if (matched) {
return true; // If the row matches the filter, return true
}
else if (row.subRows) {
// If the row does not match, recursively check sub-rows
const subRowsMatched = row.subRows.some((subRow) => filterRow(subRow));
if (subRowsMatched) {
return true; // If at least one sub-row matches, return true
}
}
// Return false if neither the row nor the sub-rows match
return false;
};
// Filter rows using the filterRow function
return rows.filter((row) => filterRow(row));
},
};
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 }), 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: action.payload });
case 'customSelectAllV2':
let existingIds = new Set(newState.customSelectedRows.map((item) => item.id));
let mergedData = [
...newState.customSelectedRows,
...action.payload.filter((item) => !existingIds.has(item.id)),
];
return Object.assign(Object.assign({}, newState), { customSelectedRows: mergedData });
case 'customUnSelectAllV2':
const remainingSelections = newState.customSelectedRows.filter((selectedItem) => !action.payload.some((newItem) => newItem.id === selectedItem.id));
return Object.assign(Object.assign({}, newState), { customSelectedRows: remainingSelections });
default:
return newState;
}
} }), ...localHooks);
react_1.default.useEffect(() => {
const storedHiddenColumns = localStorage.getItem(name + '_hiddenColumns');
if (storedHiddenColumns) {
instance.setHiddenColumns(JSON.parse(storedHiddenColumns));
}
if (toggleAllRowsExpanded !== undefined && toggleAllRowsExpanded === true) {
instance.toggleAllRowsExpanded(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// Save column visibility settings to local storage whenever they change
react_1.default.useEffect(() => {
localStorage.setItem(name + '_hiddenColumns', JSON.stringify(instance.state.hiddenColumns));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [instance.state.hiddenColumns]);
react_1.default.useEffect(() => {
localStorage.setItem(name + '_colsSetting', JSON.stringify(colsSetting));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [instance]);
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);
};
function isDecimalOrFloat(input) {
// Regular expression to match a decimal or float (positive or negative)
const decimalOrFloatRegex = /^[-+]?[0-9]*\.?[0-9]+$/;
return decimalOrFloatRegex.test(input);
}
// let heightRow = (document.querySelector('.rowtrlist') as HTMLElement).offsetHeight;
react_1.default.useEffect(() => {
const { sortBy, filters, pageSize, columnResizing, selectedRowIds } = debouncedState;
const hiddenColumns = ['10'];
const json = JSON.parse(window.localStorage.getItem('tableState2:' + name) || '{}');
setInitialState({
sortBy,
filters: instance.state.filters,
pageSize: json.pageSize || 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, state.filters]);
// Example usages
if (maxHeight === undefined) {
maxHeight = '500px';
}
return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: react_device_detect_1.isMobile === true ? ((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,
customJsxDir,
customJsxSideFilterButton,
})), (0, jsx_runtime_1.jsx)(FilterChipBar_1.FilterChipBar, { instance: instance, setLocalFilterActive: setLocalFilterActive, filterActive: filterActive })] })), (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, maxHeight: maxHeight, name: name, minHeight: minHeight }) })), (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, { name: name, instance: instance, defaultPaginationValues: defaultPaginationValues ? defaultPaginationValues : [] }) })), filterActive ? ((0, jsx_runtime_1.jsx)(FilterModalMobile_1.default, { instance: instance, setLocalFilterActive: setLocalFilterActive, filterActive: filterActive, tableName: name, customFilterJsx: customFilterJsx, allFiltersCustom: allFiltersCustom })) : null] })) : ((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,
customJsxDir,
customJsxSideFilterButton,
})), (0, jsx_runtime_1.jsx)(FilterChipBar_1.FilterChipBar, { instance: instance, setLocalFilterActive: setLocalFilterActive, filterActive: filterActive })] })), (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.jsx)(material_1.TableContainer, Object.assign({ sx: {
paddingRight: '0!important',
paddingLeft: '0!important',
overflowX: 'auto',
overflowY: page.length === 0 || true ? 'hidden' : 'auto',
display: 'block',
width: '100%',
WebkitOverflowScrolling: 'touch',
MsOverflowStyle: '-ms-autohiding-scrollbar',
// flex: '1 1 auto',
paddingBottom: '0px !important',
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, Object.assign({ className: 'header' + name }, { 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: t('Sort'),
}), { title: sortTitle = '' } = _c, columnSortByProps = __rest(_c, ["title"]);
let styleEl = getHeaderProps.style;
// styleEl.background ="red"
styleEl.width = getWidthByItem(colsSetting, column.Header);
return ((0, jsx_runtime_1.jsxs)(TableStyle_1.TableHeadCell, Object.assign({}, getHeaderProps, { style: styleEl }, { 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} ${(customClasses === null || customClasses === void 0 ? void 0 : customClasses.thead)
? customClasses === null || customClasses === void 0 ? void 0 : customClasses.thead
: ''}`, 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));
}) })), page.length !== 0 && ((0, jsx_runtime_1.jsx)(TableStyle_1.TableBody, Object.assign({}, getTableBodyProps(), { className: page.length === 0 ? classes.SvgNoDataCss : '', style: { minHeight } }, { children: (0, jsx_runtime_1.jsx)(react_window_1.FixedSizeList
// height={790} // Adjust the height as needed
, Object.assign({
// height={790} // Adjust the height as needed
height: Number((0, important_1.calculateHeight)(maxHeight, 'header' + name, name)), className: "tableContent", itemCount: page.length, itemSize: 50, width: '100%', style: {
overflow: 'hidden',
overflowY: 'auto',
} }, { children: ({ index, style }) => {
const row = page[index];
prepareRow(row);
return ((0, jsx_runtime_1.jsx)(TableStyle_1.TableRow, Object.assign({}, row.getRowProps(), { style: Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'row' }), className: `tr ${row.isSelected ? 'selected' : ''}` }, { children: row.cells.map((cell) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
const _m = cell.getCellProps(cellProps), { key: cellKey, role: cellRole } = _m, getCellProps = __rest(_m, ["key", "role"]);
const cellColumnId = cell.column.id;
if (cellColumnId.includes('.')) {
// console.log(cellColumnId,cell.row.original[`${cellColumnId}`]);
const cellRendered = cell === null || cell === void 0 ? void 0 : cell.render('Cell');
if (react_1.default.isValidElement(cellRendered)) {
// Assurez-vous qu'il s'agit d'un élément React valide
const children = react_1.default.Children.toArray(cellRendered.props.children);
children.map((header) => {
if (header.id === cellColumnId) {
header.accessor = (row) => row[cellColumnId];
}
return header;
});
}
}
let styleEl = getCellProps.style;
// styleEl.background ="red"
styleEl.width = getWidthByItem(colsSetting, cellColumnId);
let alignItems = { align: '' };
alignItems.align =
((_a = colsSetting === null || colsSetting === void 0 ? void 0 : colsSetting.find((x) => x.item === cellColumnId)) === null || _a === void 0 ? void 0 : _a.align) || '';
return ((0, jsx_runtime_1.jsx)(TableStyle_1.TableCell, Object.assign({}, getCellProps, { style: styleEl, onClick: cellClickHandler(cell) }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: typeof cell.value === 'string'
? {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
width: '100%',
display: 'inline !important',
}
: {},
// className={`${cellKey.toLowerCase().includes('action') && 'text-left '} ${
// cellKey.toLowerCase().includes('hidecolumns') && 'text-left '
// } `}
className: `w-100 ${(alignItems === null || alignItems === void 0 ? void 0 : alignItems.align) === 'center'
? 'text-center'
: (alignItems === null || alignItems === void 0 ? void 0 : alignItems.align) === 'left'
? 'text-left'
: (alignItems === null || alignItems === void 0 ? void 0 : alignItems.align) === 'right'
? 'text-right'
: isDecimalOrFloat((_b = cell === null || cell === void 0 ? void 0 : cell.row) === null || _b === void 0 ? void 0 : _b.original[`${(_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id}`]) &&
['action'].indexOf((_e = (_d = cell.column) === null || _d === void 0 ? void 0 : _d.id) === null || _e === void 0 ? void 0 : _e.toLowerCase()) === -1
? 'text-right '
: 'text-left'} ` }, { 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 ? (((_f = cell === null || cell === void 0 ? void 0 : cell.column) === null || _f === void 0 ? void 0 : _f.id.includes('.')) ? ((_g = cell === null || cell === void 0 ? void 0 : cell.row) === null || _g === void 0 ? void 0 : _g.original[`${(_h = cell === null || cell === void 0 ? void 0 : cell.column) === null || _h === void 0 ? void 0 : _h.id}`]) : (cell.render('Aggregated'))) : cell.isPlaceholder ? null : ((_j = cell === null || cell === void 0 ? void 0 : cell.column) === null || _j === void 0 ? void 0 : _j.id.includes('.')) ? ((_k = cell === null || cell === void 0 ? void 0 : cell.row) === null || _k === void 0 ? void 0 : _k.original[`${(_l = cell === null || cell === void 0 ? void 0 : cell.column) === null || _l === void 0 ? void 0 : _l.id}`]) : (cell.render('Cell')) })) }), cellKey));
}) })));
} })) }))), page.length === 0 && ((0, jsx_runtime_1.jsx)(TableStyle_1.TableBody, Object.assign({}, getTableBodyProps(), { className: page.length === 0 ? classes.SvgNoDataCss : '', style: { minHeight } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: page.length === 0 ? classes.SvgNoDataCss : 'd-none', style: {
position: 'relative',
paddingTop: '70px',
paddingBottom: '70px',
} }, { children: (0, jsx_runtime_1.jsx)(SvgNoData_1.default, {}) })) }))), isTableHasFooter && tableFooter && ((0, jsx_runtime_1.jsx)("tfoot", Object.assign({ className: name + '_table_footer', style: { position: 'sticky', bottom: '0px' } }, { children: tableFooter })))] }) })) })) })), (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, { name: name, 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',
color: 'red',
} }, { 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: t('Filter(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, fil