trotl-table 1.0.70 → 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)