trotl-table 1.0.79 → 1.0.80

package/dist/Table.cjs.js

@@ -9638,6 +9638,7 @@ function TableInner({
   tableId = "default",
   columns = [],
   data = [],
+  highlightRow = null,
   isGrouped = false,
   groupKey = "groupId",
   routePath = null,
@@ -9818,6 +9819,117 @@ function TableInner({
       flex: "1 1 0%"
     };
   }, [columnWidths, getColumnKey]);
+  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 normalizeHighlightComparable = React.useCallback((value, compareTo) => {
+    if (value instanceof Date || compareTo instanceof Date) {
+      const leftTime = value == null ? NaN : new Date(value).getTime();
+      const rightTime = compareTo == null ? NaN : new Date(compareTo).getTime();
+      return {
+        left: leftTime,
+        right: rightTime,
+        valid: !Number.isNaN(leftTime) && !Number.isNaN(rightTime)
+      };
+    }
+    return {
+      left: value,
+      right: compareTo,
+      valid: true
+    };
+  }, []);
+  const getHighlightRowStyle = React.useCallback(row => {
+    if (!highlightRow || !row) return null;
+    const currentDate = new Date();
+    if (typeof highlightRow === "function") {
+      const result = highlightRow({
+        row,
+        currentDate,
+        getValue: accessor => getAccessorValue(row, accessor)
+      });
+      if (result === true) return {};
+      if (result && typeof result === "object") {
+        return result.style && typeof result.style === "object" ? result.style : result;
+      }
+      return null;
+    }
+    const {
+      accessor,
+      predicate,
+      condition,
+      function: highlightFn,
+      operator = "eq",
+      compareTo,
+      style
+    } = highlightRow;
+    const cellValue = accessor ? getAccessorValue(row, accessor) : row;
+    let shouldHighlight = false;
+    if (typeof predicate === "function") {
+      shouldHighlight = !!predicate(cellValue, row, currentDate);
+    } else if (typeof condition === "function") {
+      shouldHighlight = !!condition(cellValue, row, currentDate);
+    } else if (typeof highlightFn === "function") {
+      shouldHighlight = !!highlightFn(cellValue, row, currentDate);
+    } else if (compareTo !== undefined) {
+      const resolvedCompareTo = compareTo === "currentDate" ? currentDate : compareTo;
+      const normalized = normalizeHighlightComparable(cellValue, resolvedCompareTo);
+      if (normalized && normalized.valid) {
+        const {
+          left,
+          right
+        } = normalized;
+        switch (operator) {
+          case "<":
+          case "lt":
+            shouldHighlight = left < right;
+            break;
+          case "<=":
+          case "lte":
+            shouldHighlight = left <= right;
+            break;
+          case ">":
+          case "gt":
+            shouldHighlight = left > right;
+            break;
+          case ">=":
+          case "gte":
+            shouldHighlight = left >= right;
+            break;
+          case "!=":
+          case "!==":
+          case "ne":
+            shouldHighlight = left !== right;
+            break;
+          case "==":
+          case "===":
+          case "eq":
+          default:
+            shouldHighlight = left === right;
+            break;
+        }
+      }
+    }
+    return shouldHighlight ? style || {} : null;
+  }, [getAccessorValue, highlightRow, normalizeHighlightComparable]);
   const updateColumnWidth = React.useCallback((key, nextWidth) => {
     setColumnWidths(prev => ({
       ...prev,
@@ -10014,28 +10126,6 @@ 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;
@@ -10950,6 +11040,7 @@ function TableInner({
     }
     const row = item.row;
     const visualIndex = tableDataFlat.slice(0, index).filter(i => i.type === "row").length + 1;
+    const highlightRowStyle = getHighlightRowStyle(row);
 
     // Compose columns + custom columns
     const allColumns = [...columns];
@@ -10975,7 +11066,10 @@ function TableInner({
     };
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
-      style: style,
+      style: highlightRowStyle ? {
+        ...style,
+        ...highlightRowStyle
+      } : style,
       className: "table-row",
       onContextMenu: e => {
         if (!Array.isArray(enableMouseRightClick) || enableMouseRightClick.length === 0) return;
@@ -11093,7 +11187,7 @@ function TableInner({
       }, content);
     }
     return content;
-  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, getCellStyle, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, triggerCellCallback, getAccessorKey, getAccessorValue]);
+  }, [tableDataFlat, columns, selectedRows, toggleRowSelection, groupRowsById, renderCell, getCellStyle, showActions, showDelete, showEdit, showKey, showView, translate, enableDragRow, moveRow, enableMultiSelect, rowHeight, tableId, customColumns, doubleClickEnable, keyWidth, actionColumnStyle, showDuplicate, showDownload, showIcons, showShare, getHighlightRowStyle, triggerCellCallback, getAccessorKey, getAccessorValue]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({