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

資深大佬 : vision1900 5

在数据密集型应用中 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

大佬有話說 (20)

資深大佬 : lxzxl

他们的 pro table 有这些增强功能
資深大佬 : LiuJiang

你这个组件底层逻辑是什么？顶层设计在哪里？最终交付价值是什么？过程的抓手在哪里？如何保证结果的闭环？能否赋能产品生态？这个组件比其他组件的亮点在哪？优势在哪？我没有看到你的沉淀和思考，你有形成自己的方法论吗？你得让别人清楚，凭什么换这个工具，是不是换下一个工具也可以？
資深大佬 : finnlewis

老哥这加班时间有点晚啊
資深大佬 : fengche361

@LiuJiang 哈哈哈哈，一看就是大牛
資深大佬 : yangheng4922

好家伙一下 10 连问哈哈
資深大佬 : Orangeee

https://codesandbox.io/s/pensive-galileo-8o8lh?file=/src/Table.jsx
資深大佬 : Orangeee

上面是我们的一个实现，感觉交互上会合理点，右上角可以点击激活列的显示隐藏和拖拽排序。
資深大佬 : AlexWIT

@LiuJiang 好家伙，血压瞬间拉满
主資深大佬 : vision1900

@lxzxl 我去看看
資深大佬 : guili618

@LiuJiang 哈哈我血压顿时上来自闭了
主資深大佬 : vision1900

@LiuJiang 这些名词我都得查一下 🙂 这里主要是提供交互和实现的一个思路. 使用 Typescript 提供了和 Antd 一致的完整类型定义，Props 和 Antd 里的 Table 完全一致. 对于之前就用 Antd Table 的开发者来说没有任何学习成本. 大佬可能站的比较高，我现在还是仅仅站在实现功能，好用的角度上来做开发
主資深大佬 : vision1900

@Orangeee 嗯嗯，感觉这样视觉上的侵入感会更低，也不用新开 Modal
資深大佬 : catcn

@vision1900 感觉就是 ali 的开发（人生）提问样式，哈哈哈
主資深大佬 : vision1900

@finnlewis 刚刚离职，晚上 8 点就睡，凌晨起来写简历，顺便维护一下之前的小项目.
資深大佬 : catcn

看了一下这个隐藏列的小组件，要是我来搞，估计会搞到表头列头里边的，因为那一个配置按钮太突兀了。最近也在搞 ant design，感觉要花蛮多时间才能搞定。
主資深大佬 : vision1900

@catcn 可以看下 6 老哥的分享，我也这么觉得，哈哈
資深大佬 : nbhaohao

挺认同这个思路的。
如果强行在 Table 做按住表头然后拖拽排序的逻辑，代码应该会非常不好实现，而且会出现边界情况。另一方面用起来可能体验也不太好。

主这个，估计可能还要考虑 fixed 列那种，就可能 disabled 或者其他的处理。

另外 demo 现在 ok 和 cancel 是直接把模态框干掉了吗？体验不太好，失去了 close 的动画效果，不知道是不是因为只是 demo 。如果是为了清空数据或者其他之类的，应该有更好的做法。
資深大佬 : dany813

6 的看着更加舒服一点
資深大佬 : lanyulei
資深大佬 : yph007595

@LiuJiang 阿里大牛