trotl-table 1.0.38 → 1.0.40

package/dist/Table.cjs.js

@@ -9644,7 +9644,9 @@ function TableInner({
   rowHeight = 34,
   groupHeaderHeight = 36,
   showKey = false,
+  keyWidth = null,
   selectedRowsCallback = () => {},
+  doubleClickEnable = false,
   refreshTrigger = () => {},
   editCallback = () => {},
   viewCallback = () => {},
@@ -9911,9 +9913,34 @@ function TableInner({
       return dir === "asc" ? dx - dy : dy - dx;
     }
 
-    // Fallback string compare
+    // Fallback string compare with numeric-prefix awareness
     const sx = String(x).toLowerCase();
     const sy = String(y).toLowerCase();
+
+    // helper to extract leading number and remainder
+    const extractPrefix = str => {
+      const m = str.match(/^(\d+)(.*)$/);
+      if (m) return [Number(m[1]), m[2]];
+      return null;
+    };
+    const px = extractPrefix(sx);
+    const py = extractPrefix(sy);
+    if (px && py) {
+      // both have numeric prefix
+      if (px[0] !== py[0]) {
+        return dir === "asc" ? px[0] - py[0] : py[0] - px[0];
+      }
+      // same number, compare remainder lexicographically
+      const restCmp = px[1].localeCompare(py[1]);
+      return dir === "asc" ? restCmp : -restCmp;
+    } else if (px && !py) {
+      // number-prefixed should come before text-only
+      return dir === "asc" ? -1 : 1;
+    } else if (!px && py) {
+      return dir === "asc" ? 1 : -1;
+    }
+
+    // default lexicographic fall back
     if (sx < sy) return dir === "asc" ? -1 : 1;
     if (sx > sy) return dir === "asc" ? 1 : -1;
     return 0;
@@ -10369,7 +10396,12 @@ function TableInner({
             },
             onClick: e => e.stopPropagation()
           })), showKey && /*#__PURE__*/React.createElement("div", {
-            className: "table-cell key-cell"
+            className: "table-cell key-cell",
+            style: keyWidth ? {
+              width: keyWidth,
+              minWidth: keyWidth,
+              maxWidth: keyWidth
+            } : undefined
           }), /*#__PURE__*/React.createElement("div", {
             className: "table-cell group-header",
             style: {
@@ -10406,7 +10438,12 @@ function TableInner({
         },
         onClick: e => e.stopPropagation()
       })), showKey && /*#__PURE__*/React.createElement("div", {
-        className: "table-cell key-cell"
+        className: "table-cell key-cell",
+        style: keyWidth ? {
+          width: keyWidth,
+          minWidth: keyWidth,
+          maxWidth: keyWidth
+        } : undefined
       }), /*#__PURE__*/React.createElement("div", {
         className: "table-cell group-header"
       }, item.expanded ? "▾" : "▸", " ", translate(item.groupName), " (", item.rowCount, ")"), columns.slice(1).map((_, i) => /*#__PURE__*/React.createElement("div", {
@@ -10432,10 +10469,19 @@ function TableInner({
         }
       });
     }
+    const handleRowDoubleClick = e => {
+      if (!doubleClickEnable) return;
+      // ignore double-clicks on action buttons or inputs
+      if (e.target.closest('.action-btn-table') || e.target.closest('input') || e.target.closest('button')) {
+        return;
+      }
+      editCallbackRef.current(row);
+    };
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
       style: style,
-      className: "table-row"
+      className: "table-row",
+      onDoubleClick: handleRowDoubleClick
     }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
       className: "table-cell checkbox-cell"
     }, /*#__PURE__*/React.createElement("input", {
@@ -10444,7 +10490,12 @@ function TableInner({
       onChange: () => toggleRowSelection(row.id)
     })), showKey && /*#__PURE__*/React.createElement("div", {
       title: visualIndex,
-      className: "table-cell key-cell"
+      className: "table-cell key-cell",
+      style: keyWidth ? {
+        width: keyWidth,
+        minWidth: keyWidth,
+        maxWidth: keyWidth
+      } : undefined
     }, visualIndex), allColumns.map((col, i) => {
       let cellStyle = col.style ? {
         ...col.style
@@ -10533,7 +10584,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -10605,7 +10656,12 @@ function TableInner({
       }
     }
   })), showKey && /*#__PURE__*/React.createElement("div", {
-    className: "table-cell key-cell"
+    className: "table-cell key-cell",
+    style: keyWidth ? {
+      width: keyWidth,
+      minWidth: keyWidth,
+      maxWidth: keyWidth
+    } : undefined
   }, "#"), allColumns.map((col, i) => {
     let cellStyle = col.style ? {
       ...col.style,
@@ -10618,15 +10674,18 @@ function TableInner({
       cellStyle.maxWidth = col.style.width;
       cellStyle.width = col.style.width;
     }
+    // determine header title text for tooltip; custom columns may also have string headers
+    const headerTitle = typeof col.header === 'string' ? col.header : undefined;
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       className: "table-cell",
       style: cellStyle,
-      title: typeof col.header === 'string' ? col.header : undefined,
+      title: headerTitle,
       onClick: col.isCustom ? undefined : () => setSort(col.accessor)
     }, col.isCustom ? col.header ?? '' : col.header, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
   }), showActions && /*#__PURE__*/React.createElement("div", {
-    className: "table-cell action-cell"
+    className: "table-cell action-cell",
+    title: translate("action")
   }, showIcons ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")
   }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React.createElement("div", {