Grouping columns

assets/index.less

@@ -1,15 +1,20 @@
 @tablePrefixCls: rc-table;
 @text-color             : #666;
 @font-size-base         : 12px;
+@line-height: 1.5;
 @table-border-color: #e9e9e9;
 @table-head-background-color: #f3f3f3;
+@vertical-padding: 16px;
+@horizontal-padding: 8px;
+@row-height: @font-size-base * @line-height + @vertical-padding * 2;
+
 
 .@{tablePrefixCls} {
   font-size: @font-size-base;
   color: @text-color;
   transition: opacity 0.3s ease;
   position: relative;
-  line-height: 1.5;
+  line-height: @line-height;
   overflow: hidden;
 
   .@{tablePrefixCls}-scroll {
@@ -40,7 +45,7 @@
   }
 
   .@{tablePrefixCls}-title {
-    padding: 16px 8px;
+    padding: @vertical-padding @horizontal-padding;
     border-top: 1px solid #e9e9e9;
   }
 
@@ -49,7 +54,7 @@
   }
 
   .@{tablePrefixCls}-footer {
-    padding: 16px 8px;
+    padding: @vertical-padding @horizontal-padding;
     border-bottom: 1px solid #e9e9e9;
   }
 
@@ -81,7 +86,7 @@
   }
 
   th, td {
-    padding: 16px 8px;
+    padding: @vertical-padding @horizontal-padding;
   }
 }
 
@@ -164,6 +169,15 @@
       width: auto;
       background: #fff;
     }
+
+    .generate-rowspan(10);
+
+    .generate-rowspan(@n, @i: 1) when (@i =< @n) {
+      th.@{tablePrefixCls}-rowspan-@{i} {
+        height: @row-height * @i - @vertical-padding * 2;
+      }
+      .generate-rowspan(@n, (@i + 1));
+    }
   }
 
   &-fixed-left {

examples/grouping-columns.js

@@ -0,0 +1,99 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Table = require('rc-table');
+require('rc-table/assets/index.less');
+
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '其它',
+    children: [
+      {
+        title: '年龄',
+        dataIndex: 'age',
+        key: 'age',
+      },
+      {
+        title: '住址',
+        children: [
+          {
+            title: '街道',
+            dataIndex: 'street',
+            key: 'street',
+          },
+          {
+            title: '小区',
+            children: [
+              {
+                title: '单元',
+                dataIndex: 'building',
+                key: 'building',
+              },
+              {
+                title: '门牌',
+                dataIndex: 'number',
+                key: 'number',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: '公司',
+    children: [
+      {
+        title: '地址',
+        dataIndex: 'companyAddress',
+        key: 'companyAddress',
+      },
+      {
+        title: '名称',
+        dataIndex: 'companyName',
+        key: 'companyName',
+      },
+    ],
+  },
+  {
+    title: '性别',
+    dataIndex: 'gender',
+    key: 'gender',
+  },
+];
+
+
+const data = [{
+  key: '1',
+  name: '胡彦斌',
+  age: 32,
+  street: '拱墅区和睦街道',
+  building: 1,
+  number: 2033,
+  companyAddress: '西湖区湖底公园',
+  companyName: '湖底有限公司',
+  gender: '男',
+}, {
+  key: '2',
+  name: '胡彦祖',
+  age: 42,
+  street: '拱墅区和睦街道',
+  building: 3,
+  number: 2035,
+  companyAddress: '西湖区湖底公园',
+  companyName: '湖底有限公司',
+  gender: '男',
+}];
+
+ReactDOM.render(
+  <div>
+    <h2>grouping columns</h2>
+    <Table columns={columns} data={data} />
+  </div>,
+  document.getElementById('__react-content')
+);

src/Table.jsx

@@ -189,30 +189,71 @@ const Table = React.createClass({
 
   getHeader(columns, fixed) {
     const { showHeader, expandIconAsCell, prefixCls } = this.props;
-    let ths = [];
+    let rows;
+    if (columns) {
+      // columns are passed from fixed table function that already grouped.
+      rows = this.getHeaderRows(columns);
+    } else {
+      rows = this.getHeaderRows(this.groupColumns(this.getCurrentColumns()));
+    }
+
     if (expandIconAsCell && fixed !== 'right') {
-      ths.push({
+      rows[0].unshift({
         key: 'rc-table-expandIconAsCell',
-        className: `${prefixCls}-expand-icon-th`,
+        className: `${prefixCls}-expand-icon-th ${prefixCls}-rowspan-${rows.length}`,
         title: '',
+        rowSpan: rows.length,
       });
     }
-    ths = ths.concat(columns || this.getCurrentColumns()).map(c => {
-      if (c.colSpan !== 0) {
-        return <th key={c.key} colSpan={c.colSpan} className={c.className || ''}>{c.title}</th>;
-      }
-    });
+
     const { fixedColumnsHeadRowsHeight } = this.state;
     const trStyle = (fixedColumnsHeadRowsHeight[0] && columns) ? {
       height: fixedColumnsHeadRowsHeight[0],
     } : null;
     return showHeader ? (
       <thead className={`${prefixCls}-thead`}>
-        <tr style={trStyle}>{ths}</tr>
+        {rows.map((r, i) => {
+          const ths = r.map(c => <th {...c} />);
+          return <tr key={i} style={trStyle} children={ths} />;
+        })}
       </thead>
     ) : null;
   },
 
+  getHeaderRows(columns, currentRow = 0, rows) {
+    const { prefixCls } = this.props;
+
+    rows = rows || [];
+    rows[currentRow] = rows[currentRow] || [];
+
+    columns.forEach(column => {
+      if (column.rowSpan && rows.length < column.rowSpan) {
+        while (rows.length < column.rowSpan) {
+          rows.push([]);
+        }
+      }
+      const cell = {
+        key: column.key,
+        className: column.className || '',
+        children: column.title,
+      };
+      if (column.children) {
+        this.getHeaderRows(column.children, currentRow + 1, rows);
+      }
+      if ('colSpan' in column) {
+        cell.colSpan = column.colSpan;
+      }
+      if ('rowSpan' in column) {
+        cell.rowSpan = column.rowSpan;
+        cell.className += ` ${prefixCls}-rowspan-${cell.rowSpan}`;
+      }
+      if (cell.colSpan !== 0) {
+        rows[currentRow].push(cell);
+      }
+    });
+    return rows;
+  },
+
   getExpandedRow(key, content, visible, className, fixed) {
     const prefixCls = this.props.prefixCls;
     return (
@@ -224,7 +265,7 @@ const Table = React.createClass({
         {(this.props.expandIconAsCell && fixed !== 'right')
            ? <td key="rc-table-expand-icon-placeholder" />
            : null}
-        <td colSpan={this.props.columns.length}>
+        <td colSpan={this.getLeafColumnsCount(this.props.columns)}>
           {fixed !== 'right' ? content : '&nbsp;'}
         </td>
       </tr>
@@ -271,6 +312,8 @@ const Table = React.createClass({
         height: fixedColumnsBodyRowsHeight[i],
       } : {};
 
+      const leafColumns = this.getLeafColumns(columns || this.getCurrentColumns());
+
       rst.push(
         <TableRow
           indent={indent}
@@ -288,7 +331,7 @@ const Table = React.createClass({
           expanded={isRowExpanded}
           prefixCls={`${props.prefixCls}-row`}
           childrenColumnName={childrenColumnName}
-          columns={columns || this.getCurrentColumns()}
+          columns={leafColumns}
           expandIconColumnIndex={expandIconColumnIndex}
           onRowClick={onRowClick}
           style={style}
@@ -329,7 +372,8 @@ const Table = React.createClass({
         />
       );
     }
-    cols = cols.concat((columns || this.props.columns).map(c => {
+    const leafColumns = this.getLeafColumns(columns || this.props.columns);
+    cols = cols.concat(leafColumns.map(c => {
       return <col key={c.key} style={{ width: c.width, minWidth: c.width }} />;
     }));
     return <colgroup>{cols}</colgroup>;
@@ -361,7 +405,7 @@ const Table = React.createClass({
 
   getLeftFixedTable() {
     const { columns } = this.props;
-    const fixedColumns = columns.filter(
+    const fixedColumns = this.groupColumns(columns).filter(
       column => column.fixed === 'left' || column.fixed === true
     );
     return this.getTable({
@@ -372,7 +416,7 @@ const Table = React.createClass({
 
   getRightFixedTable() {
     const { columns } = this.props;
-    const fixedColumns = columns.filter(column => column.fixed === 'right');
+    const fixedColumns = this.groupColumns(columns).filter(column => column.fixed === 'right');
     return this.getTable({
       columns: fixedColumns,
       fixed: 'right',
@@ -517,6 +561,22 @@ const Table = React.createClass({
     return Math.ceil((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize) - 1;
   },
 
+  getLeafColumns(columns) {
+    const leafColumns = [];
+    columns.forEach(column => {
+      if (!column.children) {
+        leafColumns.push(column);
+      } else {
+        leafColumns.push(...this.getLeafColumns(column.children));
+      }
+    });
+    return leafColumns;
+  },
+
+  getLeafColumnsCount(columns) {
+    return this.getLeafColumns(columns).length;
+  },
+
   goToColumnsPage(currentColumnsPage) {
     const maxColumnsPage = this.getMaxColumnsPage();
     let page = currentColumnsPage;
@@ -531,6 +591,45 @@ const Table = React.createClass({
     });
   },
 
+  // add appropriate rowspan and colspan to column
+  groupColumns(columns, currentRow = 0, parentColumn = {}, rows = []) {
+    // track how many rows we got
+    if (!~rows.indexOf(currentRow)) {
+      rows.push(currentRow);
+    }
+    const grouped = [];
+    const setRowSpan = column => {
+      const rowSpan = rows.length - currentRow;
+      if (column &&
+          !column.children && // parent columns are supposed to be one row
+          rowSpan > 1 &&
+          (!column.rowSpan || column.rowSpan < rowSpan)
+      ) {
+        column.rowSpan = rowSpan;
+      }
+    };
+    columns.forEach((column, index) => {
+      const newColumn = { ...column };
+      parentColumn.colSpan = parentColumn.colSpan || 0;
+      if (newColumn.children && newColumn.children.length > 0) {
+        newColumn.children = this.groupColumns(newColumn.children, currentRow + 1, newColumn, rows);
+        parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan;
+      } else {
+        parentColumn.colSpan++;
+      }
+      // update rowspan to all previous columns
+      for (let i = 0; i < index; ++i) {
+        setRowSpan(grouped[i]);
+      }
+      // last column, update rowspan immediately
+      if (index + 1 === columns.length) {
+        setRowSpan(newColumn);
+      }
+      grouped.push(newColumn);
+    });
+    return grouped;
+  },
+
   syncFixedTableRowHeight() {
     const { prefixCls } = this.props;
     const headRows = this.refs.headTable ? this.refs.headTable.querySelectorAll(`tr`) : [];