feat(Table): add colSpan to merge cell of theader, close #993

docs/table/demo/colspan.md

@@ -26,7 +26,8 @@ const onRowClick = function (record, index, e) {
             result.push({
                 title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
                 id: 100306660940 + i,
-                time: 2000 + i
+                year: i === 0 ? '-' : `2019-10-2${3 + i}`,
+                month: `16:39:${23 + i}`
             });
         }
         return result;
@@ -37,22 +38,23 @@ const onRowClick = function (record, index, e) {
     cellProps = (rowIndex, colIndex) => {
         if (rowIndex === 2 && colIndex === 1) {
             return {
-                colSpan: 2,
+                // take 3 rows's space
                 rowSpan: 3
             };
         }
-        if (rowIndex === 1 && colIndex === 2) {
+
+        if (rowIndex === 0 && colIndex === 2) {
             return {
-                colSpan: 2,
-                rowSpan: 1
+                // take 2 cols' space
+                colSpan: 2
             };
         }
     };
 
 ReactDOM.render(<Table dataSource={dataSource()} onRowClick={onRowClick} cellProps={cellProps}>
     <Table.Column title="Id" dataIndex="id"/>
     <Table.Column title="Title" dataIndex="title.name" />
-    <Table.Column title="Time" dataIndex="time"/>
-    <Table.Column cell={render} width={200}/>
+    <Table.Column title="Time" colSpan={2} dataIndex="year"/>
+    <Table.Column colSpan={0} dataIndex="month"/>
 </Table>, mountNode);
 ````

docs/table/demo/selection.md

@@ -61,9 +61,6 @@ ReactDOM.render(<Table
                 align: 'center'
             };
         },
-        titleAddons: () => {
-            return <div>请选择</div>;
-        },
         titleProps: () => {
             return {
                 // remove the select all button

docs/table/index.en-us.md

@@ -137,6 +137,7 @@ ReactDOM.render(
 | filterMenuProps | the props passed to Menu in filter mode, extend `Menu`'s API <br><br>**options**:<br>_subMenuSelectable_: {Boolean} default `false` subMenu can be selected or not<br>_isSelectIconRight_: {Boolean} default `false` select icon in right or not. (icon on SubMenu always in left) | Object                          | {     subMenuSelectable: false } |
 | lock       | whether the lock column is supported, the options are `left`, `right`, `true`                    | Boolean/String                  | -                |
 | resizable  | whether to support column resizing, when this value is set to true, the layout of the table will be modified to fixed              | Boolean                         | false            |
+| colSpan    | theader can merge cell by this API, 0 means no th of this column                                                                                                                                                                            | Number                          | -                                 |
 
 ### Table.ColumnGroup
 

docs/table/index.md

@@ -150,6 +150,7 @@ ReactDOM.render(
 | filterMenuProps | filter 模式下传递给 Menu 菜单的属性， 默认继承 `Menu` 组件的API<br><br>**属性**:<br>_subMenuSelectable_: {Boolean} 默认为`false` subMenu是否可选择<br>_isSelectIconRight_: {Boolean} 默认为`false` 是否将选中图标居右。注意：SubMenu 上的选中图标一直居左，不受此API控制 | Object                          | {     subMenuSelectable: false, } |
 | lock            | 是否支持锁列,可选值为`left`,`right`, `true`                                                                                                                                                                           | Boolean/String                  | -                                 |
 | resizable       | 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.                                                                                                                                                                    | Boolean                         | false                             |
+| colSpan         | header cell 横跨的格数，设置为0表示不出现此 th                                                                                                                                                                             | Number                          | -                                 |
 
 ### Table.ColumnGroup
 

src/table/base/header.jsx

@@ -107,9 +107,11 @@ export default class Header extends React.Component {
                     sortElement,
                     filterElement,
                     resizeElement;
-                if (col.children && col.children.length) {
-                    attrs.colSpan = colSpan;
-                } else {
+
+                attrs.colSpan = colSpan;
+
+                // column.group doesn't have sort resize filter
+                if (!(col.children && col.children.length)) {
                     if (sortable) {
                         sortElement = (
                             <Sort
@@ -152,6 +154,11 @@ export default class Header extends React.Component {
                     }
                     attrs.rowSpan = rowSpan - index;
                 }
+
+                if (+attrs.colSpan === 0) {
+                    return null;
+                }
+
                 return (
                     <Cell
                         {...others}

src/table/base/row.jsx

@@ -102,7 +102,16 @@ export default class Row extends React.Component {
         const { lockType } = this.context;
         return columns.map((child, colIndex) => {
             /* eslint-disable no-unused-vars, prefer-const */
-            const { dataIndex, align, alignHeader, width, ...others } = child;
+            const {
+                dataIndex,
+                align,
+                alignHeader,
+                width,
+                colSpan,
+                ...others
+            } = child;
+            // colSpan should show in body td by the way of <Table.Column colSpan={2} />
+            // tbody's cell merge should only by the way of <Table cellProps={} />
 
             const value = fetchDataByPath(record, dataIndex);
             const attrs =

src/table/column.jsx

@@ -73,6 +73,10 @@ export default class Column extends React.Component {
          * 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.
          */
         resizable: PropTypes.bool,
+        /**
+         * header cell 横跨的格数，设置为0表示不出现此 th
+         */
+        colSpan: PropTypes.number,
     };
 
     static contextTypes = {

src/table/selection.jsx

@@ -43,7 +43,6 @@ export default function selection(BaseComponent) {
              * @property {String} mode 选择selection的模式, 可选值为`single`, `multiple`，默认为`multiple`
              * @property {Function} columnProps `Function()=>Object` 选择列 的props，例如锁列、对齐等，可使用`Table.Column` 的所有参数
              * @property {Function} titleProps `Function()=>Object` 选择列 表头的props，仅在 `multiple` 模式下生效
-             * @property {Function} titleAddons `Function()=>Node` 选择列 表头添加的元素，在`single` `multiple` 下都生效
              */
             rowSelection: PropTypes.object,
             primaryKey: PropTypes.string,

test/table/index-spec.js

@@ -656,6 +656,35 @@ describe('Table', () => {
         );
     });
 
+    it('header should support colspan', done => {
+        wrapper.setProps({});
+
+        timeout(
+            {
+                children: [
+                    <Table.Column dataIndex="id" />,
+                    <Table.Column dataIndex="name" />,
+                ]
+            },
+            () => {
+                assert(wrapper.find('.next-table-header th').length === 2);
+            }
+        ).then(() => {
+            timeout(
+                {
+                    children: [
+                        <Table.Column dataIndex="id" colSpan="2" />,
+                        <Table.Column dataIndex="name" colSpan="0" />,
+                    ]
+                },
+                () => {
+                    assert(wrapper.find('.next-table-header th').length === 1);
+                    done();
+                }
+            )
+        });
+    });
+
     it('should support colspan & rowspan', done => {
         wrapper.setProps({});
         timeout(

types/table/index.d.ts

@@ -65,6 +65,11 @@ export interface ColumnProps extends HTMLAttributesWeak, CommonProps {
      * 是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.
      */
     resizable?: boolean;
+
+    /**
+     * header cell 横跨的格数，设置为0表示不出现此 th
+     */
+    colSpan?: number;
 }
 
 export class Column extends React.Component<ColumnProps, any> {}