ant-design/components/table/demo/basic.md

67 lines
1.1 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 0
2016-08-15 07:54:01 +08:00
title:
en-US: Basic Usage
zh-CN: 基本用法
2016-03-31 09:40:55 +08:00
---
2015-07-09 11:41:36 +08:00
2016-08-15 07:54:01 +08:00
## zh-CN
简单的表格,最后一列是各种操作。
2015-07-09 11:41:36 +08:00
2016-08-15 08:07:03 +08:00
## en-US
Simple table with actions.
2016-08-15 08:07:03 +08:00
2017-01-19 15:19:03 +08:00
````__react
import { Table, Icon } from 'antd';
2015-10-02 16:31:51 +08:00
const columns = [{
title: 'Name',
2015-07-15 10:47:47 +08:00
dataIndex: 'name',
2015-12-16 16:35:56 +08:00
key: 'name',
render: text => <a href="#">{text}</a>,
2015-07-09 11:41:36 +08:00
}, {
title: 'Age',
2015-12-16 16:35:56 +08:00
dataIndex: 'age',
key: 'age',
2015-07-09 14:51:48 +08:00
}, {
title: 'Address',
2015-12-16 16:35:56 +08:00
dataIndex: 'address',
key: 'address',
}, {
title: 'Action',
key: 'action',
2016-05-06 20:59:09 +08:00
render: (text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
2016-08-23 21:00:35 +08:00
<span className="ant-divider" />
<a href="#">Delete</a>
2016-08-23 21:00:35 +08:00
<span className="ant-divider" />
2016-05-06 20:59:09 +08:00
<a href="#" className="ant-dropdown-link">
2016-12-04 17:47:45 +08:00
More actions <Icon type="down" />
2016-05-06 20:59:09 +08:00
</a>
</span>
),
2015-07-09 11:41:36 +08:00
}];
2016-05-06 20:59:09 +08:00
const data = [{
2015-08-28 15:22:09 +08:00
key: '1',
name: 'John Brown',
2015-07-09 14:51:48 +08:00
age: 32,
address: 'New York No. 1 Lake Park',
2015-07-09 11:41:36 +08:00
}, {
2015-08-28 15:22:09 +08:00
key: '2',
name: 'Jim Green',
2015-07-09 14:51:48 +08:00
age: 42,
address: 'London No. 1 Lake Park',
2015-07-09 11:41:36 +08:00
}, {
2015-08-28 15:22:09 +08:00
key: '3',
name: 'Joe Black',
2015-07-09 14:51:48 +08:00
age: 32,
address: 'Sidney No. 1 Lake Park',
2015-07-09 11:41:36 +08:00
}];
2016-03-24 17:57:03 +08:00
ReactDOM.render(<Table columns={columns} dataSource={data} />, mountNode);
2015-07-09 11:41:36 +08:00
````