trotl-table 1.0.63 → 1.0.65

package/dist/Table.cjs.js

@@ -9701,6 +9701,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;
@@ -9851,6 +9852,35 @@ function TableInner({
       return null;
     });
   };
+  const getAccessorValue = React.useCallback((row, accessor) => {
+    if (!row || accessor == null) return undefined;
+
+    // Support fallback accessors: ["preverjen", "Preverjen", ...]
+    if (Array.isArray(accessor)) {
+      for (const key of accessor) {
+        if (row?.[key] !== undefined) return row[key];
+      }
+      return undefined;
+    }
+    return row?.[accessor];
+  }, []);
+  const getAccessorKey = React.useCallback((row, accessor) => {
+    if (accessor == null) return accessor;
+    if (Array.isArray(accessor)) {
+      for (const key of accessor) {
+        if (row?.[key] !== undefined) return key;
+      }
+      return accessor[0];
+    }
+    return accessor;
+  }, []);
+  const isSameAccessor = React.useCallback((a, b) => {
+    if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      return a.every((item, idx) => item === b[idx]);
+    }
+    return a === b;
+  }, []);
 
   // console.log(extraSearchTerm)
 
@@ -9936,11 +9966,11 @@ function TableInner({
     if (!searchTerm) return dateFiltered;
     const query = searchTerm.toLowerCase();
     return dateFiltered.filter(row => columns.some(col => {
-      const val = row[col.accessor];
+      const val = getAccessorValue(row, col.accessor);
       if (val == null) return false;
       return String(val).toLowerCase().includes(query);
     }));
-  }, [searchTerm, columns, urlSearchString]);
+  }, [searchTerm, columns, urlSearchString, getAccessorValue]);
 
   // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
   const compare = (x, y, dir = "asc") => {
@@ -10005,14 +10035,14 @@ function TableInner({
     const sortRows = rows => {
       const arr = [...rows];
       if (!sortKey) return filterRows(arr); // fallback to drag order
-      arr.sort((a, b) => compare(a?.[sortKey], b?.[sortKey], direction));
+      arr.sort((a, b) => compare(getAccessorValue(a, sortKey), getAccessorValue(b, sortKey), direction));
       return filterRows(arr);
     };
     return normalizedGroups.map(g => ({
       ...g,
       rows: sortRows(g.rows || [])
     }));
-  }, [normalizedGroups, sorting, filterRows]);
+  }, [normalizedGroups, sorting, filterRows, getAccessorValue]);
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const toggleGroup = gid => {
     setExpandedGroups(prev => ({
@@ -10185,18 +10215,19 @@ function TableInner({
   }, [searchTerm]);
   const triggerCellCallback = React.useCallback((row, col, explicitValue) => {
     const accessor = col?.accessor ?? null;
-    const value = explicitValue !== undefined ? explicitValue : accessor != null ? row?.[accessor] : undefined;
+    const resolvedAccessor = getAccessorKey(row, accessor);
+    const value = explicitValue !== undefined ? explicitValue : getAccessorValue(row, accessor);
     const type = col?.type ?? (col?.isCustom ? "custom" : "text");
     try {
       const callback = cellCallbackRef.current;
       if (typeof callback !== "function") return;
       if (callback.length >= 2) {
-        callback(row, accessor, value, col);
+        callback(row, resolvedAccessor, value, col);
         return;
       }
       callback({
         type,
-        accessor,
+        accessor: resolvedAccessor,
         value,
         row,
         column: col
@@ -10204,14 +10235,17 @@ function TableInner({
     } catch (err) {
       console.error("cellCallback error", err);
     }
-  }, []);
+  }, [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);
@@ -10247,6 +10281,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);
@@ -10282,11 +10317,13 @@ function TableInner({
 
     // Input column type (editable text)
     if (col && col.type === 'input') {
-      const text = v == null ? "" : String(v);
+      const text = isNoData ? "" : v == null ? "" : String(v);
       return /*#__PURE__*/React.createElement("input", {
         type: "text",
         className: "table-cell-input",
         value: text,
+        placeholder: isNoData ? "..." : undefined,
+        title: isNoData ? translate("noData") : text,
         onClick: e => {
           e.stopPropagation();
           triggerCellCallback(row, col, text);
@@ -10321,6 +10358,11 @@ function TableInner({
         }
       });
     }
+    if (isNoData) {
+      return /*#__PURE__*/React.createElement("span", {
+        title: translate("noData")
+      }, "...");
+    }
 
     // If column has dateFormat, format value as date/time
     if (col && col.dateFormat && v) {
@@ -10366,7 +10408,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)
@@ -10703,6 +10745,8 @@ function TableInner({
         maxWidth: keyWidth
       } : undefined
     }, visualIndex), allColumns.map((col, i) => {
+      const resolvedAccessor = getAccessorKey(row, col.accessor);
+      const cellValue = getAccessorValue(row, col.accessor);
       let cellStyle = col.style ? {
         ...col.style
       } : undefined;
@@ -10717,7 +10761,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(row[col.accessor], col.accessor, 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
@@ -10791,7 +10835,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, triggerCellCallback]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, triggerCellCallback, getAccessorKey, getAccessorValue]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -10890,7 +10934,7 @@ function TableInner({
       style: cellStyle,
       title: headerTitle,
       onClick: col.isCustom ? undefined : () => setSort(col.accessor)
-    }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
+    }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && isSameAccessor(sorting?.column, col.accessor) && (sorting.direction === "asc" ? " ↑" : " ↓"));
   }), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell",
     style: actionColumnStyle,