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

[vision1900]

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

[lxzxl]

他们的 pro table 有这些增强功能

[jchencode]

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

[pgtwo]

老哥这加班时间有点晚啊

[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]

👍赞

[arthurblake]

@LiuJiang 阿里大牛

[afc163]

这个需求直接用 ProTable https://procomponents.ant.design/components/table/ 就行了