2016-11-02 15:09:54 +08:00
|
|
|
---
|
2018-07-24 17:41:01 +08:00
|
|
|
order: 27
|
2016-11-02 15:09:54 +08:00
|
|
|
title:
|
|
|
|
en-US: Dynamic Settings
|
|
|
|
zh-CN: 动态控制表格属性
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
选择不同配置组合查看效果。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Select different settings to see the result.
|
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2017-08-19 12:39:11 +08:00
|
|
|
import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2016-11-02 15:09:54 +08:00
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
|
|
|
const columns = [{
|
|
|
|
title: 'Name',
|
|
|
|
dataIndex: 'name',
|
|
|
|
key: 'name',
|
2016-11-09 20:16:57 +08:00
|
|
|
width: 150,
|
2018-04-11 15:15:24 +08:00
|
|
|
render: text => <a href="javascript:;">{text}</a>,
|
2016-11-02 15:09:54 +08:00
|
|
|
}, {
|
|
|
|
title: 'Age',
|
|
|
|
dataIndex: 'age',
|
|
|
|
key: 'age',
|
2016-11-14 14:26:08 +08:00
|
|
|
width: 70,
|
2016-11-02 15:09:54 +08:00
|
|
|
}, {
|
|
|
|
title: 'Address',
|
|
|
|
dataIndex: 'address',
|
|
|
|
key: 'address',
|
|
|
|
}, {
|
|
|
|
title: 'Action',
|
|
|
|
key: 'action',
|
2016-11-14 14:26:08 +08:00
|
|
|
width: 360,
|
2016-11-02 15:09:54 +08:00
|
|
|
render: (text, record) => (
|
|
|
|
<span>
|
2018-04-11 15:15:24 +08:00
|
|
|
<a href="javascript:;">Action 一 {record.name}</a>
|
2017-08-19 12:39:11 +08:00
|
|
|
<Divider type="vertical" />
|
2018-04-11 15:15:24 +08:00
|
|
|
<a href="javascript:;">Delete</a>
|
2017-08-19 12:39:11 +08:00
|
|
|
<Divider type="vertical" />
|
2018-04-11 15:15:24 +08:00
|
|
|
<a href="javascript:;" className="ant-dropdown-link">
|
2016-12-04 17:47:45 +08:00
|
|
|
More actions <Icon type="down" />
|
2016-11-02 15:09:54 +08:00
|
|
|
</a>
|
|
|
|
</span>
|
|
|
|
),
|
|
|
|
}];
|
|
|
|
|
2016-11-09 20:16:57 +08:00
|
|
|
const data = [];
|
|
|
|
for (let i = 1; i <= 10; i++) {
|
|
|
|
data.push({
|
|
|
|
key: i,
|
|
|
|
name: 'John Brown',
|
|
|
|
age: `${i}2`,
|
|
|
|
address: `New York No. ${i} Lake Park`,
|
|
|
|
description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,
|
|
|
|
});
|
|
|
|
}
|
2016-11-02 15:09:54 +08:00
|
|
|
|
|
|
|
const expandedRowRender = record => <p>{record.description}</p>;
|
|
|
|
const title = () => 'Here is title';
|
2016-12-27 17:47:27 +08:00
|
|
|
const showHeader = true;
|
2016-11-02 15:09:54 +08:00
|
|
|
const footer = () => 'Here is footer';
|
2016-11-09 20:16:57 +08:00
|
|
|
const scroll = { y: 240 };
|
2018-03-15 14:26:28 +08:00
|
|
|
const pagination = { position: 'bottom' };
|
2016-11-02 15:09:54 +08:00
|
|
|
|
|
|
|
class Demo extends React.Component {
|
|
|
|
state = {
|
2016-11-14 14:26:08 +08:00
|
|
|
bordered: false,
|
2016-11-03 10:27:34 +08:00
|
|
|
loading: false,
|
2018-03-02 14:12:30 +08:00
|
|
|
pagination,
|
2016-11-03 10:27:34 +08:00
|
|
|
size: 'default',
|
2016-11-02 15:09:54 +08:00
|
|
|
expandedRowRender,
|
2018-03-15 14:26:28 +08:00
|
|
|
title: undefined,
|
2016-12-27 17:47:27 +08:00
|
|
|
showHeader,
|
2016-11-02 15:09:54 +08:00
|
|
|
footer,
|
2016-11-09 20:16:57 +08:00
|
|
|
rowSelection: {},
|
2016-11-15 20:06:41 +08:00
|
|
|
scroll: undefined,
|
2018-09-17 14:36:26 +08:00
|
|
|
hasData: true,
|
2016-11-02 15:09:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
handleToggle = (prop) => {
|
2016-11-03 10:27:34 +08:00
|
|
|
return (enable) => {
|
|
|
|
this.setState({ [prop]: enable });
|
2016-11-02 15:09:54 +08:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2016-11-03 10:27:34 +08:00
|
|
|
handleSizeChange = (e) => {
|
|
|
|
this.setState({ size: e.target.value });
|
2016-11-02 15:09:54 +08:00
|
|
|
}
|
|
|
|
|
2016-11-03 10:27:34 +08:00
|
|
|
handleExpandChange = (enable) => {
|
2017-10-23 11:20:16 +08:00
|
|
|
this.setState({ expandedRowRender: enable ? expandedRowRender : undefined });
|
2016-11-02 15:09:54 +08:00
|
|
|
}
|
|
|
|
|
2016-11-03 10:27:34 +08:00
|
|
|
handleTitleChange = (enable) => {
|
|
|
|
this.setState({ title: enable ? title : undefined });
|
2016-11-02 15:09:54 +08:00
|
|
|
}
|
|
|
|
|
2016-12-27 17:47:27 +08:00
|
|
|
handleHeaderChange = (enable) => {
|
|
|
|
this.setState({ showHeader: enable ? showHeader : false });
|
|
|
|
}
|
|
|
|
|
2016-11-03 10:27:34 +08:00
|
|
|
handleFooterChange = (enable) => {
|
|
|
|
this.setState({ footer: enable ? footer : undefined });
|
2016-11-02 15:09:54 +08:00
|
|
|
}
|
|
|
|
|
2016-11-09 20:16:57 +08:00
|
|
|
handleRowSelectionChange = (enable) => {
|
|
|
|
this.setState({ rowSelection: enable ? {} : undefined });
|
|
|
|
}
|
|
|
|
|
|
|
|
handleScollChange = (enable) => {
|
|
|
|
this.setState({ scroll: enable ? scroll : undefined });
|
|
|
|
}
|
|
|
|
|
2018-09-17 14:36:26 +08:00
|
|
|
handleDataChange = (hasData) => {
|
|
|
|
this.setState({ hasData });
|
|
|
|
}
|
|
|
|
|
2018-03-15 14:26:28 +08:00
|
|
|
handlePaginationChange = (e) => {
|
|
|
|
const { value } = e.target;
|
|
|
|
this.setState({
|
|
|
|
pagination: value === 'none' ? false : { position: value },
|
|
|
|
});
|
2018-03-02 12:35:25 +08:00
|
|
|
}
|
|
|
|
|
2016-11-02 15:09:54 +08:00
|
|
|
render() {
|
2016-11-03 10:27:34 +08:00
|
|
|
const state = this.state;
|
2016-11-02 15:09:54 +08:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div className="components-table-demo-control-bar">
|
2017-03-02 10:49:06 +08:00
|
|
|
<Form layout="inline">
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="Bordered">
|
|
|
|
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="loading">
|
|
|
|
<Switch checked={state.loading} onChange={this.handleToggle('loading')} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="Title">
|
2016-11-15 20:06:41 +08:00
|
|
|
<Switch checked={!!state.title} onChange={this.handleTitleChange} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2016-12-27 17:47:27 +08:00
|
|
|
<FormItem label="Column Header">
|
|
|
|
<Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
|
|
|
|
</FormItem>
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="Footer">
|
2016-11-15 20:06:41 +08:00
|
|
|
<Switch checked={!!state.footer} onChange={this.handleFooterChange} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="Expandable">
|
2016-11-15 20:06:41 +08:00
|
|
|
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2016-11-15 20:06:41 +08:00
|
|
|
<FormItem label="Checkbox">
|
|
|
|
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
|
2016-11-09 20:16:57 +08:00
|
|
|
</FormItem>
|
|
|
|
<FormItem label="Fixed Header">
|
2016-11-15 20:06:41 +08:00
|
|
|
<Switch checked={!!state.scroll} onChange={this.handleScollChange} />
|
2016-11-09 20:16:57 +08:00
|
|
|
</FormItem>
|
2018-09-17 14:36:26 +08:00
|
|
|
<FormItem label="Has Data">
|
|
|
|
<Switch checked={!!state.hasData} onChange={this.handleDataChange} />
|
|
|
|
</FormItem>
|
2016-11-03 10:27:34 +08:00
|
|
|
<FormItem label="Size">
|
2016-11-14 14:26:08 +08:00
|
|
|
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
|
2016-11-03 10:27:34 +08:00
|
|
|
<Radio.Button value="default">Default</Radio.Button>
|
|
|
|
<Radio.Button value="middle">Middle</Radio.Button>
|
|
|
|
<Radio.Button value="small">Small</Radio.Button>
|
|
|
|
</Radio.Group>
|
2016-11-02 15:09:54 +08:00
|
|
|
</FormItem>
|
2018-03-15 14:26:28 +08:00
|
|
|
<FormItem label="Pagination">
|
|
|
|
<Radio.Group
|
|
|
|
value={state.pagination ? state.pagination.position : 'none'}
|
|
|
|
onChange={this.handlePaginationChange}
|
|
|
|
>
|
|
|
|
<Radio.Button value="top">Top</Radio.Button>
|
|
|
|
<Radio.Button value="bottom">Bottom</Radio.Button>
|
|
|
|
<Radio.Button value="both">Both</Radio.Button>
|
|
|
|
<Radio.Button value="none">None</Radio.Button>
|
|
|
|
</Radio.Group>
|
|
|
|
</FormItem>
|
2016-11-02 15:09:54 +08:00
|
|
|
</Form>
|
|
|
|
</div>
|
2018-09-17 14:36:26 +08:00
|
|
|
<Table {...this.state} columns={columns} dataSource={state.hasData ? data : null} />
|
2016-11-02 15:09:54 +08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ReactDOM.render(<Demo />, mountNode);
|
|
|
|
````
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.components-table-demo-control-bar {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
2016-11-03 10:27:34 +08:00
|
|
|
.components-table-demo-control-bar .ant-form-item {
|
|
|
|
margin-right: 16px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
2016-11-02 15:09:54 +08:00
|
|
|
</style>
|