分享一个基于 Ant Design Table 的小组件

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

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

比如以下表格

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

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

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

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

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

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