Table 表格

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

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

基本使用

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

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

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)

列配置

Table.Column提供了非常多的配置属性用于自定义列，最常见的就是使用cell自定义单元格的渲染逻辑. 其他的配置选项可以参考下面的Table.Column的API

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

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来创建有多个表头的表格

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)

已知问题

GroupList不支持在Hover状态和选中状态下显示背景色

无法完全支持在锁列的情况下合并单元格

无法支持在锁列的区域和非锁列的区域内合并单元格

性能问题

由于React的机制问题，在做与Table无关的更新的时候，可能会导致diff计算花费大量的时间，

在你确认只有props和state才能影响Table渲染的情况下，可以设置optimization为true来开启, 原理就是通过

shouldComponentUpdate的生命周期来对比props和state的变更，开启了该选项后可能导致下面的副作用。

class App extends React.Component{
    state = {
        extra: 'abc'
    }
    cellRender = (value) => {
        return value + this.state.extra;
    }
    render(){
        return <Table dataSource={[{id: 1}]}>
            <Table.Column cell={this.cellRender} dataIndex="id"/>
        </Table>
    }
    componentDidMount(){
        setTimeout(() => {
            this.setState({
                extra: 'bcd'
            })
        },1000)
    }
}

上面的代码在componentDidMount之后的setState虽然更新了extra, 但是并不会触发Table的重新渲染。

解决方式如下:

• 将cellRender访问的state通过props的方式传入。

class App extends React.Component{
    state = {
        extra: 'abc'
    }
    cellRender = (value, index, record, context) => {
        return value + context.props.extra;
    }
    render(){
        return <Table dataSource={[{id: 1}]} extra={this.state.extra}>
            <Table.Column cell={this.cellRender} dataIndex="id"/>
        </Table>
    }
    componentDidMount(){
        setTimeout(() => {
            this.setState({
                extra: 'bcd'
            })
        },1000)
    }
}

• 通过设置optimization为false来关闭Table的shouldComponentUpdate配置。

class App extends React.Component{
    state = {
        extra: 'abc'
    }
    cellRender = (value, index, record, context) => {
        return value + this.state.extra;
    }
    render(){
        return <Table dataSource={[{id: 1}]} optimization={false}>
            <Table.Column cell={this.cellRender} dataIndex="id"/>
        </Table>
    }
    componentDidMount(){
        setTimeout(() => {
            this.setState({
                extra: 'bcd'
            })
        },1000)
    }
}

API

表格

Table.ColumnGroup

Table.Column

Table.GroupHeader

代码示例

简单

简单的表格渲染

查看源码在线预览

import { Table } from "@icedesign/base";
const onRowClick = function(record, index, e) {
    console.log(record, index, e);
  },
  getData = () => {
    let 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>;
  };
ReactDOM.render(
  <Table dataSource={getData()} onRowClick={onRowClick}>
    <Table.Column title="Id" dataIndex="id" />
    <Table.Column title="Title" dataIndex="title.name" />
    <Table.Column title="Time" dataIndex="time" />
    <Table.Column cell={render} width="40%" />
  </Table>,
  mountNode
);

选择可控

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

查看源码在线预览

import { Table, Button } from "@icedesign/base";
const getData = () => {
    let 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>;
  };
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: [],
        getProps: record => {
          return {
            disabled: record.id === 100306660941
          };
        }
      },
      dataSource: getData(0, 5)
    };
  }
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.clear.bind(this)}>Clear Selection</Button>&nbsp;
          <Button onClick={this.changeMode.bind(this)}>
            Switch single 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}
          isLoading={this.state.isLoading}
          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>
    );
  }
  onChange(ids, records) {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = ids;
    console.log("onChange", ids, records);
    this.setState({ rowSelection });
  }
  clear() {
    let { rowSelection } = this.state;
    rowSelection.selectedRowKeys = [];
    this.setState({ rowSelection });
  }
  toggleLoading() {
    this.setState({ isLoading: !this.state.isLoading });
  }
  changeMode() {
    let { rowSelection } = this.state;
    rowSelection.mode = "single";
    this.setState({ rowSelection });
  }
  modifyDataSource() {
    this.setState({
      dataSource: getData(9, 14)
    });
  }
}
ReactDOM.render(<App />, mountNode);

行列合并

通过getCellProps进行列合并。

查看源码在线预览

import { Table } from "@icedesign/base";
const onRowClick = function(record, index, e) {
    console.log(record, index, e);
  },
  getData = () => {
    let 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>;
  },
  getCellProps = (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={getData()}
    onRowClick={onRowClick}
    getCellProps={getCellProps}
  >
    <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, Dialog, Checkbox } from "@icedesign/base";
const { Group } = Checkbox;
const getData = () => {
    let 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;
  },
  cols = [
    {
      title: "id",
      dataIndex: "id"
    },
    {
      title: "Title",
      dataIndex: "title"
    },
    {
      title: "Time",
      dataIndex: "time"
    }
  ];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: getData(),
      cols: cols
    };
  }
  openDialog = () => {
    Dialog.alert({
      needWrapper: false,
      content: this.renderControlContent(),
      title: "选择需要显示的列",
      onOk: () => {
        this.setState({
          cols: this.changedCols
        });
      }
    });
  };
  renderControlContent() {
    const groupSource = cols.map(col => {
        return {
          label: col.title,
          value: col.dataIndex
        };
      }),
      defaultValue = this.state.cols.map(col => col.dataIndex);
    return (
      <Group
        dataSource={groupSource}
        onChange={this.onChange}
        defaultValue={defaultValue}
      />
    );
  }
  onChange = value => {
    this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);
  };
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.openDialog}> 选择显示的列数 </Button>
        </p>
        <Table dataSource={this.state.dataSource}>{this.renderCols()}</Table>
      </div>
    );
  }
  renderCols() {
    const { cols } = this.state;
    return cols.map(col => {
      return (
        <Table.Column
          title={col.title}
          dataIndex={col.dataIndex}
          key={col.dataIndex}
        />
      );
    });
  }
}
ReactDOM.render(<App />, mountNode);

增删改查

演示对表格的增删改查

查看源码在线预览

import { Table, Button } from "@icedesign/base";
const onRowClick = function(record, index, e) {
    console.log(record, index, e);
  },
  getData = () => {
    let 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: getData()
  };
  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>
    );
  }
  onAdd = () => {
    // 注意在没有通过shouldComponentUpdate判断的时候可以使用此写法
    // 否则注意数组和对象的引用关系
    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
      });
    }
  };
}
ReactDOM.render(<App />, mountNode);

可展开-复杂

可以通过 expandedRowRender 额外渲染行，但是会包含复杂的组件

查看源码在线预览

import { Table, Button } from "@icedesign/base";
/*eslint-disable react/prop-types, react/no-multi-comp*/
class ExpandedApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: this.props.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)}>
          Load more data.
        </p>
      </div>
    );
  }
  load() {
    let { dataSource } = this.state;
    dataSource = dataSource.concat(dataSource);
    this.setState({ dataSource });
  }
}
const getData = () => {
    let 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 => {
    let children = record.children;
    return <ExpandedApp dataSource={children} />;
  };
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: getData(),
      hasBorder: false,
      expandedRowKeys: []
    };
  }
  render() {
    const renderTitle = (value, index, record) => {
      return (
        <div>
          {value}
          <span onClick={this.toggleExpand.bind(this, record)}>+++++</span>
        </div>
      );
    };
    return (
      <span>
        <p>
          {" "}
          <Button onClick={this.disabledExpandedCol.bind(this)}>
            {" "}
            设置第4行禁用{" "}
          </Button>{" "}
          &nbsp;
          <Button onClick={this.toggleCol.bind(this)}> 隐藏+号 </Button>
        </p>
        <Table
          dataSource={this.state.dataSource}
          isZebra={this.state.isZebra}
          hasBorder={this.state.hasBorder}
          onSort={this.onSort.bind(this)}
          expandedRowRender={expandedRowRender}
          expandedRowIndent={[1, 1]}
          expandedRowKeys={this.state.expandedRowKeys}
          getExpandedColProps={this.state.getExpandedColProps}
          hasExpandedRowCtrl={this.state.hasExpandedRowCtrl}
          onExpandedChange={this.onExpandedChange.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>
    );
  }
  onSort(dataIndex, order) {
    let dataSource = this.state.dataSource.sort(function(a, b) {
      let 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) => {
        if (index === 3) {
          return {
            disabled: true
          };
        }
      }
    });
  }
  toggleCol() {
    this.setState({
      hasExpandedRowCtrl: false
    });
  }
  onExpandedChange(expandedRowKeys) {
    this.setState({ expandedRowKeys });
  }
  toggleExpand(record) {
    let key = record.id,
      { expandedRowKeys } = this.state,
      index = expandedRowKeys.indexOf(key);
    if (index > -1) {
      expandedRowKeys.splice(index, 1);
    } else {
      expandedRowKeys.push(key);
    }
    this.setState({
      expandedRowKeys: expandedRowKeys
    });
  }
}
ReactDOM.render(<App />, mountNode);

可展开

可以通过 expandedRowRender 额外渲染行

查看源码在线预览

import { Table, Button } from "@icedesign/base";
const getData = () => {
    let 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: getData()
    };
  }
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.toggleIndent.bind(this)}>
            {" "}
            设置缩进为左二右一{" "}
          </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>
    );
  }
  onSort(dataIndex, order) {
    let dataSource = this.state.dataSource.sort(function(a, b) {
      let 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
    });
  }
}
ReactDOM.render(<App />, mountNode);

排序与过滤

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

查看源码在线预览

import { Table, Button } from "@icedesign/base";
const getData = () => {
    let 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: getData(),
      filterMode: "multiple"
    };
  }
  render() {
    let filters = [
      {
        label: "Nano 包含3",
        value: 3
      },
      {
        label: "Nano 包含2",
        value: 2,
        children: [
          {
            label: "Nano 包含12",
            value: 22
          },
          {
            label: "Nano 包含23",
            value: 23
          }
        ]
      },
      {
        label: "其他",
        children: [
          {
            label: "Nano 包含4",
            value: 4
          },
          {
            label: "Nano 包含5",
            value: 5
          }
        ]
      }
    ];
    return (
      <div>
        <p>
          <Button onClick={this.changeMode.bind(this)}>
            切换过滤为单选模式
          </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>
      </div>
    );
  }
  onSort(dataIndex, order) {
    let dataSource = this.state.dataSource.sort(function(a, b) {
      let result = a[dataIndex] - b[dataIndex];
      return order === "asc" ? (result > 0 ? 1 : -1) : result > 0 ? -1 : 1;
    });
    this.setState({
      dataSource
    });
  }
  onFilter(filterParams) {
    let dataSource = getData();
    for (let key in filterParams) {
      let selectedKeys = filterParams[key].selectedKeys;
      if (selectedKeys.length) {
        dataSource = dataSource.filter(record => {
          return selectedKeys.some(value => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    }
    this.setState({ dataSource });
  }
  changeMode() {
    this.setState({
      filterMode: "single"
    });
  }
}
ReactDOM.render(<App />, mountNode);

固定表头

表格可以固定表头

查看源码在线预览

import { Table, Button } from "@icedesign/base";
const onRowClick = function(record, index, e) {
    console.log(record, index, e);
  },
  getData = length => {
    let 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;
  },
  render = (value, index, record) => {
    return <a>Remove({record.id})</a>;
  };
class App extends React.Component {
  state = {
    dataSource: getData(10)
  };
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.reduceContent.bind(this)}>切换到2条数据</Button>
        </p>
        <Table
          dataSource={this.state.dataSource}
          onRowClick={onRowClick}
          fixedHeader
        >
          <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>
    );
  }
  reduceContent() {
    this.setState({
      dataSource: getData(2)
    });
  }
}
ReactDOM.render(<App />, mountNode);

分组列表

分组列表展现

查看源码在线预览

import { Table, Button } from "@icedesign/base";
let dataSource = [
    {
      price: "US $2.45",
      status: 0,
      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,
          id: 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 $2.5",
          status: 1,
          id: 3,
          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,
      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"
        }
      ]
    }
  ],
  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>;
  },
  getRowClassName = function(record) {
    if (record.status === 0) {
      return "highlight-row";
    }
  },
  rowSelection = {
    onChange: function(selectedKeys) {
      console.log(selectedKeys);
    }
  };
class App extends React.Component {
  state = {
    hasSelection: false
  };
  render() {
    return (
      <div>
        <p>
          <Button onClick={this.toggleGroupSelection}>
            Toggle GroupHeader Selection
          </Button>
        </p>
        <Table
          dataSource={dataSource}
          getCellProps={(rowIndex, colIndex) => {
            if (
              (colIndex === 3 && rowIndex === 1) ||
              (colIndex === 4 && rowIndex === 1)
            ) {
              return {
                colSpan: 1,
                rowSpan: 2
              };
            }
          }}
          getRowClassName={getRowClassName}
          rowSelection={rowSelection}
        >
          <Table.GroupHeader
            cell={groupHeaderRender}
            hasSelection={this.state.hasSelection}
          />
          <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>
      </div>
    );
  }
  toggleGroupSelection = () => {
    this.setState({
      hasSelection: !this.state.hasSelection
    });
  };
}
ReactDOM.render(<App />, mountNode);