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

87 lines
1.7 KiB
Markdown
Raw Normal View History

---
order: 1
title:
en-US: JSX style API
zh-CN: JSX 风格的 API
---
## zh-CN
使用 JSX 风格的 API2.5.0 以后引入)
2017-01-12 00:03:35 +08:00
> 这个只是一个描述 `columns` 的语法糖,所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
## en-US
Using JSX style API (introduced in 2.5.0)
2017-01-12 00:03:35 +08:00
> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
2017-01-19 15:19:03 +08:00
````__react
import { Table, Icon } from 'antd';
const { Column, ColumnGroup } = Table;
const data = [{
key: '1',
firstName: 'John',
lastName: 'Brown',
age: 32,
address: 'New York No. 1 Lake Park',
}, {
key: '2',
firstName: 'Jim',
lastName: 'Green',
age: 42,
address: 'London No. 1 Lake Park',
}, {
key: '3',
firstName: 'Joe',
lastName: 'Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
}];
ReactDOM.render(
2017-01-10 14:09:19 +08:00
<Table dataSource={data}>
<ColumnGroup title="Name">
<Column
title="First Name"
dataIndex="firstName"
key="firstName"
/>
<Column
title="Last Name"
dataIndex="lastName"
key="lastName"
/>
</ColumnGroup>
<Column
title="Age"
dataIndex="age"
key="age"
/>
<Column
title="Address"
dataIndex="address"
key="address"
/>
<Column
title="Action"
key="action"
render={(text, record) => (
<span>
<a href="#">Action 一 {record.name}</a>
<span className="ant-divider" />
<a href="#">Delete</a>
<span className="ant-divider" />
<a href="#" className="ant-dropdown-link">
2016-12-04 17:47:45 +08:00
More actions <Icon type="down" />
</a>
</span>
)}
/>
</Table>
, mountNode);
````