蚂蚁金服antd-Table-基本用法

/**
 * Created by mapbar_front on 2018/1/27.
 */

import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';

const data = [{
    key: 1,
    name: '天下',
    age: 18,
    hobby: '看书',
    address: '甘肃省',
},{
    key: 2,
    name: '晓晓',
    age: 22,
    hobby: '旅游',
    address: '华池县',
},{
    key: 3,
    name: '远远',
    age: 18,
    hobby: '远方',
    address: '武汉市',
},{
    key: 4,
    name: '青菜',
    age: 23,
    hobby: '跳舞',
    address: '黄冈市',
}]

const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: text => <a href="#"> { text } </a>
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
},{
    title: '爱好',
    dataIndex: 'hobby',
    key: 'hobby',
},{
    title: '地址',
    dataIndex: 'address',
    key: 'address',

    // render: (text,record) =>{
    //     console.log('text',text); //text为地址的每一项，甘肃省、华池县、武汉市、黄冈市
    //     console.log('record',record);//record 为多个个对象，例如第一个对象为：{ name: '天下',age: 18,hobby: '看书',address: '甘肃省' }
    // }

    render: (text,record)=>(
        <span>
            <a>address-- { record.address }</a>
            <Divider type="vertical"></Divider>
            <a href="#">delete</a>
            <Divider type="vertical"></Divider>
            <a className="antd-dropDown-link">
                More actions <Icon type="down" />
            </a>
        </span>
    )
}]

class BasicUse extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    render() {
        return (
            <div>
                <h2>基本用法</h2>
                <Table dataSource={ data } columns={ columns }/>
            </div>
        )
    }
}
export default BasicUse;