trotl-table 1.0.62 → 1.0.64

package/dist/Table.cjs.js

@@ -9657,6 +9657,8 @@ function TableInner({
   downloadCallback = () => {},
   // callback for cell edits: (row, accessor, newValue)
   onCellChange = () => {},
+  // callback for any cell click
+  cellCallback = () => {},
   // when true, skip the integrated confirmation modal and delete immediately
   disableDeleteModal = false,
   deleteLabelKey = "name",
@@ -9714,6 +9716,7 @@ function TableInner({
   const duplicateCallbackRef = React.useRef(duplicateCallback);
   const downloadCallbackRef = React.useRef(downloadCallback);
   const onCellChangeRef = React.useRef(onCellChange);
+  const cellCallbackRef = React.useRef(cellCallback);
 
   // Update refs when callbacks change (using useLayoutEffect to update before render)
   React.useLayoutEffect(() => {
@@ -9723,6 +9726,7 @@ function TableInner({
     editCallbackRef.current = editCallback;
     deleteCallbackRef.current = deleteCallback;
     onCellChangeRef.current = onCellChange;
+    cellCallbackRef.current = cellCallback;
   });
   React.useEffect(() => {
     shareCallbackRef.current = shareCallback;
@@ -9847,6 +9851,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)
 
@@ -9932,11 +9965,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") => {
@@ -10001,14 +10034,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 => ({
@@ -10179,6 +10212,29 @@ function TableInner({
       title: text
     }, text.slice(idx + query.length)));
   }, [searchTerm]);
+  const triggerCellCallback = React.useCallback((row, col, explicitValue) => {
+    const accessor = col?.accessor ?? null;
+    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, resolvedAccessor, value, col);
+        return;
+      }
+      callback({
+        type,
+        accessor: resolvedAccessor,
+        value,
+        row,
+        column: col
+      });
+    } catch (err) {
+      console.error("cellCallback error", err);
+    }
+  }, [getAccessorKey, getAccessorValue]);
   const renderCell = React.useCallback((v, accessor, row, col) => {
     // Checkbox column type (editable in-table)
     if (col && col.type === 'checkbox') {
@@ -10186,7 +10242,10 @@ function TableInner({
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
         checked: checked,
-        onClick: e => e.stopPropagation(),
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, checked);
+        },
         onChange: e => {
           const next = !!e.target.checked;
           setLocalData(prev => {
@@ -10218,7 +10277,10 @@ function TableInner({
     if (col && col.type === 'switch') {
       const checked = !!v;
       return /*#__PURE__*/React.createElement("div", {
-        onClick: e => e.stopPropagation()
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, checked);
+        }
       }, /*#__PURE__*/React.createElement(Switch.default, {
         checked: checked,
         onChange: valOrEvent => {
@@ -10255,7 +10317,10 @@ function TableInner({
         type: "text",
         className: "table-cell-input",
         value: text,
-        onClick: e => e.stopPropagation(),
+        onClick: e => {
+          e.stopPropagation();
+          triggerCellCallback(row, col, text);
+        },
         onChange: e => {
           const next = e.target.value;
           setLocalData(prev => {
@@ -10331,7 +10396,7 @@ function TableInner({
     }
     // existing highlight logic for other fields
     return highlight(String(v));
-  }, [highlight, isGrouped]);
+  }, [highlight, isGrouped, triggerCellCallback]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");
   // show delete only when view is also shown (per request)
@@ -10668,6 +10733,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;
@@ -10680,8 +10747,9 @@ function TableInner({
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell",
-        style: cellStyle
-      }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(row[col.accessor], col.accessor, row, col));
+        style: cellStyle,
+        onClick: () => triggerCellCallback(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
@@ -10755,7 +10823,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]);
+  }, [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;
@@ -10854,7 +10922,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,