trotl-table 1.0.80 → 1.0.82

package/dist/Table.cjs.js

@@ -9677,6 +9677,8 @@ function TableInner({
   enableMouseRightClick = null,
   customColumns = [],
   groupDefaultOpen = false,
+  groupExpanded = null,
+  onExpandedGroupsChange = () => {},
   showIcons = true,
   timeoutLoading = 5,
   t
@@ -9744,7 +9746,7 @@ function TableInner({
   });
   const [contextMenuModal, setContextMenuModal] = React.useState({
     visible: false,
-    title: '',
+    title: "",
     component: null
   });
   React.useEffect(() => {
@@ -9759,7 +9761,7 @@ function TableInner({
       row: null
     });
     const handleEscape = event => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         setContextMenu({
           visible: false,
           x: 0,
@@ -9768,13 +9770,13 @@ function TableInner({
         });
       }
     };
-    window.addEventListener('click', handleClick);
-    window.addEventListener('contextmenu', handleClick);
-    window.addEventListener('keydown', handleEscape);
+    window.addEventListener("click", handleClick);
+    window.addEventListener("contextmenu", handleClick);
+    window.addEventListener("keydown", handleEscape);
     return () => {
-      window.removeEventListener('click', handleClick);
-      window.removeEventListener('contextmenu', handleClick);
-      window.removeEventListener('keydown', handleEscape);
+      window.removeEventListener("click", handleClick);
+      window.removeEventListener("contextmenu", handleClick);
+      window.removeEventListener("keydown", handleEscape);
     };
   }, [contextMenu.visible]);
   React.useEffect(() => {
@@ -10052,7 +10054,7 @@ function TableInner({
     updateSearchFromUrl();
 
     // Listen for URL changes (back/forward navigation)
-    window.addEventListener('popstate', updateSearchFromUrl);
+    window.addEventListener("popstate", updateSearchFromUrl);
 
     // Listen for programmatic URL changes if you use history.pushState/replaceState
     const originalPushState = window.history.pushState;
@@ -10066,7 +10068,7 @@ function TableInner({
       updateSearchFromUrl();
     };
     return () => {
-      window.removeEventListener('popstate', updateSearchFromUrl);
+      window.removeEventListener("popstate", updateSearchFromUrl);
       // Restore original methods
       window.history.pushState = originalPushState;
       window.history.replaceState = originalReplaceState;
@@ -10109,7 +10111,7 @@ function TableInner({
   const closeContextMenuModal = React.useCallback(() => {
     setContextMenuModal({
       visible: false,
-      title: '',
+      title: "",
       component: null
     });
   }, []);
@@ -10163,7 +10165,7 @@ function TableInner({
     };
 
     // Listen for popstate (back/forward navigation)
-    window.addEventListener('popstate', handleDateParamChange);
+    window.addEventListener("popstate", handleDateParamChange);
 
     // Listen for programmatic URL changes
     const originalPushState = window.history.pushState;
@@ -10178,10 +10180,10 @@ function TableInner({
     };
 
     // Listen for hashchange (in case date params are in hash)
-    window.addEventListener('hashchange', handleDateParamChange);
+    window.addEventListener("hashchange", handleDateParamChange);
     return () => {
-      window.removeEventListener('popstate', handleDateParamChange);
-      window.removeEventListener('hashchange', handleDateParamChange);
+      window.removeEventListener("popstate", handleDateParamChange);
+      window.removeEventListener("hashchange", handleDateParamChange);
       window.history.pushState = originalPushState;
       window.history.replaceState = originalReplaceState;
     };
@@ -10189,15 +10191,15 @@ function TableInner({
   const filterRows = React.useCallback(rows => {
     // Check for date-related URL params first
     const urlParams = new URLSearchParams(urlSearchString);
-    const _dateParams = ['startDate', 'endDate', 'date'];
+    const _dateParams = ["startDate", "endDate", "date"];
     let dateFiltered = rows;
     for (const paramKey of _dateParams) {
       const paramValue = urlParams.get(paramKey);
       if (!paramValue) continue;
 
       // Check if it's a range (contains ~)
-      if (paramValue.includes('~')) {
-        const [startTs, endTs] = paramValue.split('~').map(Number);
+      if (paramValue.includes("~")) {
+        const [startTs, endTs] = paramValue.split("~").map(Number);
         if (isNaN(startTs) || isNaN(endTs)) continue;
         dateFiltered = dateFiltered.filter(row => {
           // Check if any date field in the row falls within the range
@@ -10311,12 +10313,24 @@ function TableInner({
       rows: sortRows(g.rows || [])
     }));
   }, [normalizedGroups, sorting, filterRows, getAccessorValue]);
+  const emitExpandedChange = React.useCallback((nextState, toggledGroupId) => {
+    if (typeof onExpandedGroupsChange === "function") {
+      onExpandedGroupsChange(nextState, toggledGroupId);
+    }
+    if (typeof groupExpanded === "function") {
+      groupExpanded(nextState, toggledGroupId);
+    }
+  }, [onExpandedGroupsChange, groupExpanded]);
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const toggleGroup = gid => {
-    setExpandedGroups(prev => ({
-      ...prev,
-      [gid]: !prev[gid]
-    }));
+    setExpandedGroups(prev => {
+      const next = {
+        ...prev,
+        [gid]: !prev[gid]
+      };
+      emitExpandedChange(next, gid);
+      return next;
+    });
   };
   React.useEffect(() => {
     // Pre-populate expansion state for all groups
@@ -10331,6 +10345,11 @@ function TableInner({
       return next;
     });
   }, [normalizedGroups, groupKey, groupDefaultOpen]);
+  React.useEffect(() => {
+    if (groupExpanded && typeof groupExpanded === "object") {
+      setExpandedGroups(groupExpanded);
+    }
+  }, [groupExpanded]);
   const groupRowsById = React.useMemo(() => {
     const map = {};
     for (const g of sortedGroupedData) {
@@ -10391,7 +10410,7 @@ function TableInner({
     if (!el) return;
 
     // Try to find the actual scrollable grid element created by react-virtualized
-    const grid = el.querySelector('.ReactVirtualized__Grid');
+    const grid = el.querySelector(".ReactVirtualized__Grid");
     const check = () => {
       if (!grid) {
         setHeaderPadRight(0);
@@ -10422,10 +10441,14 @@ function TableInner({
       cancelAnimationFrame(raf);
       try {
         ro.disconnect();
-      } catch {/* noop */}
+      } catch {
+        /* noop */
+      }
       try {
         mo.disconnect();
-      } catch {/* noop */}
+      } catch {
+        /* noop */
+      }
     };
   }, [listRef, tableDataFlat.length]);
 
@@ -10452,7 +10475,7 @@ function TableInner({
         if (res && res.success === false) return;
       } catch (err) {
         // if callback throws, don't block deletion
-        console.error('deleteCallback threw', err);
+        console.error("deleteCallback threw", err);
       }
     }
     setLocalData(prev => {
@@ -10522,8 +10545,18 @@ function TableInner({
     const isUndefinedLike = v === undefined || typeof v === "string" && v.trim().toLowerCase() === "undefined";
     const isNoData = isUndefinedLike;
 
+    // Custom column type (editable in-table)
+    if (col && col.type === "custom") {
+      const customComp = col["modal-comp"];
+      if (customComp) {
+        return /*#__PURE__*/React.createElement("customComp", {
+          value: v
+        });
+      }
+    }
+
     // Checkbox column type (editable in-table)
-    if (col && col.type === 'checkbox') {
+    if (col && col.type === "checkbox") {
       const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
@@ -10554,14 +10587,14 @@ function TableInner({
           try {
             onCellChangeRef.current?.(row, accessor, next);
           } catch (err) {
-            console.error('onCellChange error', err);
+            console.error("onCellChange error", err);
           }
         }
       });
     }
 
     // Switch column type (uses internal Switch component)
-    if (col && col.type === 'switch') {
+    if (col && col.type === "switch") {
       const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("div", {
         title: isNoData ? translate("noData") : undefined,
@@ -10572,7 +10605,7 @@ function TableInner({
       }, /*#__PURE__*/React.createElement(Switch.default, {
         checked: checked,
         onChange: valOrEvent => {
-          const next = typeof valOrEvent === 'boolean' ? valOrEvent : valOrEvent && valOrEvent.target ? !!valOrEvent.target.checked : !!valOrEvent;
+          const next = typeof valOrEvent === "boolean" ? valOrEvent : valOrEvent && valOrEvent.target ? !!valOrEvent.target.checked : !!valOrEvent;
           setLocalData(prev => {
             if (isGrouped) {
               return prev.map(g => ({
@@ -10592,30 +10625,30 @@ function TableInner({
           try {
             onCellChangeRef.current?.(row, accessor, next);
           } catch (err) {
-            console.error('onCellChange error', err);
+            console.error("onCellChange error", err);
           }
         }
       }));
     }
 
     // Color column type (display color swatch background)
-    if (col && col.type === 'color') {
+    if (col && col.type === "color") {
       const colorVal = isUndefinedLike ? "transparent" : v || "transparent";
       const text = isUndefinedLike ? "..." : String(colorVal) ;
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          width: '100%',
-          height: '100%',
-          minHeight: '20px',
+          width: "100%",
+          height: "100%",
+          minHeight: "20px",
           backgroundColor: colorVal,
-          color: '#000',
-          border: '1px solid #ccc',
-          boxSizing: 'border-box',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: '12px',
-          overflow: 'hidden'
+          color: "#000",
+          border: "1px solid #ccc",
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "12px",
+          overflow: "hidden"
         },
         title: isNoData ? translate("noData") : text,
         onClick: () => triggerCellCallback(row, col, colorVal)
@@ -10623,7 +10656,7 @@ function TableInner({
     }
 
     // Input column type (editable text)
-    if (col && col.type === 'input') {
+    if (col && col.type === "input") {
       const text = isNoData ? "" : v == null ? "" : String(v);
       return /*#__PURE__*/React.createElement("input", {
         type: "text",
@@ -10656,7 +10689,7 @@ function TableInner({
           try {
             onCellChangeRef.current?.(row, accessor, next);
           } catch (err) {
-            console.error('onCellChange error', err);
+            console.error("onCellChange error", err);
           }
         },
         style: {
@@ -10667,7 +10700,7 @@ function TableInner({
     }
 
     // Number column type (format decimals) - default two decimals
-    if (col && col.type === 'number') {
+    if (col && col.type === "number") {
       if (isNoData) {
         return /*#__PURE__*/React.createElement("span", {
           title: translate("noData")
@@ -10691,7 +10724,7 @@ function TableInner({
         title: formatted
       }, formatted);
     }
-    if (col && col.type === 'array') {
+    if (col && col.type === "array") {
       const arr = Array.isArray(v) ? v : [];
       const list = formatArrayValue(arr, col);
       const count = arr.length;
@@ -10794,7 +10827,7 @@ function TableInner({
     const from = tableDataFlat[fromIndex];
     let to = null;
     let emptyGroupId = null;
-    if (typeof toIndexOrGroup === 'object' && toIndexOrGroup && toIndexOrGroup.emptyGroupId) {
+    if (typeof toIndexOrGroup === "object" && toIndexOrGroup && toIndexOrGroup.emptyGroupId) {
       emptyGroupId = toIndexOrGroup.emptyGroupId;
     } else {
       to = tableDataFlat[toIndexOrGroup];
@@ -10889,7 +10922,7 @@ function TableInner({
           newRow = res.newRow;
         }
       } catch (err) {
-        console.error('duplicateCallback threw', err);
+        console.error("duplicateCallback threw", err);
       }
     }
     // fallback simple clone if callback didn't provide newRow
@@ -10960,13 +10993,13 @@ function TableInner({
             key: key,
             style: {
               ...style,
-              background: '#f6f6fa',
-              border: '2px dashed #bbb',
-              textAlign: 'center',
-              color: '#888',
+              background: "#f6f6fa",
+              border: "2px dashed #bbb",
+              textAlign: "center",
+              color: "#888",
               minHeight: rowHeight,
-              display: 'flex',
-              alignItems: 'center'
+              display: "flex",
+              alignItems: "center"
             },
             className: "table-row group-row empty-group-drop",
             onClick: () => toggleGroup(gid)
@@ -10995,7 +11028,7 @@ function TableInner({
           }), /*#__PURE__*/React.createElement("div", {
             className: "table-cell group-header",
             title: `${translate(item.groupName)} (0)`
-          }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (0) \u2014 ", translate("DropHereToMoveIntoThisGroup")), showActions && /*#__PURE__*/React.createElement("div", {
+          }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (0) \u2014", " ", translate("DropHereToMoveIntoThisGroup")), showActions && /*#__PURE__*/React.createElement("div", {
             className: "table-cell action-cell",
             style: actionColumnStyle
           }));
@@ -11047,7 +11080,7 @@ function TableInner({
     // Insert custom columns at specified places
     if (Array.isArray(customColumns)) {
       customColumns.forEach(col => {
-        if (typeof col.place === 'number') {
+        if (typeof col.place === "number") {
           allColumns.splice(col.place, 0, {
             ...col,
             isCustom: true
@@ -11059,7 +11092,7 @@ function TableInner({
     const handleRowDoubleClick = e => {
       if (!doubleClickEnable) return;
       // ignore if the event originated on an interactive element
-      if (e.target.closest('.checkbox-cell') || e.target.closest('button') || e.target.closest('input') || e.target.closest('a')) {
+      if (e.target.closest(".checkbox-cell") || e.target.closest("button") || e.target.closest("input") || e.target.closest("a")) {
         return;
       }
       editCallbackRef.current(row);
@@ -11086,7 +11119,7 @@ function TableInner({
       className: "row-main",
       onDoubleClick: doubleClickEnable ? handleRowDoubleClick : undefined,
       style: {
-        display: 'flex',
+        display: "flex",
         flex: 1
       }
     }, enableMultiSelect && /*#__PURE__*/React.createElement("div", {
@@ -11113,7 +11146,7 @@ function TableInner({
         className: "table-cell",
         style: cellStyle,
         onClick: () => triggerCellCallback(row, col)
-      }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(cellValue, resolvedAccessor, row, col));
+      }, col.isCustom ? typeof col.render === "function" ? col.render(row, i) : col.render : renderCell(cellValue, resolvedAccessor, row, col));
     })), showActions && /*#__PURE__*/React.createElement("div", {
       className: "table-cell action-cell",
       style: actionColumnStyle
@@ -11219,7 +11252,7 @@ function TableInner({
   const allColumns = [...columns];
   if (Array.isArray(customColumns)) {
     customColumns.forEach(col => {
-      if (typeof col.place === 'number') {
+      if (typeof col.place === "number") {
         allColumns.splice(col.place, 0, {
           ...col,
           isCustom: true
@@ -11231,9 +11264,9 @@ function TableInner({
     className: "table-container",
     ref: setTableRef,
     style: useExternalDndContext && enableExternalRowDrop ? {
-      transition: 'background 0.15s',
-      background: isExternalOver && canExternalDrop ? 'rgba(100,108,255,0.15)' : undefined,
-      outline: isExternalOver && canExternalDrop ? '2px dashed #646cff' : undefined
+      transition: "background 0.15s",
+      background: isExternalOver && canExternalDrop ? "rgba(100,108,255,0.15)" : undefined,
+      outline: isExternalOver && canExternalDrop ? "2px dashed #646cff" : undefined
     } : undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-header",
@@ -11295,8 +11328,8 @@ function TableInner({
     className: "table-empty",
     style: {
       padding: 24,
-      textAlign: 'center',
-      color: '#666'
+      textAlign: "center",
+      color: "#666"
     }
   }, translate("noData")) : /*#__PURE__*/React.createElement(AutoSizer, null, ({
     height,
@@ -11317,15 +11350,15 @@ function TableInner({
     cancelLabel: translate("cancel"),
     showCancel: true,
     showConfirm: true
-  }, /*#__PURE__*/React.createElement("p", null, translate("areYouSureYouWantToDelete"), " ", /*#__PURE__*/React.createElement("strong", null, pendingDelete ? pendingDelete[deleteLabelKey] ?? pendingDelete.name ?? pendingDelete.id : ''), "?")));
+  }, /*#__PURE__*/React.createElement("p", null, translate("areYouSureYouWantToDelete"), " ", /*#__PURE__*/React.createElement("strong", null, pendingDelete ? pendingDelete[deleteLabelKey] ?? pendingDelete.name ?? pendingDelete.id : ""), "?")));
   const contextMenuMarkup = contextMenu.visible && rightClickActions.length > 0 ? /*#__PURE__*/React.createElement("div", {
     style: {
-      position: 'fixed',
+      position: "fixed",
       top: contextMenu.y,
       left: contextMenu.x,
-      backgroundColor: '#fff',
-      border: '1px solid #ccc',
-      boxShadow: '0 2px 8px rgba(0,0,0,.15)',
+      backgroundColor: "#fff",
+      border: "1px solid #ccc",
+      boxShadow: "0 2px 8px rgba(0,0,0,.15)",
       zIndex: 9999,
       minWidth: 160,
       padding: 0,
@@ -11335,11 +11368,11 @@ function TableInner({
   }, rightClickActions.map((action, i) => /*#__PURE__*/React.createElement("div", {
     key: i,
     style: {
-      padding: '8px 12px',
-      cursor: 'pointer',
-      borderBottom: i < rightClickActions.length - 1 ? '1px solid #eee' : 'none',
-      backgroundColor: hoveredActionIndex === i ? '#f5f5f5' : '#fff',
-      color: hoveredActionIndex === i ? '#000' : '#333'
+      padding: "8px 12px",
+      cursor: "pointer",
+      borderBottom: i < rightClickActions.length - 1 ? "1px solid #eee" : "none",
+      backgroundColor: hoveredActionIndex === i ? "#f5f5f5" : "#fff",
+      color: hoveredActionIndex === i ? "#000" : "#333"
     },
     onMouseEnter: () => setHoveredActionIndex(i),
     onMouseLeave: () => setHoveredActionIndex(null),
@@ -11347,17 +11380,17 @@ function TableInner({
   }, action.label || action.text || `Action ${i + 1}`))) : null;
   const contextMenuModalMarkup = contextMenuModal.visible && contextMenuModal.component ? /*#__PURE__*/React.createElement(Modal.default, {
     isOpen: true,
-    title: contextMenuModal.title || '',
+    title: contextMenuModal.title || "",
     onConfirm: () => setContextMenuModal({
       visible: false,
-      title: '',
+      title: "",
       component: null
     }),
     onCancel: () => closeContextMenuModal(),
     showConfirm: false,
     showCancel: true,
-    cancelLabel: translate('cancel')
-  }, typeof contextMenuModal.component === 'function' ? /*#__PURE__*/React.createElement(contextMenuModal.component, {
+    cancelLabel: translate("cancel")
+  }, typeof contextMenuModal.component === "function" ? /*#__PURE__*/React.createElement(contextMenuModal.component, {
     row: contextMenu.row
   }) : contextMenuModal.component) : null;
   return /*#__PURE__*/React.createElement(React.Fragment, null, tableMarkup, contextMenuMarkup, contextMenuModalMarkup);