trotl-table 1.0.69 → 1.0.71

package/dist/Table.cjs.js

@@ -9965,6 +9965,19 @@ function TableInner({
     }
     return a === b;
   }, []);
+  const formatArrayValue = React.useCallback((value, col) => {
+    if (!Array.isArray(value)) return value;
+    const objectKey = col?.objectKey;
+    const parts = value.map(item => {
+      if (item == null) return "";
+      if (typeof item !== "object") return String(item);
+      if (objectKey && item?.[objectKey] !== undefined) return String(item[objectKey]);
+      if (item.label !== undefined) return String(item.label);
+      if (item.value !== undefined) return String(item.value);
+      return JSON.stringify(item);
+    }).filter(item => item !== "");
+    return parts.join(", ");
+  }, []);
 
   // console.log(extraSearchTerm)
 
@@ -10051,13 +10064,16 @@ function TableInner({
     const query = searchTerm.toLowerCase();
     return dateFiltered.filter(row => columns.some(col => {
       const val = getAccessorValue(row, col.accessor);
-      if (val == null) return false;
-      return String(val).toLowerCase().includes(query);
+      const normalized = Array.isArray(val) ? formatArrayValue(val, col) : val;
+      if (normalized == null) return false;
+      return String(normalized).toLowerCase().includes(query);
     }));
-  }, [searchTerm, columns, urlSearchString, getAccessorValue]);
+  }, [searchTerm, columns, urlSearchString, getAccessorValue, formatArrayValue]);
 
   // Natural-ish comparator: handles nulls, numbers, strings, ISO dates
   const compare = (x, y, dir = "asc") => {
+    if (Array.isArray(x)) x = formatArrayValue(x);
+    if (Array.isArray(y)) y = formatArrayValue(y);
     const nullCmp = () => {
       if (x == null && y == null) return 0;
       if (x == null) return 1; // nulls last
@@ -10492,6 +10508,15 @@ function TableInner({
         title: formatted
       }, formatted);
     }
+    if (col && col.type === 'array') {
+      const arr = Array.isArray(v) ? v : [];
+      const list = formatArrayValue(arr, col);
+      const count = arr.length;
+      const display = count > 0 ? `${count}: ${list}` : "...";
+      return /*#__PURE__*/React.createElement("span", {
+        title: list || translate("noData")
+      }, display);
+    }
 
     // If column has dateFormat, format value as date/time
     if (col && col.dateFormat && v) {
@@ -10537,7 +10562,7 @@ function TableInner({
     }
     // existing highlight logic for other fields
     return highlight(String(v));
-  }, [highlight, isGrouped, triggerCellCallback, translate]);
+  }, [highlight, isGrouped, triggerCellCallback, translate, formatArrayValue]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");
   // show delete only when view is also shown (per request)
@@ -10977,6 +11002,7 @@ function TableInner({
     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, getAccessorKey, getAccessorValue]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
+  const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -11124,8 +11150,12 @@ function TableInner({
     style: {
       padding: '8px 12px',
       cursor: 'pointer',
-      borderBottom: i < rightClickActions.length - 1 ? '1px solid #eee' : 'none'
+      borderBottom: i < rightClickActions.length - 1 ? '1px solid #eee' : 'none',
+      backgroundColor: hoveredActionIndex === i ? '#f5f5f5' : '#fff',
+      color: hoveredActionIndex === i ? '#000' : '#333'
     },
+    onMouseEnter: () => setHoveredActionIndex(i),
+    onMouseLeave: () => setHoveredActionIndex(null),
     onClick: () => performContextMenuAction(action, contextMenu.row)
   }, action.label || action.text || `Action ${i + 1}`))) : null;
   const contextMenuModalMarkup = contextMenuModal.visible && contextMenuModal.component ? /*#__PURE__*/React.createElement(Modal.default, {