mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
docs: add resizable column table demo
This commit is contained in:
Wei Zhu
偏右
parent
05ca7a559a
commit
d7ca64b95c
@ -9283,6 +9283,259 @@ exports[`renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-default ant-table-bordered ant-table-scroll-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
>
|
||||
<div
|
||||
class="ant-table-body"
|
||||
>
|
||||
<table
|
||||
class=""
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:200px;min-width:200px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px;min-width:100px"
|
||||
/>
|
||||
<col />
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Date
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Amount
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Type
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class="react-resizable"
|
||||
>
|
||||
<span>
|
||||
Note
|
||||
</span>
|
||||
<span
|
||||
class="react-resizable-handle"
|
||||
style="touch-action:none"
|
||||
/>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<span>
|
||||
Action
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="0"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-02-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
120
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-03-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
243
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="2"
|
||||
>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<span
|
||||
class="ant-table-row-indent indent-level-0"
|
||||
style="padding-left:0px"
|
||||
/>
|
||||
2018-04-11
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
98
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
income
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
transfer
|
||||
</td>
|
||||
<td
|
||||
class=""
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
>
|
||||
Delete
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul
|
||||
class="ant-pagination ant-table-pagination"
|
||||
unselectable="unselectable"
|
||||
>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-prev"
|
||||
title="Previous Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
/>
|
||||
</li>
|
||||
<li
|
||||
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
|
||||
tabindex="0"
|
||||
title="1"
|
||||
>
|
||||
<a>
|
||||
1
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
aria-disabled="true"
|
||||
class="ant-pagination-disabled ant-pagination-next"
|
||||
title="Next Page"
|
||||
>
|
||||
<a
|
||||
class="ant-pagination-item-link"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/table/demo/row-selection.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
order: 26
|
||||
order: 27
|
||||
title:
|
||||
en-US: Dynamic Settings
|
||||
zh-CN: 动态控制表格属性
|
||||
|
||||
135
components/table/demo/resizable-column.md
Normal file
135
components/table/demo/resizable-column.md
Normal file
@ -0,0 +1,135 @@
|
||||
---
|
||||
order: 26
|
||||
title:
|
||||
en-US: Resizable column
|
||||
zh-CN: 可伸缩列
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
集成 react-resizable 来实现可伸缩列。
|
||||
|
||||
## en-US
|
||||
|
||||
Implement resizable column by integrate with react-resizable.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
import { Resizable } from 'react-resizable';
|
||||
|
||||
const ResizeableTitle = (props) => {
|
||||
const { onResize, width, ...restProps } = props;
|
||||
|
||||
if (!width) {
|
||||
return <th {...restProps} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Resizable width={width} height={0} onResize={onResize}>
|
||||
<th {...restProps} />
|
||||
</Resizable>
|
||||
);
|
||||
};
|
||||
|
||||
class Demo extends React.Component {
|
||||
state = {
|
||||
columns: [{
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
width: 200,
|
||||
}, {
|
||||
title: 'Amount',
|
||||
dataIndex: 'amount',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Type',
|
||||
dataIndex: 'type',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Note',
|
||||
dataIndex: 'note',
|
||||
width: 100,
|
||||
}, {
|
||||
title: 'Action',
|
||||
key: 'action',
|
||||
render: () => (
|
||||
<a href="javascript:;">Delete</a>
|
||||
),
|
||||
}],
|
||||
};
|
||||
|
||||
components = {
|
||||
header: {
|
||||
cell: ResizeableTitle,
|
||||
},
|
||||
};
|
||||
|
||||
data = [{
|
||||
key: 0,
|
||||
date: '2018-02-11',
|
||||
amount: 120,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}, {
|
||||
key: 1,
|
||||
date: '2018-03-11',
|
||||
amount: 243,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}, {
|
||||
key: 2,
|
||||
date: '2018-04-11',
|
||||
amount: 98,
|
||||
type: 'income',
|
||||
note: 'transfer',
|
||||
}];
|
||||
|
||||
handleResize = index => (e, { size }) => {
|
||||
this.setState(({ columns }) => {
|
||||
const nextColumns = [...columns];
|
||||
nextColumns[index] = {
|
||||
...nextColumns[index],
|
||||
width: size.width,
|
||||
};
|
||||
return { columns: nextColumns };
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const columns = this.state.columns.map((col, index) => ({
|
||||
...col,
|
||||
onHeaderCell: column => ({
|
||||
width: column.width,
|
||||
onResize: this.handleResize(index),
|
||||
}),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Table
|
||||
bordered
|
||||
components={this.components}
|
||||
columns={columns}
|
||||
dataSource={this.data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
````css
|
||||
#components-table-demo-resizable-column .react-resizable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#components-table-demo-resizable-column .react-resizable-handle {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
````
|
||||
@ -158,6 +158,7 @@
|
||||
"react-github-button": "^0.1.1",
|
||||
"react-infinite-scroller": "^1.0.15",
|
||||
"react-intl": "^2.0.1",
|
||||
"react-resizable": "^1.7.5",
|
||||
"react-router-dom": "^4.2.2",
|
||||
"react-sublime-video": "^0.2.0",
|
||||
"react-virtualized": "~9.20.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user