Table 表格

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)

性能问题#

由于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的重新渲染。

解决方式如下:

1. 将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)
       }
   }

2. 通过设置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#

Table的子元素必须是下面三个元素中的一种

rowSelection#

Table.Column#

Table.ColumnGroup#

Table.GroupHeader#

如果Table的子元素包含GroupHeader，则开启GroupList模式