fix(Table): merge cell with GroupHeader GroupFooter, close #547

alibaba-fusion · Apr 10, 2019 · 4a420cb · 4a420cb
1 parent e11f1df
commit 4a420cb
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 18 deletions.
diff --git a/docs/table/demo/list.md b/docs/table/demo/list.md
@@ -18,42 +18,123 @@ Demo the Group list.
 import { Table, Button } from '@alifd/next';
 
 const dataSource = [{
-        price: 'US $2.45',
-        status: 0,
+        price: 'US $1',
+        status: 1,
+        parent: 'root',
         id: 1,
         product: [{
             title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
             avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
         }],
         children: [{
-            price: 'US $2.5',
-            status: 1,
+            price: 'US $1-1',
+            status: 11,
             id: 2,
+            parent: 0,
+            index: 0,
             product: [{
                 title: 'Free shipping women Casual dresses lady dress plus size 2014',
                 avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
             }]
         }, {
-            price: 'US $2.5',
-            status: 1,
+            price: 'US $1-2',
+            status: 12,
             id: 3,
+            parent: 0,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $1-3',
+            status: 13,
+            id: 7,
+            parent: 0,
             product: [{
                 title: 'Free shipping women Casual dresses lady dress plus size 2014',
                 avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
             }]
         }]
     }, {
-        price: 'US $2.5',
-        status: 1,
+        price: 'US $3',
+        status: 3,
+        parent: 'root',
+        id: 3,
+        product: [{
+            title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
+            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
+        }],
+        children: [{
+            price: 'US $3-1',
+            status: 31,
+            id: 31,
+            parent: 1,
+            index: 0,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $3-2',
+            status: 32,
+            id: 32,
+            parent: 1,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $3-3',
+            status: 33,
+            id: 33,
+            parent: 1,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $3-4',
+            status: 34,
+            id: 34,
+            parent: 1,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }]
+    }, {
+        price: 'US $4',
+        status: 4,
+        parent: 'root',
         id: 4,
         product: [{
-            title: 'Free shipping women Casual dresses lady dress plus size 2014',
-            avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            title: '2014 New Fashion Novelty Tank Slim Women\'s Fashion Dresses With Lace',
+            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'
         }],
         children: [{
-            price: 'US $2.5',
-            status: 1,
-            id: 5,
+            price: 'US $4-1',
+            status: 31,
+            id: 31,
+            parent: 2,
+            index: 0,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $4-2',
+            status: 32,
+            id: 32,
+            parent: 2,
+            product: [{
+                title: 'Free shipping women Casual dresses lady dress plus size 2014',
+                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
+            }]
+        }, {
+            price: 'US $4-3',
+            status: 33,
+            id: 33,
+            parent: 2,
             product: [{
                 title: 'Free shipping women Casual dresses lady dress plus size 2014',
                 avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'
@@ -88,6 +169,20 @@ const dataSource = [{
         }
     };
 
+const getCellProps = (rowIndex, colIndex, dataIndex, record) => {
+    if (colIndex === 3 && record.index === 0 ) {
+		return {
+        rowSpan: dataSource[record.parent].children.length
+      };
+    }
+
+    if (colIndex === 4 && record.index === 0 ) {
+		return {
+        rowSpan: dataSource[record.parent].children.length
+      };
+    }
+}
+
 class App extends React.Component {
     state = {
         hasSelection: false
@@ -102,13 +197,13 @@ class App extends React.Component {
         return (
             <div>
                 <p><Button onClick={this.toggleGroupSelection}>Toggle GroupHeader Selection</Button></p>
-                <Table dataSource={dataSource} rowSelection={rowSelection}>
+                <Table dataSource={dataSource} rowSelection={rowSelection} getCellProps={getCellProps}>
                     <Table.GroupHeader cell={groupHeaderRender} hasChildrenSelection={this.state.hasSelection}/>
                     <Table.GroupFooter cell={groupHeaderRender}/>
                     <Table.Column cell={productRender} title="Product Details" dataIndex="product"/>
                     <Table.Column cell={priceRender} title="Price" dataIndex="price" width={120}/>
                     <Table.Column cell={statusRender} title="Status" dataIndex="status" width={100}/>
-                    <Table.Column cell={operRender} title="" width={100}/>
+                    <Table.Column cell={operRender} title="Operation" width={100}/>
                 </Table>
             </div>
         );

diff --git a/src/table/base/row.jsx b/src/table/base/row.jsx
@@ -81,19 +81,22 @@ export default class Row extends React.Component {
         }
     }
 
-    renderCells(record) {
+    renderCells(record, rowIndex) {
         const {
             Cell,
             columns,
             getCellProps,
             cellRef,
             prefix,
-            rowIndex,
             primaryKey,
             pure,
             locale,
             rtl,
         } = this.props;
+
+        // use params first, it's for list
+        rowIndex = rowIndex !== undefined ? rowIndex : this.props.rowIndex;
+
         const { lockType } = this.context;
         return columns.map((child, colIndex) => {
             /* eslint-disable no-unused-vars, prefer-const */

diff --git a/src/table/list/row.jsx b/src/table/list/row.jsx
@@ -38,6 +38,10 @@ export default class GroupListRow extends Row {
             [`${prefix}table-row`]: true,
             [className]: className,
         });
+
+        // clear notRenderCellIndex, incase of cached data
+        this.context.notRenderCellIndex = [];
+
         return (
             <table
                 className={cls}
@@ -73,7 +77,7 @@ export default class GroupListRow extends Row {
         const { children } = record;
         if (children) {
             return children.map((child, index) => {
-                const cells = this.renderCells(child);
+                const cells = this.renderCells(child, index);
                 if (this.isChildrenSelection()) {
                     if (!child[primaryKey]) {
                         log.warning(