chore: only add when sticky (#1251)

Author: zombieJ

src/Table.tsx

@@ -762,6 +762,15 @@ function Table<RecordType extends DefaultRecordType>(
     );
   }
 
+  const tableStyle = {
+    ...style,
+  };
+
+  // Add css var for sticky header `zIndex` calc
+  if (isSticky) {
+    tableStyle['--columns-count'] = flattenColumns.length;
+  }
+
   let fullTable = (
     <div
       className={classNames(prefixCls, className, {
@@ -778,12 +787,7 @@ function Table<RecordType extends DefaultRecordType>(
         [`${prefixCls}-has-fix-start`]: flattenColumns[0]?.fixed,
         [`${prefixCls}-has-fix-end`]: flattenColumns[flattenColumns.length - 1]?.fixed === 'end',
       })}
-      style={
-        {
-          ...style,
-          '--columns-count': flattenColumns.length,
-        } as React.CSSProperties
-      }
+      style={tableStyle}
       id={id}
       ref={fullTableRef}
       {...dataProps}

tests/__snapshots__/ExpandRow.spec.jsx.snap

@@ -3,7 +3,6 @@
 exports[`Table.Expand > childrenColumnName 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -109,7 +108,6 @@ exports[`Table.Expand > childrenColumnName 1`] = `
 exports[`Table.Expand > does not crash if scroll is not set 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
-  style="--columns-count: 3;"
 >
   <div
     class="rc-table-container"
@@ -232,7 +230,6 @@ exports[`Table.Expand > does not crash if scroll is not set 1`] = `
 exports[`Table.Expand > does not crash if scroll is not set 2`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
-  style="--columns-count: 3;"
 >
   <div
     class="rc-table-container"
@@ -355,7 +352,6 @@ exports[`Table.Expand > does not crash if scroll is not set 2`] = `
 exports[`Table.Expand > not use nest when children is invalidate 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -443,7 +439,6 @@ exports[`Table.Expand > not use nest when children is invalidate 1`] = `
 exports[`Table.Expand > renders fixed column correctly > work 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 4;"
 >
   <div
     class="rc-table-container"
@@ -639,7 +634,6 @@ exports[`Table.Expand > renders fixed column correctly > work 1`] = `
 exports[`Table.Expand > renders tree row correctly 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -745,7 +739,6 @@ exports[`Table.Expand > renders tree row correctly 1`] = `
 exports[`Table.Expand > renders tree row correctly with different children 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -914,7 +907,6 @@ exports[`Table.Expand > renders tree row correctly with different children 1`] =
 exports[`Table.Expand > work in expandable fix 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-scroll-horizontal"
-  style="--columns-count: 3;"
 >
   <div
     class="rc-table-container"
@@ -1037,7 +1029,6 @@ exports[`Table.Expand > work in expandable fix 1`] = `
 exports[`Table.Expand > work in expandable fix 2`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal"
-  style="--columns-count: 4;"
 >
   <div
     class="rc-table-container"

tests/__snapshots__/FixedColumn.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = `
 <div
   class="rc-table rc-table-rtl rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 12;"
 >
   <div
     class="rc-table-container"
@@ -795,7 +794,6 @@ exports[`Table.FixedColumn > renders correctly > all column has width should use
 exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 12;"
 >
   <div
     class="rc-table-container"
@@ -1585,7 +1583,6 @@ exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = `
 exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 12;"
 >
   <div
     class="rc-table-container"
@@ -1845,7 +1842,6 @@ exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = `
 exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 12;"
 >
   <div
     class="rc-table-container"
@@ -2689,7 +2685,6 @@ exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = `
 exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 12;"
 >
   <div
     class="rc-table-container"

tests/__snapshots__/Table.spec.jsx.snap

@@ -11,7 +11,6 @@ exports[`Table.Basic > columns support JSX condition 1`] = `
 exports[`Table.Basic > custom components > renders correctly 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 1;"
 >
   <div
     class="rc-table-container"
@@ -78,7 +77,6 @@ exports[`Table.Basic > custom components > renders correctly 1`] = `
 exports[`Table.Basic > custom components > renders fixed column and header correctly 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-fixed-column rc-table-scroll-horizontal rc-table-has-fix-start rc-table-has-fix-end"
-  style="--columns-count: 3;"
 >
   <div
     class="rc-table-container"
@@ -212,7 +210,6 @@ exports[`Table.Basic > custom components > renders fixed column and header corre
 exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
 <div
   class="rc-table rc-table-fix-start-shadow rc-table-fix-end-shadow rc-table-fixed-header rc-table-scroll-horizontal"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -262,7 +259,6 @@ exports[`Table.Basic > custom components > scroll content > with scroll 1`] = `
 exports[`Table.Basic > internal api > transformColumns > basic 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 3;"
 >
   <div
     class="rc-table-container"
@@ -343,7 +339,6 @@ exports[`Table.Basic > internal api > transformColumns > basic 1`] = `
 exports[`Table.Basic > renders colSpan correctly 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -407,7 +402,6 @@ exports[`Table.Basic > renders colSpan correctly 1`] = `
 exports[`Table.Basic > renders correctly > RTL 1`] = `
 <div
   class="test-prefix test-class-name test-prefix-rtl"
-  style="--columns-count: 1;"
 >
   <div
     class="test-prefix-container"
@@ -464,7 +458,6 @@ exports[`Table.Basic > renders correctly > RTL 1`] = `
 exports[`Table.Basic > renders correctly > basic 1`] = `
 <div
   class="test-prefix test-class-name"
-  style="--columns-count: 1;"
 >
   <div
     class="test-prefix-container"
@@ -521,7 +514,6 @@ exports[`Table.Basic > renders correctly > basic 1`] = `
 exports[`Table.Basic > renders correctly > column children undefined 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -590,7 +582,6 @@ exports[`Table.Basic > renders correctly > column children undefined 1`] = `
 exports[`Table.Basic > renders correctly > falsy columns 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 1;"
 >
   <div
     class="rc-table-container"
@@ -647,7 +638,6 @@ exports[`Table.Basic > renders correctly > falsy columns 1`] = `
 exports[`Table.Basic > renders correctly > no columns 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 1;"
 >
   <div
     class="rc-table-container"
@@ -697,7 +687,6 @@ exports[`Table.Basic > renders correctly > no columns 1`] = `
 exports[`Table.Basic > renders rowSpan correctly 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -766,7 +755,6 @@ exports[`Table.Basic > renders rowSpan correctly 1`] = `
 exports[`Table.Basic > should get scrollbar size 1`] = `
 <div
   class="rc-table rc-table-fixed-header"
-  style="--columns-count: 1;"
 >
   <div
     class="rc-table-container"
@@ -810,7 +798,6 @@ exports[`Table.Basic > should get scrollbar size 1`] = `
 exports[`Table.Basic > syntactic sugar 1`] = `
 <div
   class="rc-table"
-  style="--columns-count: 1;"
 >
   <div
     class="rc-table-container"