trotl-table 1.0.71 → 1.0.73

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
@@ -10337,11 +10413,12 @@ function TableInner({
     }
   }, [getAccessorKey, getAccessorValue]);
   const renderCell = React.useCallback((v, accessor, row, col) => {
-    const isNoData = v === undefined;
+    const isUndefinedLike = v === undefined || typeof v === "string" && v.trim().toLowerCase() === "undefined";
+    const isNoData = isUndefinedLike;
 
     // Checkbox column type (editable in-table)
     if (col && col.type === 'checkbox') {
-      const checked = !!v;
+      const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
         checked: checked,
@@ -10379,7 +10456,7 @@ function TableInner({
 
     // Switch column type (uses internal Switch component)
     if (col && col.type === 'switch') {
-      const checked = !!v;
+      const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("div", {
         title: isNoData ? translate("noData") : undefined,
         onClick: e => {
@@ -10417,8 +10494,8 @@ function TableInner({
 
     // Color column type (display color swatch background)
     if (col && col.type === 'color') {
-      const colorVal = v || "transparent";
-      const text = String(colorVal) ;
+      const colorVal = isUndefinedLike ? "transparent" : v || "transparent";
+      const text = isUndefinedLike ? "..." : String(colorVal) ;
       return /*#__PURE__*/React.createElement("div", {
         style: {
           width: '100%',
@@ -10560,6 +10637,23 @@ function TableInner({
         minute: "2-digit"
       }) : "-";
     }
+    if (isUndefinedLike) {
+      return /*#__PURE__*/React.createElement("span", {
+        title: translate("noData")
+      }, "...");
+    }
+    if (typeof v === "boolean") {
+      return /*#__PURE__*/React.createElement("span", {
+        title: String(v),
+        style: {
+          color: v ? "#1a7f37" : "#b42318",
+          fontWeight: 700,
+          display: "inline-block",
+          minWidth: "1ch",
+          textAlign: "center"
+        }
+      }, v ? "✓" : "✗");
+    }
     // existing highlight logic for other fields
     return highlight(String(v));
   }, [highlight, isGrouped, triggerCellCallback, translate, formatArrayValue]);
@@ -10912,15 +11006,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",
@@ -11000,7 +11086,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 = ({
@@ -11081,27 +11167,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,