mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 19:42:54 +08:00
🎬 Add tableLyout and ellipsis in Table demo
This commit is contained in:
afc163
偏右
parent
033f812311
commit
251ae17376
@ -1795,11 +1795,9 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
|
||||
|
||||
exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="components-table-demo-control-bar"
|
||||
>
|
||||
<form
|
||||
class="ant-form ant-form-inline"
|
||||
class="ant-form ant-form-inline components-table-demo-control-bar"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
@ -2130,6 +2128,42 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Ellipsis"
|
||||
>
|
||||
Ellipsis
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control"
|
||||
>
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
@ -2153,7 +2187,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline ant-radio-group-default"
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
|
||||
@ -2218,6 +2252,74 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-label"
|
||||
>
|
||||
<label
|
||||
class=""
|
||||
title="Table Layout"
|
||||
>
|
||||
Table Layout
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-form-item-control-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control"
|
||||
>
|
||||
<span
|
||||
class="ant-form-item-children"
|
||||
>
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button ant-radio-button-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Unset
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio-button"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio"
|
||||
value="fixed"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-button-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Fixed
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
@ -2326,7 +2428,6 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
@ -2355,16 +2456,10 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||
<col
|
||||
class="ant-table-selection-col"
|
||||
/>
|
||||
<col
|
||||
style="width:150px;min-width:150px"
|
||||
/>
|
||||
<col
|
||||
style="width:70px;min-width:70px"
|
||||
/>
|
||||
<col />
|
||||
<col
|
||||
style="width:360px;min-width:360px"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
|
||||
@ -16,21 +16,17 @@ Select different settings to see the result.
|
||||
```jsx
|
||||
import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 150,
|
||||
render: text => <a>{text}</a>,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
@ -40,7 +36,6 @@ const columns = [
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
width: 360,
|
||||
render: (text, record) => (
|
||||
<span>
|
||||
<a>Action 一 {record.name}</a>
|
||||
@ -86,6 +81,7 @@ class Demo extends React.Component {
|
||||
rowSelection: {},
|
||||
scroll: undefined,
|
||||
hasData: true,
|
||||
tableLayout: undefined,
|
||||
};
|
||||
|
||||
handleToggle = prop => enable => {
|
||||
@ -96,10 +92,18 @@ class Demo extends React.Component {
|
||||
this.setState({ size: e.target.value });
|
||||
};
|
||||
|
||||
handleTableLayoutChange = e => {
|
||||
this.setState({ tableLayout: e.target.value });
|
||||
};
|
||||
|
||||
handleExpandChange = enable => {
|
||||
this.setState({ expandedRowRender: enable ? expandedRowRender : undefined });
|
||||
};
|
||||
|
||||
handleEllipsisChange = enable => {
|
||||
this.setState({ ellipsis: enable });
|
||||
};
|
||||
|
||||
handleTitleChange = enable => {
|
||||
this.setState({ title: enable ? title : undefined });
|
||||
};
|
||||
@ -135,43 +139,55 @@ class Demo extends React.Component {
|
||||
const { state } = this;
|
||||
return (
|
||||
<div>
|
||||
<div className="components-table-demo-control-bar">
|
||||
<Form layout="inline">
|
||||
<FormItem label="Bordered">
|
||||
<Form
|
||||
layout="inline"
|
||||
className="components-table-demo-control-bar"
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item label="Bordered">
|
||||
<Switch checked={state.bordered} onChange={this.handleToggle('bordered')} />
|
||||
</FormItem>
|
||||
<FormItem label="loading">
|
||||
</Form.Item>
|
||||
<Form.Item label="loading">
|
||||
<Switch checked={state.loading} onChange={this.handleToggle('loading')} />
|
||||
</FormItem>
|
||||
<FormItem label="Title">
|
||||
</Form.Item>
|
||||
<Form.Item label="Title">
|
||||
<Switch checked={!!state.title} onChange={this.handleTitleChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Column Header">
|
||||
</Form.Item>
|
||||
<Form.Item label="Column Header">
|
||||
<Switch checked={!!state.showHeader} onChange={this.handleHeaderChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Footer">
|
||||
</Form.Item>
|
||||
<Form.Item label="Footer">
|
||||
<Switch checked={!!state.footer} onChange={this.handleFooterChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Expandable">
|
||||
</Form.Item>
|
||||
<Form.Item label="Expandable">
|
||||
<Switch checked={!!state.expandedRowRender} onChange={this.handleExpandChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Checkbox">
|
||||
</Form.Item>
|
||||
<Form.Item label="Checkbox">
|
||||
<Switch checked={!!state.rowSelection} onChange={this.handleRowSelectionChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Fixed Header">
|
||||
</Form.Item>
|
||||
<Form.Item label="Fixed Header">
|
||||
<Switch checked={!!state.scroll} onChange={this.handleScollChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Has Data">
|
||||
</Form.Item>
|
||||
<Form.Item label="Has Data">
|
||||
<Switch checked={!!state.hasData} onChange={this.handleDataChange} />
|
||||
</FormItem>
|
||||
<FormItem label="Size">
|
||||
<Radio.Group size="default" value={state.size} onChange={this.handleSizeChange}>
|
||||
</Form.Item>
|
||||
<Form.Item label="Ellipsis">
|
||||
<Switch checked={!!state.ellipsis} onChange={this.handleEllipsisChange} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Size">
|
||||
<Radio.Group value={state.size} onChange={this.handleSizeChange}>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="middle">Middle</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
<FormItem label="Pagination">
|
||||
</Form.Item>
|
||||
<Form.Item label="Table Layout">
|
||||
<Radio.Group value={state.tableLayout} onChange={this.handleTableLayoutChange}>
|
||||
<Radio.Button value={undefined}>Unset</Radio.Button>
|
||||
<Radio.Button value="fixed">Fixed</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="Pagination">
|
||||
<Radio.Group
|
||||
value={state.pagination ? state.pagination.position : 'none'}
|
||||
onChange={this.handlePaginationChange}
|
||||
@ -181,10 +197,13 @@ class Demo extends React.Component {
|
||||
<Radio.Button value="both">Both</Radio.Button>
|
||||
<Radio.Button value="none">None</Radio.Button>
|
||||
</Radio.Group>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
<Table {...this.state} columns={columns} dataSource={state.hasData ? data : null} />
|
||||
<Table
|
||||
{...this.state}
|
||||
columns={columns.map(item => ({ ...item, ellipsis: state. ellipsis }))}
|
||||
dataSource={state.hasData ? data : null}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -194,9 +213,6 @@ ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
.components-table-demo-control-bar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.components-table-demo-control-bar .ant-form-item {
|
||||
margin-right: 16px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
@ -617,7 +617,6 @@
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
table {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/14545
|
||||
|
||||
Loading…
Reference in New Issue
Block a user