Ant Design + react-drag-listview实现Table拖拽变换列位置

Ant Design + react-drag-listview实现Table拖拽变换列位置

Ant Design + react-drag-listview + react-resizable 实现拖拽变换列位置， 可改变列宽

废话不多说，直接上代码

一：单独使用，只实现拖拽变换列位置

import React from 'react';
import { Table } from 'antd';
import ReactDragListView from 'react-drag-listview'

class DragTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            columns: this.props.columns
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        return null;
    }
    
    render() {
        const { components, columns, ...others } = this.props;
        const that = this;
        const dragProps = {
            onDragEnd(fromIndex, toIndex) {
                const columns = [...that.state.columns];
                const item = columns.splice(fromIndex, 1)[0];
                columns.splice(toIndex, 0, item);
                that.setState({
                    columns
                });
            },
            nodeSelector: "th"
        };

        
        return (<ReactDragListView.DragColumn {...dragProps}>
            <Table 
                columns={this.state.columns}
                { ...others }
            ></Table>
        </ReactDragListView.DragColumn>)
    }
}

export default DragTable;

 二：与react-resizable结合使用，可改变列宽，可改变列位置

react-resizable可参Ant Design + react-resizable实现列表页可拖拽宽度变化_仗剑走天涯的博客-CSDN博客

 DragTable 组件封装：

import React from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import ReactDragListView from 'react-drag-listview'
import 'react-resizable/css/styles.css';
import './index.css'

const ResizeableTitle = (props) => {
	const { onResize, width, ...restProps } = props;
    if (!width) {
        return <th {...restProps} />;
    }
    return (
        <Resizable
            width={width?width:null}
            height={0}
            minConstraints={[50, 50]}
            onResize={onResize}
            draggableOpts={{ enableUserSelectHack: false }}
            >
            <th {...restProps} />
        </Resizable>
    );
}

class DragTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            columns: this.props.columns
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        return null;
    }

    components = {
		header: {
			cell: ResizeableTitle,
	 	},
	};
   
	handleResize = index => (e, { size }) => {
		this.setState(({ columns }) => {
			const nextColumns = [...columns];
			nextColumns[index] = {
                ...nextColumns[index],
                width: size.width?size.width:'100%',
            };
			return { columns: nextColumns };
		});
	}
    
    render() {
        const { components, columns, ...others } = this.props;
        const that = this;
        const dragProps = {
            onDragEnd(fromIndex, toIndex) {
                const columns = [...that.state.columns];
                const item = columns.splice(fromIndex, 1)[0];
                columns.splice(toIndex, 0, item);
                that.setState({
                    columns
                });
            },
            nodeSelector: "th",
            handleSelector: 'p'
        };

        const newColumns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width?column.width:100, // 100 没有设置宽度可以在此写死 例如100试下
                onResize: this.handleResize(index),
            }),
        })) 
        
        return (<ReactDragListView.DragColumn {...dragProps}>
            <Table 
                components={this.components}
                columns={newColumns}
                { ...others }
            ></Table>
        </ReactDragListView.DragColumn>)
    }
}

export default DragTable;

样式调整

.react-resizable-handle-se {
    top: 0;
    right: 0;
    cursor: w-resize;
}

.react-resizable-handle {
    position: absolute;
    width: 10px;
    height: calc(100% - 10px);
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    background-image: none;
    background-position: bottom right;
    border-right: 1px solid #f0f0f0;
    margin: 5px 0px;
    padding: 0px;
}

.ant-table-header .ant-table-cell p {
    width: calc(100% - 15px);
    cursor: move;
    margin-left: 5px;
}

.ant-table thead > tr > th {
    margin-right: 10px;
}

.ant-table-header {
    -moz-user-select:none; /* Firefox私有属性 */
    -webkit-user-select:none; /* WebKit内核私有属性 */
    -ms-user-select:none; /* IE私有属性(IE10及以后) */
    -khtml-user-select:none; /* KHTML内核私有属性 */
    -o-user-select:none; /* Opera私有属性 */
    user-select:none; /* CSS3属性 */
}

.ant-table-header th:last-child .react-resizable-handle {
    display: none;
}

使用：

import React from 'react';
import DragTable from '../../components/DragTable';

class APP extends React.Component {
     constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: []
        }
    }
    render() {
        const columns = [
            { title: () => { return <p>name</p> }, dataIndex: 'name', key: 'name', ellipsis: true },
            { title: () => { return <p>value</p> }, dataIndex: 'value', key: 'value', ellipsis: true }
        ]
        return (<DragTable 
                    columns={columns}
                    loading={this.state.loading}
                    rowKey='id'
                    dataSource={this.state.data}
                    size='small'
                    pagination={false}
                    style={{marginTop: 10}}
                    rowClassName={(record, index) => {}}
                ></DragTable>);
    }
}