import 'antd/dist/antd.less'; import { storiesOf } from '@storybook/react'; import React from 'react'; 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: 'grab', 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} />); 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 }); } }; DraggableContainer = props => ( <SortableContainer useDragHandle disableAutoscroll helperClass="row-dragging" onSortEnd={this.onSortEnd} {...props} /> ); DraggableBodyRow = ({ className, style, ...restProps }) => { const { dataSource } = this.state; // function findIndex base on Table rowKey props and should always be a right array index const index = dataSource.findIndex(x => x.index === restProps['data-row-key']); return <SortableItem index={index} {...restProps} />; }; render() { const { dataSource } = this.state; return ( <Table pagination={false} dataSource={dataSource} columns={columns} rowKey="index" components={{ body: { wrapper: this.DraggableContainer, row: this.DraggableBodyRow, }, }} /> ); } } storiesOf('antd/table', module).add('drag-sorting-handler', () => <SortableTable />, { docs: { page: () => (<><h1 id="enus">en-US</h1> <p>Alternatively you can implement drag sorting with handler using <a href="https://github.com/clauderic/react-sortable-hoc">react-sortable-hoc</a>.</p></>) } });