V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
vision1900
V2EX  ›  React

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

  •  
  •   vision1900 · 12 天前 · 1445 次点击

    在数据密集型应用中 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 条回复    2021-04-09 17:00:06 +08:00
    lxzxl
        1
    lxzxl   12 天前 via iPhone
    他们的 pro table 有这些增强功能
    LiuJiang
        2
    LiuJiang   12 天前   ❤️ 7
    你这个组件底层逻辑是什么?顶层设计在哪里?最终交付价值是什么?过程的抓手在哪里?如何保证结果的闭环?能否赋能产品生态?这个组件比其他组件的亮点在哪?优势在哪?我没有看到你的沉淀和思考,你有形成自己的方法论吗?你得让别人清楚,凭什么换这个工具,是不是换下一个工具也可以?
    finnlewis
        3
    finnlewis   12 天前 via iPhone
    老哥这加班时间有点晚啊
    fengche361
        4
    fengche361   12 天前
    @LiuJiang 哈哈哈哈,一看就是大牛
    yangheng4922
        5
    yangheng4922   12 天前
    好家伙 一下 10 连问 哈哈
    Orangeee
        7
    Orangeee   12 天前
    上面是我们的一个实现,感觉交互上会合理点,右上角可以点击激活列的显示隐藏和拖拽排序。
    AlexWIT
        8
    AlexWIT   12 天前
    @LiuJiang 好家伙,血压瞬间拉满
    vision1900
        9
    vision1900   12 天前
    @lxzxl 我去看看
    guili618
        10
    guili618   12 天前
    @LiuJiang 哈哈 我血压顿时上来 自闭了 😂😂😂
    vision1900
        11
    vision1900   12 天前
    @LiuJiang 这些名词我都得查一下 :) 这里主要是提供交互和实现的一个思路. 使用 Typescript 提供了和 Antd 一致的完整类型定义,Props 和 Antd 里的 Table 完全一致. 对于之前就用 Antd Table 的开发者来说没有任何学习成本. 大佬可能站的比较高,我现在还是仅仅站在实现功能,好用的角度上来做开发
    vision1900
        12
    vision1900   12 天前
    @Orangeee 嗯嗯,感觉这样视觉上的侵入感会更低,也不用新开 Modal
    catcn
        13
    catcn   12 天前
    @vision1900 感觉就是 ali 的开发(人生)提问样式,哈哈哈
    vision1900
        14
    vision1900   12 天前
    @finnlewis 刚刚离职,晚上 8 点就睡,凌晨起来写简历,顺便维护一下之前的小项目.
    catcn
        15
    catcn   12 天前
    看了一下这个隐藏列的小组件,要是我来搞,估计会搞到表头列头里边的,因为那一个配置按钮太突兀了。最近也在搞 ant design,感觉要花蛮多时间才能搞定。
    vision1900
        16
    vision1900   12 天前
    @catcn 可以看下 6 楼老哥的分享,我也这么觉得,哈哈
    nbhaohao
        17
    nbhaohao   12 天前
    挺认同这个思路的。
    如果强行在 Table 做按住表头然后拖拽排序的逻辑,代码应该会非常不好实现,而且会出现边界情况。另一方面用起来可能体验也不太好。

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

    另外 demo 现在 ok 和 cancel 是直接把模态框干掉了吗?体验不太好,失去了 close 的动画效果,不知道是不是因为只是 demo 。如果是为了清空数据或者其他之类的,应该有更好的做法。
    dany813
        18
    dany813   12 天前
    6 楼的看着更加舒服一点
    lanyulei
        19
    lanyulei   12 天前
    👍赞
    yph007595
        20
    yph007595   11 天前
    @LiuJiang 阿里大牛
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3538 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 07:52 · PVG 15:52 · LAX 00:52 · JFK 03:52
    ♥ Do have faith in what you're doing.