trotl-table 1.0.79 → 1.0.81

package/dist/Table.cjs.js

@@ -9638,6 +9638,7 @@ function TableInner({
   tableId = "default",
   columns = [],
   data = [],
+  highlightRow = null,
   isGrouped = false,
   groupKey = "groupId",
   routePath = null,
@@ -9676,6 +9677,8 @@ function TableInner({
   enableMouseRightClick = null,
   customColumns = [],
   groupDefaultOpen = false,
+  groupExpanded = null,
+  onExpandedGroupsChange = () => {},
   showIcons = true,
   timeoutLoading = 5,
   t
@@ -9818,6 +9821,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 +10128,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;
@@ -10221,12 +10313,24 @@ function TableInner({
       rows: sortRows(g.rows || [])
     }));
   }, [normalizedGroups, sorting, filterRows, getAccessorValue]);
+  const emitExpandedChange = React.useCallback((nextState, toggledGroupId) => {
+    if (typeof onExpandedGroupsChange === "function") {
+      onExpandedGroupsChange(nextState, toggledGroupId);
+    }
+    if (typeof groupExpanded === "function") {
+      groupExpanded(nextState, toggledGroupId);
+    }
+  }, [onExpandedGroupsChange, groupExpanded]);
   const [expandedGroups, setExpandedGroups] = React.useState({});
   const toggleGroup = gid => {
-    setExpandedGroups(prev => ({
-      ...prev,
-      [gid]: !prev[gid]
-    }));
+    setExpandedGroups(prev => {
+      const next = {
+        ...prev,
+        [gid]: !prev[gid]
+      };
+      emitExpandedChange(next, gid);
+      return next;
+    });
   };
   React.useEffect(() => {
     // Pre-populate expansion state for all groups
@@ -10241,6 +10345,11 @@ function TableInner({
       return next;
     });
   }, [normalizedGroups, groupKey, groupDefaultOpen]);
+  React.useEffect(() => {
+    if (groupExpanded && typeof groupExpanded === "object") {
+      setExpandedGroups(groupExpanded);
+    }
+  }, [groupExpanded]);
   const groupRowsById = React.useMemo(() => {
     const map = {};
     for (const g of sortedGroupedData) {
@@ -10950,6 +11059,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 +11085,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 +11206,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 = ({