chore: css var add columns count (#1250)

Author: zombieJ

src/Table.tsx

@@ -778,7 +778,12 @@ function Table<RecordType extends DefaultRecordType>(
         [`${prefixCls}-has-fix-start`]: flattenColumns[0]?.fixed,
         [`${prefixCls}-has-fix-end`]: flattenColumns[flattenColumns.length - 1]?.fixed === 'end',
       })}
-      style={style}
+      style={
+        {
+          ...style,
+          '--columns-count': flattenColumns.length,
+        } as React.CSSProperties
+      }
       id={id}
       ref={fullTableRef}
       {...dataProps}

tests/__snapshots__/ExpandRow.spec.jsx.snap

@@ -3,6 +3,7 @@
 exports[`Table.Expand > childrenColumnName 1`] = `
 <div
   class="rc-table"
+  style="--columns-count: 2;"
 >
   <div
     class="rc-table-container"
@@ -108,6 +109,7 @@ 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"
@@ -230,6 +232,7 @@ 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"
@@ -352,6 +355,7 @@ 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"
@@ -439,6 +443,7 @@ 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"
@@ -634,6 +639,7 @@ 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"
@@ -739,6 +745,7 @@ 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"
@@ -907,6 +914,7 @@ 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"
@@ -1029,6 +1037,7 @@ 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,6 +3,7 @@
 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"
@@ -794,6 +795,7 @@ 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"
@@ -1583,6 +1585,7 @@ 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"
@@ -1842,6 +1845,7 @@ 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"
@@ -2685,6 +2689,7 @@ 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,6 +11,7 @@ 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"
@@ -77,6 +78,7 @@ 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"
@@ -210,6 +212,7 @@ 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"
@@ -259,6 +262,7 @@ 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"
@@ -339,6 +343,7 @@ 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"
@@ -402,6 +407,7 @@ 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"
@@ -458,6 +464,7 @@ 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"
@@ -514,6 +521,7 @@ 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"
@@ -582,6 +590,7 @@ 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"
@@ -638,6 +647,7 @@ 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"
@@ -687,6 +697,7 @@ 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"
@@ -755,6 +766,7 @@ 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"
@@ -798,6 +810,7 @@ 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"