在数据密集型应用中 Table 是最常使用的数据容器之一。之前我一直使用 Ant Design 自带的 Table, 但后来有了个需求，用户要能够自定义 Table 的列, 包括是否显示某一列以及该列的优先级。
刚开始是尝试直接拖拽列头，奈何功能实现了，体验却是不尽人意
比如以下表格
姓名 年龄 性别 地址 Joe Doe 23 Male 5th Avenue, NY 要把地址拖拽到第二列, 需要先将年龄和性别向右移动一个单位为地址腾出地方
这里的"一个单位"是相对的，指的是一列，但这个绝对列长又容易获取
而且这种拖拽不是瞬间完成的，在选择目的地的时候容易晃动，晃动造成的不确定性让用户感觉自己"没有控制权"
最后，拖拽过程中只有列头在移动，该列数据还在原来的位置，只有在拖拽完成后瞬间被移动过来。这破坏了列头和该列数据之间的一体性
后来干脆放弃这种方案, 直接采用 Modal 来专门处理这个问题，借助 react-beautiful-dnd 搞成了类似 Jira 里面任务泳道的形式
 | 1 lxzxl Apr 9, 2021 via iPhone 他们的 pro table 有这些增强功能 |
 | 2 jchencode Apr 9, 2021  8 你这个组件底层逻辑是什么？顶层设计在哪里？最终交付价值是什么？过程的抓手在哪里？如何保证结果的闭环？能否赋能产品生态？这个组件比其他组件的亮点在哪？优势在哪？我没有看到你的沉淀和思考，你有形成自己的方法论吗？你得让别人清楚，凭什么换这个工具，是不是换下一个工具也可以？ |
 | 3 pgtwo Apr 9, 2021 via iPhone 老哥这加班时间有点晚啊 |
 | 4 fengche361 Apr 9, 2021 @LiuJiang 哈哈哈哈，一看就是大牛 |
 | 5 yangheng4922 Apr 9, 2021 好家伙 一下 10 连问 哈哈 |
 | 7 Orangeee Apr 9, 2021 上面是我们的一个实现，感觉交互上会合理点，右上角可以点击激活列的显示隐藏和拖拽排序。 |
 | 9 vision1900 OP @lxzxl 我去看看 |
| 11 vision1900 OP @LiuJiang 这些名词我都得查一下 :) 这里主要是提供交互和实现的一个思路. 使用 Typescript 提供了和 Antd 一致的完整类型定义，Props 和 Antd 里的 Table 完全一致. 对于之前就用 Antd Table 的开发者来说没有任何学习成本. 大佬可能站的比较高，我现在还是仅仅站在实现功能，好用的角度上来做开发 |
| 12 vision1900 OP @Orangeee 嗯嗯，感觉这样视觉上的侵入感会更低，也不用新开 Modal |
 | 13 catcn Apr 9, 2021 @vision1900 感觉就是 ali 的开发（人生）提问样式，哈哈哈 |
| 14 vision1900 OP @finnlewis 刚刚离职，晚上 8 点就睡，凌晨起来写简历，顺便维护一下之前的小项目. |
| 15 catcn Apr 9, 2021 看了一下这个隐藏列的小组件，要是我来搞，估计会搞到表头列头里边的，因为那一个配置按钮太突兀了。最近也在搞 ant design，感觉要花蛮多时间才能搞定。 |
| 16 vision1900 OP @catcn 可以看下 6 楼老哥的分享，我也这么觉得，哈哈 |
 | 17 nbhaohao Apr 9, 2021 挺认同这个思路的。 如果强行在 Table 做按住表头然后拖拽排序的逻辑，代码应该会非常不好实现，而且会出现边界情况。另一方面用起来可能体验也不太好。 楼主这个，估计可能还要考虑 fixed 列那种，就可能 disabled 或者其他的处理。 另外 demo 现在 ok 和 cancel 是直接把模态框干掉了吗？体验不太好，失去了 close 的动画效果，不知道是不是因为只是 demo 。如果是为了清空数据或者其他之类的，应该有更好的做法。 |
 | 18 dany813 Apr 9, 2021 6 楼的看着更加舒服一点 |
 | 19 lanyulei Apr 9, 2021 赞 |
 | 20 arthurblake Apr 9, 2021 @LiuJiang 阿里大牛 |
 | 21 afc163 May 16, 2021 这个需求直接用 ProTable https://procomponents.ant.design/components/table/ 就行了 |
Select Language