trotl-table 1.0.70 → 1.0.72

package/dist/Table.cjs.js

@@ -9787,6 +9787,82 @@ function TableInner({
 
   // Local selection & sorting state (removed TableContext dependency)
   const [selectedRows, setSelectedRows] = React.useState(() => resolvedInitialSelectedRows);
+  const [columnWidths, setColumnWidths] = React.useState(() => ({}));
+  const columnResizeRef = React.useRef(null);
+  const getColumnKey = React.useCallback((col, index) => {
+    if (col?.key != null) return `col-${String(col.key)}`;
+    if (col?.accessor != null && (typeof col.accessor === "string" || typeof col.accessor === "number")) {
+      return `col-${String(col.accessor)}`;
+    }
+    return `col-${index}`;
+  }, []);
+  const getCellStyle = React.useCallback((col, index) => {
+    const key = getColumnKey(col, index);
+    const width = columnWidths[key] ?? col?.style?.width;
+    const baseStyle = col?.style ? {
+      ...col.style
+    } : {};
+    if (width) {
+      return {
+        ...baseStyle,
+        flex: "0 0 auto",
+        width,
+        minWidth: width,
+        maxWidth: width
+      };
+    }
+    return {
+      ...baseStyle,
+      flex: "1 1 0%"
+    };
+  }, [columnWidths, getColumnKey]);
+  const updateColumnWidth = React.useCallback((key, nextWidth) => {
+    setColumnWidths(prev => ({
+      ...prev,
+      [key]: `${Math.max(60, Math.round(nextWidth))}px`
+    }));
+  }, []);
+  const handleDocumentMouseMove = React.useCallback(event => {
+    const state = columnResizeRef.current;
+    if (!state) return;
+    const delta = event.clientX - state.startX;
+    updateColumnWidth(state.key, state.startWidth + delta);
+  }, [updateColumnWidth]);
+  const stopColumnResize = React.useCallback(() => {
+    if (!columnResizeRef.current) return;
+    columnResizeRef.current = null;
+    document.removeEventListener("mousemove", handleDocumentMouseMove);
+    document.removeEventListener("mouseup", stopColumnResize);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, [handleDocumentMouseMove]);
+  const startColumnResize = React.useCallback((event, col, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const key = getColumnKey(col, index);
+    const headerCell = event.currentTarget.parentElement;
+    const startWidth = headerCell?.getBoundingClientRect().width || 120;
+    columnResizeRef.current = {
+      key,
+      startX: event.clientX,
+      startWidth
+    };
+    document.addEventListener("mousemove", handleDocumentMouseMove);
+    document.addEventListener("mouseup", stopColumnResize);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+  }, [getColumnKey, handleDocumentMouseMove, stopColumnResize]);
+  React.useEffect(() => {
+    return () => {
+      if (columnResizeRef.current) {
+        document.removeEventListener("mousemove", handleDocumentMouseMove);
+        document.removeEventListener("mouseup", stopColumnResize);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        columnResizeRef.current = null;
+      }
+    };
+  }, [handleDocumentMouseMove, stopColumnResize]);
   const [sorting, setSorting] = React.useState(null);
 
   // Initialize localData early so it's available for the sync effect below
@@ -9965,6 +10041,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 +10140,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 +10584,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 +10638,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)
@@ -10887,15 +10988,7 @@ function TableInner({
     }, visualIndex), allColumns.map((col, i) => {
       const resolvedAccessor = getAccessorKey(row, col.accessor);
       const cellValue = getAccessorValue(row, col.accessor);
-      let cellStyle = col.style ? {
-        ...col.style
-      } : undefined;
-      if (col.style && col.style.width) {
-        cellStyle = cellStyle || {};
-        cellStyle.minWidth = col.style.width;
-        cellStyle.maxWidth = col.style.width;
-        cellStyle.width = col.style.width;
-      }
+      const cellStyle = getCellStyle(col, i);
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: "table-cell",
@@ -10975,7 +11068,7 @@ function TableInner({
       }, content);
     }
     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]);
+  }, [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]);
   const rightClickActions = Array.isArray(enableMouseRightClick) ? enableMouseRightClick : [];
   const [hoveredActionIndex, setHoveredActionIndex] = React.useState(null);
   const rowHeightGetter = ({
@@ -11056,27 +11149,20 @@ function TableInner({
       maxWidth: keyWidth
     } : undefined
   }, "#"), allColumns.map((col, i) => {
-    let cellStyle = col.style ? {
-      ...col.style,
-      cursor: col.isCustom ? undefined : "pointer"
-    } : {
-      cursor: col.isCustom ? undefined : "pointer"
-    };
-    if (col.style && col.style.width) {
-      cellStyle.minWidth = col.style.width;
-      cellStyle.maxWidth = col.style.width;
-      cellStyle.width = col.style.width;
-    }
+    const cellStyle = getCellStyle(col, i);
     const translatedHeader = typeof col.header === "string" ? translate(col.header) : col.header;
-    // Keep tooltip text in sync with rendered header when it's a string.
     const headerTitle = typeof translatedHeader === "string" ? translatedHeader : undefined;
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: "table-cell",
+      className: "table-cell header-cell",
       style: cellStyle,
       title: headerTitle,
       onClick: col.isCustom ? undefined : () => setSort(col.accessor)
-    }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && isSameAccessor(sorting?.column, col.accessor) && (sorting.direction === "asc" ? " ↑" : " ↓"));
+    }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && isSameAccessor(sorting?.column, col.accessor) && (sorting.direction === "asc" ? " ↑" : " ↓"), /*#__PURE__*/React.createElement("div", {
+      className: "column-resizer",
+      onMouseDown: event => startColumnResize(event, col, i),
+      onClick: event => event.stopPropagation()
+    }));
   }), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell",
     style: actionColumnStyle,