mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

🎬 Add tableLyout and ellipsis in Table demo

Browse Source
This commit is contained in:
afc163 2019-09-04 18:12:57 +08:00 committed by 偏右
parent 033f812311
commit 251ae17376
3 changed files with 628 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1013
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

132
components/table/demo/dynamic-settings.md
View File

@ -16,21 +16,17 @@ Select different settings to see the result.
```jsx ```jsx
import { Table, Icon, Switch, Radio, Form, Divider } from 'antd'; import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
const FormItem = Form.Item;
const columns = [ const columns = [
{ {
title: 'Name', title: 'Name',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
width: 150,
render: text => <a>{text}</a>, render: text => <a>{text}</a>,
}, },
{ {
title: 'Age', title: 'Age',
dataIndex: 'age', dataIndex: 'age',
key: 'age', key: 'age',
width: 70,
}, },
{ {
title: 'Address', title: 'Address',
@ -40,7 +36,6 @@ const columns = [
{ {
title: 'Action', title: 'Action',
key: 'action', key: 'action',
width: 360,
render: (text, record) => ( render: (text, record) => (
<span> <span>
<a>Action 一 {record.name}</a> <a>Action 一 {record.name}</a>
@ -86,6 +81,7 @@ class Demo extends React.Component {
rowSelection: {}, rowSelection: {},
scroll: undefined, scroll: undefined,
hasData: true, hasData: true,
tableLayout: undefined,
}; };
handleToggle = prop => enable => { handleToggle = prop => enable => {
@ -96,10 +92,18 @@ class Demo extends React.Component {
this.setState({ size: e.target.value }); this.setState({ size: e.target.value });
}; };
handleTableLayoutChange = e => {
this.setState({ tableLayout: e.target.value });
};
handleExpandChange = enable => { handleExpandChange = enable => {
this.setState({ expandedRowRender: enable ? expandedRowRender : undefined }); this.setState({ expandedRowRender: enable ? expandedRowRender : undefined });
}; };
handleEllipsisChange = enable => {
this.setState({ ellipsis: enable });
};
handleTitleChange = enable => { handleTitleChange = enable => {
this.setState({ title: enable ? title : undefined }); this.setState({ title: enable ? title : undefined });
}; };
@ -135,56 +139,71 @@ class Demo extends React.Component {
const { state } = this; const { state } = this;
return ( return (
<div> <div>
<div className="components-table-demo-control-bar"> <Form
<Form layout="inline"> layout="inline"
<FormItem label="Bordered"> className="components-table-demo-control-bar"
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} /> style={{ marginBottom: 16 }}
</FormItem> >
<FormItem label="loading"> <Form.Item label="Bordered">
<Switch checked={state.loading} onChange={this.handleToggle('loading')} /> <Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
</FormItem> </Form.Item>
<FormItem label="Title"> <Form.Item label="loading">
<Switch checked={!!state.title} onChange={this.handleTitleChange} /> <Switch checked={state.loading} onChange={this.handleToggle('loading')} />
</FormItem> </Form.Item>
<FormItem label="Column Header"> <Form.Item label="Title">
<Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} /> <Switch checked={!!state.title} onChange={this.handleTitleChange} />
</FormItem> </Form.Item>
<FormItem label="Footer"> <Form.Item label="Column Header">
<Switch checked={!!state.footer} onChange={this.handleFooterChange} /> <Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
</FormItem> </Form.Item>
<FormItem label="Expandable"> <Form.Item label="Footer">
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} /> <Switch checked={!!state.footer} onChange={this.handleFooterChange} />
</FormItem> </Form.Item>
<FormItem label="Checkbox"> <Form.Item label="Expandable">
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} /> <Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
</FormItem> </Form.Item>
<FormItem label="Fixed Header"> <Form.Item label="Checkbox">
<Switch checked={!!state.scroll} onChange={this.handleScollChange} /> <Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
</FormItem> </Form.Item>
<FormItem label="Has Data"> <Form.Item label="Fixed Header">
<Switch checked={!!state.hasData} onChange={this.handleDataChange} /> <Switch checked={!!state.scroll} onChange={this.handleScollChange} />
</FormItem> </Form.Item>
<FormItem label="Size"> <Form.Item label="Has Data">
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}> <Switch checked={!!state.hasData} onChange={this.handleDataChange} />
<Radio.Button value="default">Default</Radio.Button> </Form.Item>
<Radio.Button value="middle">Middle</Radio.Button> <Form.Item label="Ellipsis">
<Radio.Button value="small">Small</Radio.Button> <Switch checked={!!state.ellipsis} onChange={this.handleEllipsisChange} />
</Radio.Group> </Form.Item>
</FormItem> <Form.Item label="Size">
<FormItem label="Pagination"> <Radio.Group value={state.size} onChange={this.handleSizeChange}>
<Radio.Group <Radio.Button value="default">Default</Radio.Button>
value={state.pagination ? state.pagination.position : 'none'} <Radio.Button value="middle">Middle</Radio.Button>
onChange={this.handlePaginationChange} <Radio.Button value="small">Small</Radio.Button>
> </Radio.Group>
<Radio.Button value="top">Top</Radio.Button> </Form.Item>
<Radio.Button value="bottom">Bottom</Radio.Button> <Form.Item label="Table Layout">
<Radio.Button value="both">Both</Radio.Button> <Radio.Group value={state.tableLayout} onChange={this.handleTableLayoutChange}>
<Radio.Button value="none">None</Radio.Button> <Radio.Button value={undefined}>Unset</Radio.Button>
</Radio.Group> <Radio.Button value="fixed">Fixed</Radio.Button>
</FormItem> </Radio.Group>
</Form> </Form.Item>
</div> <Form.Item label="Pagination">
<Table {...this.state} columns={columns} dataSource={state.hasData ? data : null} /> <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>
</Form.Item>
</Form>
<Table
{...this.state}
columns={columns.map(item => ({ ...item, ellipsis: state. ellipsis }))}
dataSource={state.hasData ? data : null}
/>
</div> </div>
); );
} }
@ -194,9 +213,6 @@ ReactDOM.render(<Demo />, mountNode);
``` ```
<style> <style>
.components-table-demo-control-bar {
margin-bottom: 10px;
}
.components-table-demo-control-bar .ant-form-item { .components-table-demo-control-bar .ant-form-item {
margin-right: 16px; margin-right: 16px;
margin-bottom: 8px; margin-bottom: 8px;

1
components/table/style/index.less
View File

@ -617,7 +617,6 @@
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
table { table {
width: auto;
min-width: 100%; min-width: 100%;
// https://github.com/ant-design/ant-design/issues/14545 // https://github.com/ant-design/ant-design/issues/14545