You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
---
order: 1
title:
en-US: JSX style API
zh-CN: JSX 风格的 API
---
## zh-CN
使用 JSX 风格的 API（
> 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
## en-US
Using JSX style API (introduced in 2.5.0)
> Since this is just a syntax sugar for the prop `columns`, you can't compose `Column` and `ColumnGroup` with other Components.
````jsx
import { Table, Icon, Divider } 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(
< 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 = "javascript:;" > Action 一 {record.name}</ a >
< Divider type = "vertical" />
< a href = "javascript:;" > Delete</ a >
< Divider type = "vertical" />
< a href = "javascript:;" className = "ant-dropdown-link" >
More actions < Icon type = "down" />
</ a >
</ span >
)}
/>
</ Table >
, mountNode);
````