日期 : 2021-04-09 12:54:06作者 : 望京博格

在数据密集型应用中 Table 是最常使用的数据容器之一。之前我一直使用 Ant Design 自带的 Table, 但后来有了个需求，用户要能够自定义 Table 的列, 包括是否显示某一列以及该列的优先级。

刚开始是尝试直接拖拽列头，奈何功能实现了，体验却是不尽人意

比如以下表格

姓名     年龄  性别  地址
Joe Doe  23   Male  5th Avenue, NY

要把地址拖拽到第二列, 需要先将年龄和性别向右移动一个单位为地址腾出地方

这里的"一个单位"是相对的，指的是一列，但这个绝对列长又不容易获取

而且这种拖拽不是瞬间完成的，在选择目的地的时候容易晃动，晃动造成的不确定性让用户感觉自己"没有控制权"

最后，拖拽过程中只有列头在移动，该列数据还在原来的位置，只有在拖拽完成后瞬间被移动过来。这破坏了列头和该列数据之间的一体性

后来干脆放弃这种方案, 直接采用 Modal 来专门处理这个问题，借助 react-beautiful-dnd 搞成了类似 Jira 里面任务泳道的形式

这是 Demo: http://widgets.realrz.com/ant-table-dnd

代码在这里: https://github.com/librz/ant-table-dnd