@pdg/react-table 1.0.65 → 1.0.67

package/dist/index.js

@@ -3021,6 +3021,16 @@ var TableBodyCell = function (_a) {
                 if (typeof data === 'string' || typeof data === 'number') {
                     data = numberWithThousandSeparator(data);
                 }
+                if (column.numberPrefix) {
+                    data = (React.createElement(React.Fragment, null,
+                        React.createElement("span", { style: { opacity: 0.5, marginRight: 2 } }, column.numberPrefix),
+                        data));
+                }
+                if (column.numberSuffix) {
+                    data = (React.createElement(React.Fragment, null,
+                        data,
+                        React.createElement("span", { style: { opacity: 0.5, marginLeft: 2 } }, column.numberSuffix)));
+                }
                 break;
             case 'tel':
                 if (typeof data === 'string') {
@@ -3041,8 +3051,6 @@ var TableBodyCell = function (_a) {
             case 'buttons':
                 data = (React.createElement(StyledButtonsBox, { className: 'TableBodyCell-buttons-box', justifyContent: buttonsBoxJustifyContent, onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
                 break;
-        }
-        switch (column.type) {
             case 'img':
                 {
                     var img = React.createElement("img", { src: data, style: { maxWidth: '100%', verticalAlign: 'middle' }, alt: '' });
@@ -3459,6 +3467,7 @@ TableTopHead.defaultProps = TableTopHeadDefaultProps;
 var templateObject_1$1;function columnFilter(v) {
     return v !== undefined && v !== null && v !== false;
 }
+var _columnId = 0;
 var Table = React.forwardRef(function (_a, ref) {
     // Ref ---------------------------------------------------------------------------------------------------------------
     var caption = _a.caption, topHeadRows = _a.topHeadRows, initColumns = _a.columns, initItems = _a.items, initPaging = _a.paging, pagingAlign = _a.pagingAlign, defaultAlign = _a.defaultAlign, defaultEllipsis = _a.defaultEllipsis, initStickyHeader = _a.stickyHeader, height = _a.height, minHeight = _a.minHeight, maxHeight = _a.maxHeight, fullHeight = _a.fullHeight, showOddColor = _a.showOddColor, showEvenColor = _a.showEvenColor, cellPadding = _a.cellPadding, footer = _a.footer, noData = _a.noData, pagination = _a.pagination, sortable$1 = _a.sortable, onClick = _a.onClick, onGetBodyRowSx = _a.onGetBodyRowSx, onPageChange = _a.onPageChange, onSortChange = _a.onSortChange, onCheckChange = _a.onCheckChange, 
@@ -3469,6 +3478,7 @@ var Table = React.forwardRef(function (_a, ref) {
     var updateHeadCheckTimer = React.useRef();
     var fireOnCheckChangeTimer = React.useRef({});
     var simpleBarRef = React.useRef(null);
+    var finalColumnsIdRef = React.useRef([]);
     // sortable --------------------------------------------------------------------------------------------------------
     var sensors = core.useSensors(core.useSensor(core.MouseSensor, {
         // Require the mouse to move by 10 pixels before activating
@@ -3539,18 +3549,28 @@ var Table = React.forwardRef(function (_a, ref) {
             return __assign$3({ id: id == null ? "".concat(v4(), "_").concat(index) : id }, item);
         });
     }, []);
+    var getFinalColumnId = React.useCallback(function (column) {
+        if (finalColumns && finalColumnsIdRef.current) {
+            var idx = finalColumns.indexOf(column);
+            return finalColumnsIdRef.current[idx];
+        }
+        else {
+            return '';
+        }
+    }, [finalColumns]);
     var updateHeadCheck = React.useCallback(function (column) {
         if (updateHeadCheckTimer.current) {
             clearTimeout(updateHeadCheckTimer.current);
             updateHeadCheckTimer.current = undefined;
         }
-        var headColumnData = localHeaderDataRef.current[column.id];
+        var columnId = getFinalColumnId(column);
+        var headColumnData = localHeaderDataRef.current[columnId];
         if (headColumnData) {
             updateHeadCheckTimer.current = setTimeout(function () {
                 var _a, _b;
                 updateHeadCheckTimer.current = undefined;
                 var enabledCheckExists = !!Object.keys(localBodyDataRef.current).find(function (key) {
-                    var columnData = localBodyDataRef.current[key].columns[column.id];
+                    var columnData = localBodyDataRef.current[key].columns[columnId];
                     if (columnData) {
                         if (!columnData.checkDisabled) {
                             return true;
@@ -3559,7 +3579,7 @@ var Table = React.forwardRef(function (_a, ref) {
                 });
                 var allChecked = enabledCheckExists &&
                     !Object.keys(localBodyDataRef.current).find(function (key) {
-                        var columnData = localBodyDataRef.current[key].columns[column.id];
+                        var columnData = localBodyDataRef.current[key].columns[columnId];
                         if (columnData) {
                             if (!columnData.checkDisabled) {
                                 return !columnData.checked;
@@ -3570,7 +3590,7 @@ var Table = React.forwardRef(function (_a, ref) {
                 (_b = headColumnData.commands) === null || _b === void 0 ? void 0 : _b.setChecked(allChecked);
             }, 100);
         }
-    }, []);
+    }, [getFinalColumnId]);
     var getCheckedItems = React.useCallback(function (columnId) {
         var checkedItems = [];
         Object.keys(localBodyDataRef.current).forEach(function (key) {
@@ -3643,7 +3663,17 @@ var Table = React.forwardRef(function (_a, ref) {
     React.useEffect(function () {
         stopHeadCheckTimer();
         clearFireOnCheckChangeTimer();
-        setFinalColumns(columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter));
+        var newFinalColumns = columns === null || columns === void 0 ? void 0 : columns.filter(columnFilter);
+        setFinalColumns(newFinalColumns);
+        finalColumnsIdRef.current = newFinalColumns === null || newFinalColumns === void 0 ? void 0 : newFinalColumns.map(function (col) {
+            if (col.id) {
+                return col.id;
+            }
+            else {
+                _columnId += 1;
+                return "$c$".concat(_columnId, "$");
+            }
+        });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [columns]);
     React.useLayoutEffect(function () {
@@ -3657,7 +3687,7 @@ var Table = React.forwardRef(function (_a, ref) {
                 if (finalColumns) {
                     finalColumns.forEach(function (c) {
                         var _a;
-                        var columnId = c.id;
+                        var columnId = getFinalColumnId(c);
                         if ((_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId]) {
                             res[item.id].columns[columnId] = localBodyDataRef.current[item.id].columns[columnId];
                         }
@@ -3676,18 +3706,18 @@ var Table = React.forwardRef(function (_a, ref) {
         else {
             localBodyDataRef.current = {};
         }
-    }, [sortableItems, finalColumns, clearFireOnCheckChangeTimer]);
+    }, [sortableItems, finalColumns, clearFireOnCheckChangeTimer, getFinalColumnId]);
     React.useLayoutEffect(function () {
         if (finalColumns) {
             localHeaderDataRef.current = finalColumns.reduce(function (res, c) {
-                res[c.id] = { column: c, checked: false };
+                res[getFinalColumnId(c)] = { column: c, checked: false };
                 return res;
             }, {});
         }
         else {
             localHeaderDataRef.current = {};
         }
-    }, [finalColumns]);
+    }, [finalColumns, getFinalColumnId]);
     // Commands --------------------------------------------------------------------------------------------------------
     React.useLayoutEffect(function () {
         if (ref) {
@@ -3768,14 +3798,14 @@ var Table = React.forwardRef(function (_a, ref) {
     var handleHeadCheckChange = React.useCallback(function (column, checked) {
         Object.keys(localBodyDataRef.current).forEach(function (key) {
             var _a;
-            var data = localBodyDataRef.current[key].columns[column.id];
+            var data = localBodyDataRef.current[key].columns[getFinalColumnId(column)];
             if (data) {
                 if (!data.checkDisabled) {
                     (_a = data.commands) === null || _a === void 0 ? void 0 : _a.setChecked(checked);
                 }
             }
         });
-    }, []);
+    }, [getFinalColumnId]);
     var handleBodyCheckChange = React.useCallback(function (item, column) {
         updateHeadCheck(column);
     }, [updateHeadCheck]);
@@ -3798,39 +3828,40 @@ var Table = React.forwardRef(function (_a, ref) {
     }, [openMenuId]);
     var TableContextSetItemColumnChecked = React.useCallback(function (item, column, checked) {
         var _a;
-        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[column.id];
+        var columnId = getFinalColumnId(column);
+        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[columnId];
         if (data) {
             data.checked = checked;
-            fireOnCheckChange(column.id);
+            fireOnCheckChange(columnId);
         }
-    }, [fireOnCheckChange]);
+    }, [fireOnCheckChange, getFinalColumnId]);
     var TableContextSetItemColumnCheckDisabled = React.useCallback(function (item, column, disabled) {
         var _a;
-        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[column.id];
+        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
         if (data) {
             data.checkDisabled = disabled;
             updateHeadCheck(column);
         }
-    }, [updateHeadCheck]);
+    }, [getFinalColumnId, updateHeadCheck]);
     var TableContextSetItemColumnCommands = React.useCallback(function (item, column, commands) {
         var _a;
-        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[column.id];
+        var data = (_a = localBodyDataRef.current[item.id]) === null || _a === void 0 ? void 0 : _a.columns[getFinalColumnId(column)];
         if (data) {
             data.commands = commands;
         }
-    }, []);
+    }, [getFinalColumnId]);
     var TableContextSetHeadColumnChecked = React.useCallback(function (column, checked) {
-        var data = localHeaderDataRef.current[column.id];
+        var data = localHeaderDataRef.current[getFinalColumnId(column)];
         if (data) {
             data.checked = checked;
         }
-    }, []);
+    }, [getFinalColumnId]);
     var TableContextSetHeadColumnCommands = React.useCallback(function (column, commands) {
-        var data = localHeaderDataRef.current[column.id];
+        var data = localHeaderDataRef.current[getFinalColumnId(column)];
         if (data) {
             data.commands = commands;
         }
-    }, []);
+    }, [getFinalColumnId]);
     // Memo --------------------------------------------------------------------------------------------------------------
     var tableContextValue = React.useMemo(function () { return ({
         menuOpen: menuOpen,