refactor: Move Table rowSpan & colSpan demo to onCell instead (#33114)

* docs: change doc of span demo

* docs: clear render props

components/table/demo/colspan-rowspan.md

@@ -1,5 +1,6 @@
 ---
 order: 15
+version: 4.18.0
 title:
   en-US: colSpan and rowSpan
   zh-CN: 表格行/列合并
@@ -22,70 +23,53 @@ import { Table } from 'antd';
 
 // In the fifth row, other columns are merged into first column
 // by setting it's colSpan to be 0
-const renderContent = (value, row, index) => {
-  const obj = {
-    children: value,
-    props: {},
-  };
+const sharedOnCell = (_, index) => {
   if (index === 4) {
-    obj.props.colSpan = 0;
+    return { colSpan: 0 };
   }
-  return obj;
 };
 
 const columns = [
   {
     title: 'Name',
     dataIndex: 'name',
-    render: (text, row, index) => {
-      if (index < 4) {
-        return <a>{text}</a>;
-      }
-      return {
-        children: <a>{text}</a>,
-        props: {
-          colSpan: 5,
-        },
-      };
-    },
+    render: (text, row, index) => <a>{text}</a>,
+    onCell: (_, index) => ({
+      colSpan: index < 4 ? 1 : 5,
+    }),
   },
   {
     title: 'Age',
     dataIndex: 'age',
-    render: renderContent,
+    onCell: sharedOnCell,
   },
   {
     title: 'Home phone',
     colSpan: 2,
     dataIndex: 'tel',
-    render: (value, row, index) => {
-      const obj = {
-        children: value,
-        props: {},
-      };
+    onCell: (_, index) => {
       if (index === 2) {
-        obj.props.rowSpan = 2;
+        return { rowSpan: 2 };
       }
       // These two are merged into above cell
       if (index === 3) {
-        obj.props.rowSpan = 0;
+        return { rowSpan: 0 };
       }
       if (index === 4) {
-        obj.props.colSpan = 0;
+        return { colSpan: 0 };
       }
-      return obj;
     },
   },
   {
     title: 'Phone',
     colSpan: 0,
     dataIndex: 'phone',
-    render: renderContent,
+    onCell: sharedOnCell,
   },
   {
     title: 'Address',
     dataIndex: 'address',
-    render: renderContent,
+    onCell: sharedOnCell,
   },
 ];
 

components/table/index.en-US.md

@@ -134,7 +134,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | filters | Filter menu config | object\[] | - |  |
 | fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false |  |
 | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |
-| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |
+| render | Renderer of the table cell. The return value should be a ReactNode | function(text, record, index) {} | - |  |
 | responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
 | shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
 | showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true |  |

components/table/index.zh-CN.md

@@ -141,7 +141,7 @@ const columns = [
 | filters | 表头的筛选菜单项 | object\[] | - |  |
 | fixed | （IE 下无效）列是否固定，可选 true (等效于 left) `left` `right` | boolean \| string | false |  |
 | key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |  |
-| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |
+| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | function(text, record, index) {} | - |  |
 | responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
 | shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
 | showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true |  |

package.json

@@ -143,7 +143,7 @@
     "rc-slider": "~9.7.4",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
-    "rc-table": "~7.20.0",
+    "rc-table": "~7.21.0",
     "rc-tabs": "~11.10.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",