trotl-table 1.0.59 → 1.0.61

package/dist/Table.cjs.js

@@ -10340,6 +10340,22 @@ function TableInner({
   const showDuplicate = buttons.includes("duplicate") || buttons.includes("duplicates");
   const showDownload = buttons.includes("download");
   const showActions = showView || showEdit || showDelete || showShare || showDuplicate || showDownload;
+  const visibleActionCount = [showView, showEdit, showDuplicate, showDelete, showShare, showDownload].filter(Boolean).length;
+  const actionColumnStyle = React.useMemo(() => {
+    if (!showActions) return undefined;
+    const gap = 4;
+    const horizontalPadding = 8;
+    const iconButtonWidth = 30;
+    const textButtonWidth = 84;
+    const buttonWidth = showIcons ? iconButtonWidth : textButtonWidth;
+    const width = visibleActionCount > 0 ? visibleActionCount * buttonWidth + Math.max(visibleActionCount - 1, 0) * gap + horizontalPadding : 0;
+    return {
+      flex: `0 0 ${width}px`,
+      width: `${width}px`,
+      minWidth: `${width}px`,
+      maxWidth: `${width}px`
+    };
+  }, [showActions, showIcons, visibleActionCount]);
 
   // MOVE ROW (internal + between groups)
   // moveRow: allow toIndex to be null or an object { emptyGroupId } for empty group drop
@@ -10431,7 +10447,7 @@ function TableInner({
   }, [tableDataFlat, isGrouped, groupKey]);
 
   // DUPLICATE
-  const doDuplicate = React.useCallback(row => {
+  React.useCallback(row => {
     if (!row) return;
     // try user callback first; if it returns an object with newRow use that
     let newRow = null;
@@ -10554,7 +10570,8 @@ function TableInner({
             key: i,
             className: "table-cell"
           })), showActions && /*#__PURE__*/React.createElement("div", {
-            className: "table-cell action-cell"
+            className: "table-cell action-cell",
+            style: actionColumnStyle
           }));
         };
         return /*#__PURE__*/React.createElement(GroupHeaderDrop, null);
@@ -10593,7 +10610,8 @@ function TableInner({
         key: i,
         className: "table-cell"
       })), showActions && /*#__PURE__*/React.createElement("div", {
-        className: "table-cell action-cell"
+        className: "table-cell action-cell",
+        style: actionColumnStyle
       }));
     }
     const row = item.row;
@@ -10663,7 +10681,8 @@ function TableInner({
         style: cellStyle
       }, col.isCustom ? typeof col.render === 'function' ? col.render(row, i) : col.render : renderCell(row[col.accessor], col.accessor, row, col));
     })), showActions && /*#__PURE__*/React.createElement("div", {
-      className: "table-cell action-cell"
+      className: "table-cell action-cell",
+      style: actionColumnStyle
     }, showView && /*#__PURE__*/React.createElement("button", {
       className: "action-btn-table",
       onClick: () => viewCallbackRef.current(row),
@@ -10734,7 +10753,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, doDelete, doDuplicate, keyWidth, showDuplicate, showIcons, showShare]);
+  }, [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]);
   const rowHeightGetter = ({
     index
   }) => tableDataFlat[index]?.type === "group" ? groupHeaderHeight : rowHeight;
@@ -10824,17 +10843,19 @@ function TableInner({
       cellStyle.maxWidth = col.style.width;
       cellStyle.width = col.style.width;
     }
-    // determine header title text for tooltip; custom columns may also have string headers
-    const headerTitle = typeof col.header === 'string' ? col.header : undefined;
+    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",
       style: cellStyle,
       title: headerTitle,
       onClick: col.isCustom ? undefined : () => setSort(col.accessor)
-    }, col.isCustom ? col.header ?? '' : col.header, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
+    }, col.isCustom ? translatedHeader ?? "" : translatedHeader, !col.isCustom && sorting?.column === col.accessor && (sorting.direction === "asc" ? " ↑" : " ↓"));
   }), showActions && /*#__PURE__*/React.createElement("div", {
     className: "table-cell action-cell",
+    style: actionColumnStyle,
     title: translate("action")
   }, showIcons ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")