mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
docs: Table sorting with handle using react-sortable-hoc
This commit is contained in:
Martin Cermak
afc163
parent
4347eda0fe
commit
638a37832b
@ -1549,6 +1549,204 @@ exports[`renders ./components/table/demo/drag-sorting.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/table/demo/drag-sorting-handler.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
class="ant-table-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-spin-nested-loading"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-spin-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table-container"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-table-content"
|
||||||
|
>
|
||||||
|
<table
|
||||||
|
style="table-layout:auto"
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col
|
||||||
|
style="width:30px;min-width:30px"
|
||||||
|
/>
|
||||||
|
</colgroup>
|
||||||
|
<thead
|
||||||
|
class="ant-table-thead"
|
||||||
|
>
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
Sort
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
Age
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
Address
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
class="ant-table-tbody"
|
||||||
|
>
|
||||||
|
<tr
|
||||||
|
data-row-key="0"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="menu"
|
||||||
|
class="anticon anticon-menu"
|
||||||
|
role="img"
|
||||||
|
style="cursor:pointer;color:#999"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="menu"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
John Brown
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
32
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
New York No. 1 Lake Park
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
data-row-key="1"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="menu"
|
||||||
|
class="anticon anticon-menu"
|
||||||
|
role="img"
|
||||||
|
style="cursor:pointer;color:#999"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="menu"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
Jim Green
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
42
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
London No. 1 Lake Park
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr
|
||||||
|
data-row-key="2"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="menu"
|
||||||
|
class="anticon anticon-menu"
|
||||||
|
role="img"
|
||||||
|
style="cursor:pointer;color:#999"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class=""
|
||||||
|
data-icon="menu"
|
||||||
|
fill="currentColor"
|
||||||
|
focusable="false"
|
||||||
|
height="1em"
|
||||||
|
viewBox="64 64 896 896"
|
||||||
|
width="1em"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell drag-visible"
|
||||||
|
>
|
||||||
|
Joe Black
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
32
|
||||||
|
</td>
|
||||||
|
<td
|
||||||
|
class="ant-table-cell"
|
||||||
|
>
|
||||||
|
Sidney No. 1 Lake Park
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
|
||||||
<div>
|
<div>
|
||||||
<form
|
<form
|
||||||
|
|||||||
137
components/table/demo/drag-sorting-handler.md
Normal file
137
components/table/demo/drag-sorting-handler.md
Normal file
@ -0,0 +1,137 @@
|
|||||||
|
---
|
||||||
|
order: 27
|
||||||
|
title:
|
||||||
|
en-US: Drag sorting with handler
|
||||||
|
zh-CN: 拖拽手柄列
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
也可以使用 [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) 来实现一个拖拽操作列。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Alternatively you can implement drag sorting with handler using [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc).
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Table } from 'antd';
|
||||||
|
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc';
|
||||||
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
|
import arrayMove from 'array-move';
|
||||||
|
|
||||||
|
const DragHandle = sortableHandle(() => (
|
||||||
|
<MenuOutlined style={{ cursor: 'pointer', color: '#999' }} />
|
||||||
|
));
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: 'Sort',
|
||||||
|
dataIndex: 'sort',
|
||||||
|
width: 30,
|
||||||
|
className: 'drag-visible',
|
||||||
|
render: () => <DragHandle />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
className: 'drag-visible',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Age',
|
||||||
|
dataIndex: 'age',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Address',
|
||||||
|
dataIndex: 'address',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'John Brown',
|
||||||
|
age: 32,
|
||||||
|
address: 'New York No. 1 Lake Park',
|
||||||
|
index: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'Jim Green',
|
||||||
|
age: 42,
|
||||||
|
address: 'London No. 1 Lake Park',
|
||||||
|
index: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: 'Joe Black',
|
||||||
|
age: 32,
|
||||||
|
address: 'Sidney No. 1 Lake Park',
|
||||||
|
index: 2,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const SortableItem = sortableElement(props => <tr {...props} />);
|
||||||
|
const SortableContainer = sortableContainer(props => <tbody {...props} />);
|
||||||
|
const DragableBodyRow = ({ index, className, style, ...restProps }) => (
|
||||||
|
<SortableItem index={restProps['data-row-key']} {...restProps} />
|
||||||
|
);
|
||||||
|
|
||||||
|
class SortableTable extends React.Component {
|
||||||
|
state = {
|
||||||
|
dataSource: data,
|
||||||
|
};
|
||||||
|
|
||||||
|
onSortEnd = ({ oldIndex, newIndex }) => {
|
||||||
|
const { dataSource } = this.state;
|
||||||
|
if (oldIndex !== newIndex) {
|
||||||
|
const newData = arrayMove([].concat(dataSource), oldIndex, newIndex).filter(el => !!el);
|
||||||
|
console.log('Sorted items: ', newData);
|
||||||
|
this.setState({ dataSource: newData });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { dataSource } = this.state;
|
||||||
|
const DraggableContainer = props => (
|
||||||
|
<SortableContainer
|
||||||
|
useDragHandle
|
||||||
|
helperClass="row-dragging"
|
||||||
|
onSortEnd={this.onSortEnd}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
pagination={false}
|
||||||
|
dataSource={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
rowKey="index"
|
||||||
|
components={{
|
||||||
|
body: {
|
||||||
|
wrapper: DraggableContainer,
|
||||||
|
row: DragableBodyRow,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDOM.render(<SortableTable />, mountNode);
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.row-dragging {
|
||||||
|
background: #fafafa;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-dragging td {
|
||||||
|
padding: 16px;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-dragging .drag-visible {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -171,6 +171,7 @@
|
|||||||
"antd-img-crop": "^3.1.1",
|
"antd-img-crop": "^3.1.1",
|
||||||
"antd-pro-merge-less": "^3.0.9",
|
"antd-pro-merge-less": "^3.0.9",
|
||||||
"antd-theme-generator": "^1.2.3",
|
"antd-theme-generator": "^1.2.3",
|
||||||
|
"array-move": "^2.2.1",
|
||||||
"babel-eslint": "^10.0.1",
|
"babel-eslint": "^10.0.1",
|
||||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||||
"bisheng": "^1.5.3",
|
"bisheng": "^1.5.3",
|
||||||
@ -249,6 +250,7 @@
|
|||||||
"react-intl": "^4.1.1",
|
"react-intl": "^4.1.1",
|
||||||
"react-resizable": "^1.8.0",
|
"react-resizable": "^1.8.0",
|
||||||
"react-router-dom": "^5.0.1",
|
"react-router-dom": "^5.0.1",
|
||||||
|
"react-sortable-hoc": "^1.11.0",
|
||||||
"react-sticky": "^6.0.3",
|
"react-sticky": "^6.0.3",
|
||||||
"react-test-renderer": "^16.8.6",
|
"react-test-renderer": "^16.8.6",
|
||||||
"react-text-loop": "^2.3.0",
|
"react-text-loop": "^2.3.0",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user