trotl-table 1.0.48 → 1.0.50

package/dist/Table.cjs.js

@@ -10389,6 +10389,15 @@ function TableInner({
     key,
     style
   }) => {
+    // override virtualization's fixed width so that flex-based cells can
+    // expand/contract with the header. without this the header adjusts but
+    // rows keep the original pixel width from the first render, leading to
+    // the mismatched behaviour described by the user.
+    const fullStyle = {
+      ...style,
+      width: "100%",
+      boxSizing: "border-box"
+    };
     const item = tableDataFlat[index];
     if (!item) return null;
     if (item.type === "group") {
@@ -10421,7 +10430,7 @@ function TableInner({
             ref: ref,
             key: key,
             style: {
-              ...style,
+              ...fullStyle,
               background: '#f6f6fa',
               border: '2px dashed #bbb',
               textAlign: 'center',
@@ -10471,7 +10480,7 @@ function TableInner({
       // Default: normal group header
       return /*#__PURE__*/React.createElement("div", {
         key: key,
-        style: style,
+        style: fullStyle,
         className: "table-row group-row",
         onClick: () => toggleGroup(gid)
       }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
@@ -10532,14 +10541,15 @@ function TableInner({
     };
     const content = /*#__PURE__*/React.createElement("div", {
       key: key,
-      style: style,
+      style: fullStyle,
       className: "table-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "row-main",
       onDoubleClick: doubleClickEnable ? handleRowDoubleClick : undefined,
       style: {
         display: 'flex',
-        flex: 1
+        flex: '1 1 0%',
+        minWidth: 0
       }
     }, enableMultiSelect && showDelete && /*#__PURE__*/React.createElement("div", {
       className: "table-cell checkbox-cell"
@@ -10687,8 +10697,9 @@ function TableInner({
       position: "sticky",
       top: 0,
       zIndex: 10,
-      background: "#fff",
-      paddingRight: headerPadRight || undefined
+      background: "var(--table-bg)",
+      boxSizing: "border-box",
+      paddingRight: undefined
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "table-row header-row"
@@ -10738,7 +10749,17 @@ function TableInner({
     title: translate("action")
   }, showIcons ? /*#__PURE__*/React.createElement("span", {
     title: translate("action")
-  }, "\u2699\uFE0F") : translate("action")))), /*#__PURE__*/React.createElement("div", {
+  }, "\u2699\uFE0F") : translate("action")), headerPadRight > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "table-cell header-scroll-spacer",
+    style: {
+      flex: `0 0 ${headerPadRight}px`,
+      minWidth: headerPadRight,
+      maxWidth: headerPadRight,
+      padding: 0,
+      border: "none",
+      background: "var(--table-bg)"
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "main-table",
     ref: listRef
   }, tableDataFlat.length === 0 ? /*#__PURE__*/React.createElement(DotsLoading.default, null) : /*#__PURE__*/React.createElement(AutoSizer, null, ({