fix: Table rowSelection.columnWidth should work (#16180)

* set row col width instead of check cecll width

* use rc-table internal hook

* update snapshot

components/table/Table.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import RcTable from 'rc-table';
+import RcTable, { INTERNAL_COL_DEFINE } from 'rc-table';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
@@ -779,6 +779,9 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         fixed: rowSelection.fixed,
         width: rowSelection.columnWidth,
         title: rowSelection.columnTitle,
+        [INTERNAL_COL_DEFINE]: {
+          className: `${prefixCls}-selection-col`,
+        },
       };
       if (rowSelection.type !== 'radio') {
         const checkboxAllDisabled = data.every(

components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap

@@ -26,7 +26,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                 class=""
               >
                 <colgroup>
-                  <col />
+                  <col
+                    class="ant-table-selection-col"
+                  />
                   <col />
                 </colgroup>
                 <thead
@@ -250,7 +252,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
                   class="ant-table-fixed"
                 >
                   <colgroup>
-                    <col />
+                    <col
+                      class="ant-table-selection-col"
+                    />
                   </colgroup>
                   <thead
                     class="ant-table-thead"

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -2427,7 +2427,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
                   <col
                     class="ant-table-expand-icon-col"
                   />
-                  <col />
+                  <col
+                    class="ant-table-selection-col"
+                  />
                   <col
                     style="width:150px;min-width:150px"
                   />
@@ -4860,7 +4862,9 @@ exports[`renders ./components/table/demo/expand-children.md correctly 1`] = `
               class=""
             >
               <colgroup>
-                <col />
+                <col
+                  class="ant-table-selection-col"
+                />
                 <col />
                 <col
                   style="width:12%;min-width:12%"
@@ -12415,7 +12419,9 @@ exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
               class=""
             >
               <colgroup>
-                <col />
+                <col
+                  class="ant-table-selection-col"
+                />
                 <col />
                 <col />
                 <col />
@@ -12842,7 +12848,9 @@ exports[`renders ./components/table/demo/row-selection-and-operation.md correctl
                 class=""
               >
                 <colgroup>
-                  <col />
+                  <col
+                    class="ant-table-selection-col"
+                  />
                   <col />
                   <col />
                   <col />
@@ -13539,7 +13547,9 @@ exports[`renders ./components/table/demo/row-selection-custom.md correctly 1`] =
               class=""
             >
               <colgroup>
-                <col />
+                <col
+                  class="ant-table-selection-col"
+                />
                 <col />
                 <col />
                 <col />

components/table/style/index.less

@@ -310,22 +310,6 @@
     padding: @table-padding-vertical @table-padding-horizontal;
   }
 
-  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
-    .@{table-prefix-cls}-selection {
-      margin-right: -15px;
-    }
-  }
-
-  &-thead > tr > th.@{table-prefix-cls}-selection-column,
-  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
-    width: @table-selection-column-width;
-    text-align: center;
-
-    .@{ant-prefix}-radio-wrapper {
-      margin-right: 0;
-    }
-  }
-
   &-expand-icon-th,
   &-row-expand-icon-cell {
     width: 50px;
@@ -561,10 +545,6 @@
         content: '.';
       }
     }
-
-    &[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
-      display: inline-block;
-    }
   }
 
   tr&-expanded-row {
@@ -685,6 +665,32 @@
   &&-scroll-position-right &-fixed-right {
     box-shadow: none;
   }
+
+  // ========================== Row Selection ==========================
+  colgroup {
+    > col.@{table-prefix-cls}-selection-col {
+      width: @table-selection-column-width;
+    }
+  }
+
+  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
+    .@{table-prefix-cls}-selection {
+      margin-right: -15px;
+    }
+  }
+
+  &-thead > tr > th.@{table-prefix-cls}-selection-column,
+  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
+    text-align: center;
+
+    .@{ant-prefix}-radio-wrapper {
+      margin-right: 0;
+    }
+  }
+
+  &-row[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
+    display: inline-block;
+  }
 }
 
 @import './size';

package.json

@@ -80,7 +80,7 @@
     "rc-slider": "~8.6.5",
     "rc-steps": "~3.3.0",
     "rc-switch": "~1.9.0",
-    "rc-table": "~6.4.0",
+    "rc-table": "~6.5.0",
     "rc-tabs": "~9.6.0",
     "rc-time-picker": "~3.6.1",
     "rc-tooltip": "~3.7.3",