安装 react-table-hoc-draggable-columns

简介

react-table-hoc-draggable-columns 是基于 react-table 的一个高阶组件，用来实现 table 的列拖拽功能。它可以让用户在表格中拖拽列来重新排列表格内容。

安装

使用 npm 来安装 react-table-hoc-draggable-columns：

npm install react-table-hoc-draggable-columns --save

使用

在组件中引入 react-table-hoc-draggable-columns:

import makeTableDraggableColumnHOC from 'react-table-hoc-draggable-columns';

使用方式与 react-table 的使用方式类似:

const DraggableTable = makeTableDraggableColumnHOC(ReactTable);

<DraggableTable data={data} columns={columns} />

选项

react-table-hoc-draggable-columns 提供了多个可选的选项，用来实现不同的功能和自定义表格拖拽的行为。

onDragEnd

在拖拽结束时会触发该事件，回调函数的参数包含拖动之前的列顺序和拖动之后的列顺序。接下来你就可以使用这些信息来定义自己的逻辑。

function onDragEnd(beforeColumnOrder, afterColumnOrder) {
  console.log(`Before: ${beforeColumnOrder}`);
  console.log(`After: ${afterColumnOrder}`);
}

<DraggableTable data={data} columns={columns} onDragEnd={onDragEnd} />

onDragUpdate

在拖拽时会持续触发该事件，回调函数的参数会传入当前的列顺序和拖拽中的列顺序。

function onDragUpdate(currentColumnOrder, beforeColumnOrder) {
  console.log(`Current: ${currentColumnOrder}`);
  console.log(`Before: ${beforeColumnOrder}`);
}

<DraggableTable data={data} columns={columns} onDragUpdate={onDragUpdate} />

draggableColumns

默认情况下，所有列都可以被拖拽，但是你可以通过设置 draggableColumns 属性来控制哪些列可以被拖拽。

const draggableColumns = [
  'firstName',
  'lastName',
  'age'
];

<DraggableTable data={data} columns={columns} draggableColumns={draggableColumns} />

onDragStart

在拖拽开始之前调用。

function onDragStart(e) {
  console.log('Drag started');
}

<DraggableTable data={data} columns={columns} onDragStart={onDragStart} />

总结

以上就是 react-table-hoc-draggable-columns 的安装和使用方法以及常用选项的介绍。如果您想让用户可以自由地拖拽 table 的列以改变表格的排列顺序，那么使用这个库是个不错的选择。