trotl-table 1.0.63 → 1.0.64

package/dist/Table.cjs.js

@@ -9851,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)
 
@@ -9936,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") => {
@@ -10005,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 => ({
@@ -10185,18 +10214,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,7 +10234,7 @@ function TableInner({
     } 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') {
@@ -10703,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;
@@ -10717,7 +10749,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 +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, 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 +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,