import Button from '../../button'; import React from 'react'; import ReactDOM from 'react-dom'; import Table from '..'; const dataSource = [ { 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 $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 $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 $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: "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 $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', }, ], }, ], }, ], productRender = function(product) { return (
{product[0].title}
); }, priceRender = function(price) { return {price}; }, statusRender = function(status) { if (status) { return 'Already Priced'; } return 'No Priced'; }, operRender = function() { return View; // eslint-disable-line }, groupHeaderRender = function(record) { return
{record.product[0].title}
; }, rowSelection = { onChange(selectedKeys) { console.log(selectedKeys); }, }; const cellProps = (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, }; toggleGroupSelection = () => { this.setState({ hasSelection: !this.state.hasSelection, }); }; render() { return (

); } } ReactDOM.render(, document.getElementById('table-demo-13'));