trotl-table 1.0.64 → 1.0.66

package/dist/Table.cjs.js

@@ -9640,6 +9640,7 @@ function TableInner({
   data = [],
   isGrouped = false,
   groupKey = "groupId",
+  routePath = null,
   extraSearchTerm = "",
   rowHeight = 34,
   groupHeaderHeight = 36,
@@ -9701,6 +9702,7 @@ function TableInner({
         yesDelete: "Yes, Delete",
         areYouSureYouWantToDelete: "Are you sure you want to delete",
         action: "Action",
+        noData: "No Data",
         DropHereToMoveIntoThisGroup: "Drop here to move into this group"
       };
       return translations[key] || key;
@@ -9797,7 +9799,12 @@ function TableInner({
       setSearchTerm(extraSearchTerm);
       return;
     }
+    const pagePath = routePath || null;
     const updateSearchFromUrl = () => {
+      // prevent clearing filter when we're navigating away from this table route
+      if (pagePath && window.location.pathname !== pagePath) {
+        return;
+      }
       const params = new URLSearchParams(window.location.search);
       const entrySearch = params.get("entry");
       const urlSearch = params.get("search");
@@ -10236,12 +10243,15 @@ function TableInner({
     }
   }, [getAccessorKey, getAccessorValue]);
   const renderCell = React.useCallback((v, accessor, row, col) => {
+    const isNoData = v === undefined;
+
     // Checkbox column type (editable in-table)
     if (col && col.type === 'checkbox') {
       const checked = !!v;
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
         checked: checked,
+        title: isNoData ? translate("noData") : undefined,
         onClick: e => {
           e.stopPropagation();
           triggerCellCallback(row, col, checked);
@@ -10277,6 +10287,7 @@ function TableInner({
     if (col && col.type === 'switch') {
       const checked = !!v;
       return /*#__PURE__*/React.createElement("div", {
+        title: isNoData ? translate("noData") : undefined,
         onClick: e => {
           e.stopPropagation();
           triggerCellCallback(row, col, checked);
@@ -10310,46 +10321,35 @@ function TableInner({
       }));
     }
 
+    // Color column type (display color swatch background)
+    if (col && col.type === 'color') {
+      const colorVal = v || "transparent";
+      const text = String(colorVal) ;
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          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'
+        },
+        title: isNoData ? translate("noData") : text,
+        onClick: () => triggerCellCallback(row, col, colorVal)
+      }, text);
+    }
+
     // Input column type (editable text)
     if (col && col.type === 'input') {
-      const text = v == null ? "" : String(v);
-      return /*#__PURE__*/React.createElement("input", {
-        type: "text",
-        className: "table-cell-input",
-        value: text,
-        onClick: e => {
-          e.stopPropagation();
-          triggerCellCallback(row, col, text);
-        },
-        onChange: e => {
-          const next = e.target.value;
-          setLocalData(prev => {
-            if (isGrouped) {
-              return prev.map(g => ({
-                ...g,
-                rows: (g.rows || []).map(r => r.id === row.id ? {
-                  ...r,
-                  [accessor]: next
-                } : r)
-              }));
-            }
-            return (prev || []).map(r => r.id === row.id ? {
-              ...r,
-              [accessor]: next
-            } : r);
-          });
-          refreshTriggerRef.current?.();
-          try {
-            onCellChangeRef.current?.(row, accessor, next);
-          } catch (err) {
-            console.error('onCellChange error', err);
-          }
-        },
-        style: {
-          border: "1px solid var(--border-light, #ccc)",
-          padding: "2px 4px"
-        }
-      });
+      return /*#__PURE__*/React.createElement("span", {
+        title: translate("noData")
+      }, "...");
     }
 
     // If column has dateFormat, format value as date/time
@@ -10396,7 +10396,7 @@ function TableInner({
     }
     // existing highlight logic for other fields
     return highlight(String(v));
-  }, [highlight, isGrouped, triggerCellCallback]);
+  }, [highlight, isGrouped, triggerCellCallback, translate]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");
   // show delete only when view is also shown (per request)