trotl-table 1.0.78 → 1.0.80

package/dist/Table.esm.js

@@ -9616,6 +9616,7 @@ function TableInner({
   tableId = "default",
   columns = [],
   data = [],
+  highlightRow = null,
   isGrouped = false,
   groupKey = "groupId",
   routePath = null,
@@ -9655,6 +9656,7 @@ function TableInner({
   customColumns = [],
   groupDefaultOpen = false,
   showIcons = true,
+  timeoutLoading = 5,
   t
 }) {
   let translate;
@@ -9795,6 +9797,117 @@ function TableInner({
       flex: "1 1 0%"
     };
   }, [columnWidths, getColumnKey]);
+  const getAccessorValue = 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 = 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 = 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 = 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 = useCallback((key, nextWidth) => {
     setColumnWidths(prev => ({
       ...prev,
@@ -9991,28 +10104,6 @@ function TableInner({
       return null;
     });
   };
-  const getAccessorValue = 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 = 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 = useCallback((a, b) => {
     if (Array.isArray(a) && Array.isArray(b)) {
       if (a.length !== b.length) return false;
@@ -10227,6 +10318,20 @@ function TableInner({
     return map;
   }, [sortedGroupedData, groupKey]);
   const [tableDataFlat, setTableDataFlat] = useState([]);
+  const [loadingTimeoutReached, setLoadingTimeoutReached] = useState(false);
+  useEffect(() => {
+    if (tableDataFlat.length > 0) {
+      setLoadingTimeoutReached(false);
+      return undefined;
+    }
+    const timeoutSeconds = Number(timeoutLoading) && Number(timeoutLoading) >= 0 ? Number(timeoutLoading) : 5;
+    const timerId = window.setTimeout(() => {
+      setLoadingTimeoutReached(true);
+    }, timeoutSeconds * 1000);
+    return () => {
+      window.clearTimeout(timerId);
+    };
+  }, [tableDataFlat.length, timeoutLoading]);
   const flattened = useMemo(() => {
     const items = [];
     // Use the sortedGroupedData here so the flattened list reflects current sorting and filtering
@@ -10913,6 +11018,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];
@@ -10938,7 +11044,10 @@ function TableInner({
     };
     const content = /*#__PURE__*/React__default.createElement("div", {
       key: key,
-      style: style,
+      style: highlightRowStyle ? {
+        ...style,
+        ...highlightRowStyle
+      } : style,
       className: "table-row",
       onContextMenu: e => {
         if (!Array.isArray(enableMouseRightClick) || enableMouseRightClick.length === 0) return;
@@ -11056,7 +11165,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] = useState(null);
   const rowHeightGetter = ({
@@ -11160,7 +11269,14 @@ function TableInner({
   }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React__default.createElement("div", {
     className: "main-table",
     ref: listRef
-  }, tableDataFlat.length === 0 ? /*#__PURE__*/React__default.createElement(DotsLoading, null) : /*#__PURE__*/React__default.createElement(AutoSizer, null, ({
+  }, tableDataFlat.length === 0 && !loadingTimeoutReached ? /*#__PURE__*/React__default.createElement(DotsLoading, null) : tableDataFlat.length === 0 && loadingTimeoutReached ? /*#__PURE__*/React__default.createElement("div", {
+    className: "table-empty",
+    style: {
+      padding: 24,
+      textAlign: 'center',
+      color: '#666'
+    }
+  }, translate("noData")) : /*#__PURE__*/React__default.createElement(AutoSizer, null, ({
     height,
     width
   }) => /*#__PURE__*/React__default.createElement(List, {