Table 表格

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

Table 负责将数据呈现为高度可定制和具备可访问性的 HTML 表格，其核心功能为将结构化的数据使用表格的方式展现，然后可以使用各种参数来向表格中加入一些特性，比如排序，过滤，滚动，锁列等。

基本使用

基本的 Table 包含行和列，使用 Table.Column 来定义列的信息，使用传入的 dataSource 属性数据来创建行。

下面的代码将会创建一行两列的数据表：

import { Table } from '@alifd/next';
const dataSource = [{id: 1, time: '2016'}];
ReactDOM.render(
    <Table dataSource={dataSource}>
        <Table.Column title="Id" dataIndex="id"/>
        <Table.Column title="Time" dataIndex="time"/>
    </Table>, mountNode);

常见问题

• Q: 通过 rowSelection 开启了选择模式，为什么选择任意一个都是全选？ A: 给定的数据源中的属性需要有一个唯一标示该条数据的主键，默认值为id，可通过 primaryKey 更改 e.g.<Table primaryKey='myId'></Table>

• Q: 还是 rowSelection 选择模式，如何设置默认选中/禁用呢？ A: 通过受控模式，设置 rowSelection.selectedRowKeys 可以默认选中选中；通过 rowSelection.getProps 可以自定义每一行checkbox的props，具体可搜索demo选择可控

• Q: 又是 rowSelection 选择模式，如何屏蔽全选按钮/自定义全选按钮呢 A: 通过 rowSelection.titleProps 可以自定义选择列的表头的props，可通过 style: {display: 'none'} 屏蔽全选按钮；此外还有 rowSelection.titleAddons rowSelection.columnProps等属性，具体用法可搜索demo 可选择

• Q: 能用什么样的方式支持行的双击事件/设置每一行的样式？处理整行点击呢？ A: 通过 rowProps 属性，重写行支持的原生属性，比如className style onDoubleClick等；通过 onRowClick 处理整行点击

列配置

API。

下面的代码会让cell根据值渲染不同的视图：

import { Table } from '@alifd/next';
const dataSource = [{id: 1, time: '2016'}];
const renderTime = value => {
    if (value === '2016') {
        return '今年';
    }
    return value;
};
ReactDOM.render(
    <Table dataSource={dataSource}>
        <Table.Column title="Id" dataIndex="id"/>
        <Table.Column title="Time" dataIndex="time" cell={renderTime}/>
    </Table>, mountNode);

多表头

使用 Table.ColumnGroup 包裹 Table.Column 来创建有多个表头的表格。

import { Table } from '@alifd/next';
const dataSource = [{id: 1, time: '2016'}];
ReactDOM.render(
    <Table dataSource={dataSource}>
        <Table.ColumnGroup>
            <Table.Column title="Id" dataIndex="id"/>
            <Table.Column title="Time" dataIndex="time"/>
        </Table.ColumnGroup>
        <Table.ColumnGroup>
            <Table.Column title="Id" dataIndex="id"/>
        </Table.ColumnGroup>
    </Table>, mountNode);

已知问题

分组 Table 不支持在 Hover 状态和选中状态下显示背景色，无法合并单元格

Table 锁列特性下面无法使用合并单元格功能

API

Table

Table.Column

Table.ColumnGroup

Table.GroupHeader

Table.GroupFooter

代码示例

简单

简单的表格渲染

查看源码在线预览

import { Table } from '@alifd/next';
const dataSource = () => {
    const result = [];
    for (let i = 0; i < 5; i++) {
        result.push({
            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
            id: 100306660940 + i,
            time: 2000 + i
        });
    }
    return result;
};
const render = (value, index, record) => {
    return <a href="javascript:;">Remove({record.id})</a>;
};
ReactDOM.render(<Table dataSource={dataSource()}>
    <Table.Column title="Id" dataIndex="id"/>
    <Table.Column title="Title" dataIndex="title.name" />
    <Table.Column title="Time" dataIndex="time"/>
    <Table.Column cell={render}/>
</Table>, mountNode);

可选择

表格可选择功能

查看源码在线预览

import { Table, Icon, MenuButton } from '@alifd/next';
const { Item } = MenuButton;
const dataSource = () => {
    const result = [];
    for (let i = 0; i < 5; i++) {
        result.push({
            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
            id: 100306660940 + i,
            time: 2000 + i
        });
    }
    return result;
};
const render = (value, index, record) => {
    return <a href="javascript:;">Remove({record.id})</a>;
};
const onChange = (...args) => {
    console.log(args);
};
const selectItem = id => {
    console.log(id);
};
ReactDOM.render(<Table
    dataSource={dataSource()}
    rowSelection={{
        onChange: onChange,
        getProps: (record, index) => {
            console.log(record, index);
            return  index === 2 ? {
                disabled: true,
                children: index
            } : {
                children: index
            };
        },
        columnProps: () => {
            return {
                lock: 'left',
                width: 90,
                align: 'center'
            };
        },
        titleAddons: () => {
            return <div>请选择</div>;
        },
        titleProps: () => {
            return {
                // remove the select all button
                // style: {display: 'none'},
                disabled: true,
                children:
                <MenuButton text onItemClick={selectItem} menuProps={{
                    isSelectIconRight: true
                }} >
                    <Item key="odd">odd</Item>
                    <Item key="even">even</Item>
                </MenuButton>
            };
        }
    }}>
    <Table.Column title="Id" dataIndex="id" width={200}/>
    <Table.Column title="Title" dataIndex="title.name" width={200}/>
    <Table.Column title="Time" dataIndex="time" width={200}/>
    <Table.Column cell={render} width={200}/>
</Table>, mountNode);

选择可控

演示全选和单选受控的功能

查看源码在线预览

import { Table, Button } from '@alifd/next';
const dataSource = (i, j) => {
        const result = [];
        for (let a = i; a < j; a++) {
            result.push({
                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
                id: 100306660940 + a,
                time: 2000 + a
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a href="javascript:;">Remove({record.id})</a>;
    };
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            rowSelection: {
                onChange: this.onChange.bind(this),
                onSelect: function(selected, record, records) {
                    console.log('onSelect', selected, record, records);
                },
                onSelectAll: function(selected, records) {
                    console.log('onSelectAll', selected, records);
                },
                selectedRowKeys: [100306660940, 100306660941],
                getProps: (record) => {
                    return {
                        disabled: record.id === 100306660941
                    };
                }
            },
            dataSource: dataSource(0, 5)
        };
    }
    onChange(ids, records) {
        const {rowSelection} = this.state;
        rowSelection.selectedRowKeys = ids;
        console.log('onChange', ids, records);
        this.setState({ rowSelection });
    }
    clear() {
        const {rowSelection} = this.state;
        rowSelection.selectedRowKeys = [];
        this.setState({ rowSelection });
    }
    toggleLoading() {
        this.setState({loading: !this.state.loading});
    }
    changeMode() {
        const {rowSelection} = this.state;
        const mode = rowSelection.mode;
        const selectedRowKeys = rowSelection.selectedRowKeys;
        rowSelection.mode = mode === 'single' ? 'multiple' : 'single';
        rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];
        this.setState({ rowSelection });
    }
    modifyDataSource() {
        this.setState({
            dataSource: dataSource(9, 14)
        });
    }
    render () {
        return (
            <div>
                <p>
                    <Button onClick={this.clear.bind(this)}>Clear Selection</Button>&nbsp;
                    <Button onClick={this.changeMode.bind(this)}>Change mode</Button>&nbsp;
                    <Button onClick={this.toggleLoading.bind(this)}>Toggle loading</Button>&nbsp;
                    <Button onClick={this.modifyDataSource.bind(this)}>Modify dataSource</Button>
                </p>
                <Table dataSource={this.state.dataSource}
                    loading={this.state.loading}
                    rowSelection={this.state.rowSelection}>
                    <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>
            </div>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

排序与过滤

示例演示了排序和过滤的特性

查看源码在线预览

import { Table, Button, Icon } from '@alifd/next';
const dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
                id: 100306660940 + i,
                time: 2000 + i
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a href="javascript:;">Remove({record.id})</a>;
    };
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: dataSource(),
            filterMode: 'multiple'
        };
    }
    onSort(dataIndex, order) {
        const dataSource = this.state.dataSource.sort(function(a, b) {
            const result = a[dataIndex] - b[dataIndex];
            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);
        });
        this.setState({
            dataSource,
            sort: {id: order}
        });
    }
    onFilter(filterParams) {
        let ds = dataSource();
        Object.keys(filterParams).forEach(key => {
            const selectedKeys = filterParams[key].selectedKeys;
            if (selectedKeys.length) {
                ds = ds.filter(record => {
                    return selectedKeys.some(value => {
                        return record[key].indexOf(value) > -1;
                    });
                });
            }
        });
        this.setState({dataSource: ds});
    }
    changeMode() {
        this.setState({
            filterMode: 'single'
        });
    }
    render() {
        const filters = [{
            label: 'Nano 3',
            value: 3
        }, {
            label: 'Nano 678',
            value: 678,
            children: [{
                label: 'Nano 67',
                value: 67,
                children: [{
                    label: 'Nano 6',
                    value: 6
                }, {
                    label: 'Nano 7',
                    value: 7
                }]
            }, {
                label: 'Nano 8',
                value: 8
            }]
        }, {
            label: 'Other',
            value: 'other',
            children: [{
                label: 'Nano 4',
                value: 4
            }, {
                label: 'Nano 5',
                value: 5
            }]
        }];
        return (
            <div>
                <p><Button onClick={this.changeMode.bind(this)}>Change filter menu to single select</Button></p>
                <Table dataSource={this.state.dataSource}
                    onSort={this.onSort.bind(this)}
                    onFilter={this.onFilter.bind(this)}>
                    <Table.Column title="Id" dataIndex="id" sortable/>
                    <Table.Column title="Title" dataIndex="title" filters={filters} filterMode={this.state.filterMode}/>
                    <Table.Column title="Time" dataIndex="time"/>
                    <Table.Column cell={render} width={200}/>
                </Table>
                <br />
                Customize sortIcons:
                <br />
                <Table dataSource={[]}
                    onSort={() => {}}
                    sortIcons={{
                        desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />,
                        asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />
                    }}>
                    <Table.Column title="Id" dataIndex="id" sortable/>
                    <Table.Column title="Title" dataIndex="title" filters={filters} filterMode={this.state.filterMode}/>
                    <Table.Column title="Time" dataIndex="time"/>
                </Table>
            </div>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

选择框属性

通过 rowSelection.getProps 来控制选择框属性

查看源码在线预览

import { Table } from '@alifd/next';
const onChange = function(...args) {
        console.log(...args);
    },
    dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: {
                    name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`
                },
                id: 100306660940 + i,
                time: 2000 + i
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a>Remove({record.id})</a>;
    },
    rowSelection = {
        onChange: onChange,
        getProps: (record) => {
            return {
                disabled: record.id === 100306660942
            };
        }
    };
ReactDOM.render(<Table dataSource={dataSource()}
    rowSelection={rowSelection}>
    <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>, mountNode);

可展开

可以通过 expandedRowRender 额外渲染行

查看源码在线预览

import { Table, Button } from '@alifd/next';
const dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
                id: 100306660940 + i,
                time: 2000 + i
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a>Remove({record.id})</a>;
    };
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: dataSource()
        };
    }
    onSort(dataIndex, order) {
        const dataSource = this.state.dataSource.sort(function(a, b) {
            const result = a[dataIndex] - b[dataIndex];
            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);
        });
        this.setState({
            dataSource
        });
    }
    toggleIndent() {
        this.setState({
            expandedRowIndent: [2, 1]
        });
    }
    toggleCol() {
        this.setState({
            hasExpandedRowCtrl: false
        });
    }
    render() {
        return (<div>
            <p>
                <Button onClick={this.toggleIndent.bind(this)}> Update indent </Button>
            </p>
            <Table dataSource={this.state.dataSource}
                isZebra={this.state.isZebra}
                hasBorder={false}
                onSort={this.onSort.bind(this)}
                expandedRowRender={(record) => record.title}
                onRowClick={() => console.log('rowClick')}
                onExpandedRowClick={() => console.log('expandedRowClick')}
                expandedRowIndent={this.state.expandedRowIndent}
            >
                <Table.Column title="Id" dataIndex="id" sortable/>
                <Table.Column title="Title" dataIndex="title"/>
                <Table.Column title="Time" dataIndex="time"/>
                <Table.Column cell={render} width={200}/>
            </Table>
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

可展开-复杂

可以通过 expandedRowRender 额外渲染行，但是会包含复杂的组件, 可通过 expandedIndexSimulate 设置 index 类型

查看源码在线预览

import { Table, Button } from '@alifd/next';
/*eslint-disable react/prop-types, react/no-multi-comp*/
class ExpandedApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: this.props.dataSource
        };
    }
    load() {
        let {dataSource} = this.state;
        dataSource = dataSource.concat(dataSource);
        this.setState({dataSource});
    }
    render() {
        const style = {
            borderTop: '1px solid #eee',
            textAlign: 'center',
            background: '#f8f8f8',
            lineHeight: '28px'
        };
        return (
            <div style={{marginTop: 10}}>
                <Table dataSource={this.state.dataSource} hasHeader={false} hasBorder={false}>
                    <Table.Column title="Title" dataIndex="title"/>
                    <Table.Column title="Time" dataIndex="time" width={200}/>
                </Table>
                <p style={style}
                    onClick={this.load.bind(this)}>{this.props.index}: Load more data. </p>
            </div>
        );
    }
}
const dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,
                id: 100306660940 + i,
                time: 2000 + i,
                children: [{
                    title: `Sub title for Quotation ${3 + i}`,
                    time: 2000 + i
                }, {
                    title: `Sub2 title for Quotation ${3 + i}`,
                    time: 2000 + i
                }]
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a>Remove({record.id})</a>;
    },
    expandedRowRender = (record, index) => {
        const children = record.children;
        return <ExpandedApp dataSource={children} index={index}/>;
    };
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: dataSource(),
            hasBorder: false,
            openRowKeys: []
        };
    }
    onSort(dataIndex, order) {
        const dataSource = this.state.dataSource.sort(function(a, b) {
            const result = a[dataIndex] - b[dataIndex];
            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);
        });
        this.setState({
            dataSource
        });
    }
    disabledExpandedCol() {
        this.setState({
            getExpandedColProps: (record, index) => {
                console.log(index);
                if (index === 3) {
                    return {
                        disabled: true
                    };
                }
            }
        });
    }
    toggleCol() {
        this.setState({
            hasExpandedRowCtrl: false
        });
    }
    onRowOpen(openRowKeys) {
        this.setState({ openRowKeys});
    }
    toggleExpand(record) {
        const key = record.id,
            { openRowKeys } = this.state,
            index = openRowKeys.indexOf(key);
        if (index > -1) {
            openRowKeys.splice(index, 1);
        } else {
            openRowKeys.push(key);
        }
        this.setState({
            openRowKeys: openRowKeys
        });
    }
    rowProps(record, index) {
        console.log('rowProps', record, index);
        return {className: `next-myclass-${index}`};
    }
    onExpandedRowClick(record, index) {
        console.log('onExpandedRowClick', record, index);
    }
    render() {
        const renderTitle = (value, index, record) => {
            return <div>{value}<span onClick={this.toggleExpand.bind(this, record)}>index:{index} +++++</span></div>;
        };
        return (
            <span>
                <p> <Button onClick={this.disabledExpandedCol.bind(this)}> disable fourth row </Button> &nbsp;
                    <Button onClick={this.toggleCol.bind(this)}> hide + </Button></p>
                <Table dataSource={this.state.dataSource}
                    expandedIndexSimulate
                    isZebra={this.state.isZebra}
                    hasBorder={this.state.hasBorder}
                    onSort={this.onSort.bind(this)}
                    expandedRowRender={expandedRowRender}
                    expandedRowIndent={[1, 1]}
                    openRowKeys={this.state.openRowKeys}
                    getExpandedColProps={this.state.getExpandedColProps}
                    hasExpandedRowCtrl={this.state.hasExpandedRowCtrl}
                    onRowOpen={this.onRowOpen.bind(this)}
                    rowProps={this.rowProps.bind(this)}
                    onExpandedRowClick={this.onExpandedRowClick.bind(this)}
                >
                    <Table.Column title="Id" dataIndex="id" sortable/>
                    <Table.Column title="Title" dataIndex="title" cell={renderTitle}/>
                    <Table.Column title="Time" dataIndex="time" width={200}/>
                    <Table.Column cell={render} width={200}/>
                </Table>
            </span>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

行列合并

通过 cellProps 进行列合并。

查看源码在线预览

import { Table } from '@alifd/next';
const onRowClick = function (record, index, e) {
        console.log(record, index, e);
    },
    dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
                id: 100306660940 + i,
                time: 2000 + i
            });
        }
        return result;
    },
    render = (value, index, record) => {
        return <a>Remove({record.id})</a>;
    },
    cellProps = (rowIndex, colIndex) => {
        if (rowIndex === 2 && colIndex === 1) {
            return {
                colSpan: 2,
                rowSpan: 3
            };
        }
        if (rowIndex === 1 && colIndex === 2) {
            return {
                colSpan: 2,
                rowSpan: 1
            };
        }
    };
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>, mountNode);

增删改查

演示对表格的增删改查

查看源码在线预览

import { Table, Button } from '@alifd/next';
const onRowClick = function(record, index, e) {
        console.log(record, index, e);
    },
    dataSource = () => {
        const result = [];
        for (let i = 0; i < 5; i++) {
            result.push({
                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
                id: 100306660940 + i,
                time: 2000 + i
            });
        }
        return result;
    };
class App extends React.Component {
    state = {
        dataSource: dataSource()
    }
    onAdd = () => {
        const {dataSource} = this.state;
        dataSource.push({
            title: {
                name: 'Quotation for 1PCS Nano controller compatible'
            },
            id: Date.now(),
            time: 2000
        });
        this.setState({
            dataSource
        });
    }
    onRemove = (id) => {
        const {dataSource} = this.state;
        let index = -1;
        dataSource.forEach((item, i) => {
            if (item.id === id) {
                index = i;
            }
        });
        if (index !== -1) {
            dataSource.splice(index, 1);
            this.setState({
                dataSource
            });
        }
    }
    render() {
        const renderOper = (value, index, record) => {
            return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;
        };
        return (<div>
            <p><Button onClick={this.onAdd}>Add Item</Button></p>
            <Table dataSource={this.state.dataSource} onRowClick={onRowClick}>
                <Table.Column title="Id" dataIndex="id"/>
                <Table.Column title="Title" dataIndex="title.name" />
                <Table.Column title="Time" dataIndex="time"/>
                <Table.Column cell={renderOper} width="20%"/>
            </Table>
        </div>);
    }
}
ReactDOM.render(<App/>, mountNode);

固定表头

表格可以固定表头,支持sticky方式

查看源码在线预览

import { Table, Button } from '@alifd/next';
const dataSource = (length) => {
    const result = [];
    for (let i = 0; i < length; i++) {
        result.push({
            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},
            id: 100306660940 + i,
            time: 2000 + i
        });
    }
    return result;
};
class App extends React.Component {
    state = {
        sticky: false,
        lock: false,
        dataSource: dataSource(50),
    }
    onSwitch(tag) {
        const props = {};
        switch (tag) {
            case 'sticky':
                props.sticky = true;
                break;
            case 'lock':
                props.lock = true;
                break;
            case 'dataSource':
                props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);
                break;
            default:
                break;
        }
        this.setState(props);
    }
    render() {
        return (<div>
            <p>
                <Button onClick={this.onSwitch.bind(this, 'sticky')}>enable sticky</Button>  &nbsp;
                <Button onClick={this.onSwitch.bind(this, 'lock')}>enable lock</Button>  &nbsp;
                <Button onClick={this.onSwitch.bind(this, 'dataSource')}>toggle dataSource</Button>
            </p>
            <Table dataSource={this.state.dataSource} fixedHeader stickyHeader={this.state.sticky}>
                <Table.Column title="Id" dataIndex="id" width={200} lock={this.state.lock}/>
                <Table.Column title="Title" dataIndex="title.name" width={200}/>
                <Table.Column title="Time" dataIndex="time" width={200}/>
            </Table>
        </div>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

分组列表

分组列表展现

查看源码在线预览

import { Table, Button } from '@alifd/next';
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 (<div className="media">
            <img src={product[0].avatar} className="media-side"/>
            <div className="media-content">{product[0].title}</div>
        </div>);
    },
    priceRender = function(price) {
        return <b>{price}</b>;
    },
    statusRender = function(status) {
        if (status) {
            return 'Already Priced';
        } else {
            return 'No Priced';
        }
    },
    operRender = function() {
        return <a href="javascript:;">View</a>;
    },
    groupHeaderRender = function(record) {
        return <div>{record.product[0].title}</div>;
    },
    rowSelection = {
        onChange: function(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 (
            <div>
                <p><Button onClick={this.toggleGroupSelection}>Toggle GroupHeader Selection</Button></p>
                <Table dataSource={dataSource} rowSelection={rowSelection} cellProps={cellProps}>
                    <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="Operation" width={100}/>
                </Table>
            </div>
        );
    }
}
ReactDOM.render(<App/>, mountNode);