idux
idux copied to clipboard
[pro:table] 高级表格组件需求收集
- [x] I have searched the issues of this repository and believe that this is not a duplicate.
What problem does this feature solve?
对表格组件提供更加高级的封装,提供更加高效,便捷的使用方式。
What does the proposed API look like?
表格功能集
基础功能
在 IxTable
中已经集成的功能
通用能力
- [x] 自动高度:autoHeight
- [x] 有无边框: borderless
- [x] 自定义事件和样式: customAdditional
- [x] 行样式,例如:斑马纹
- [x] 各种原生事件
- [x] 文本超长处理:ellipsis
- [x] 自定义空数据内容:empty
- [x] 自定义表格头部:hader
- [x] 表格分页: pagination
- [x] 表格宽高和滚动条, :scroll
- [x] 固定表头
- [x] 大小: size
- [x] 加载中:spin
- [x] 粘性表头(吸顶): sticky
- [x] 虚拟滚动:virtual
- [ ] 自定义页尾(总结栏)
列配置
- [x] 对齐方式: column.align
- [x] 合并单元格:column.colSpan + column.rowSpan
- [x] 合并表头:column.titleColSpan
- [x] 表头分组:column.children
- [x] 固定列: column.fixed
- [x] 表格宽度: column.width
- [x] 自定义渲染单元格: column.customCell
- [x] 自定义渲染表头:column.customTitle
- [x] 排序:column.sortable
- [x] 单列
- [x] 多列
- [x] 服务端
- [x] 筛选:column.filterable
- [x] 单字段
- [x] 多字段
- [x] 服务端
- [x] 自定义下拉菜单
- [ ] 可展开:column.type === 'expandable'
- [x] 单行展开
- [x] 树型表格
- [ ] 嵌套表格(其实就是单行展开,样式可能还需要优化)
- [x] 可选择:column.type === 'selectable'
- [x] 单选
- [x] 多选
- [x] 点击行选择(单击,双击)
- [x] 选择全部,当前页,反选,取消全部,自定义规则
高级功能
在 IxProTable
中扩展的功能
- [ ] 表格头部工具栏 (可能以插件的形式提供)
- [ ] 刷新
- [ ] 导入
- [ ] 导出
- [ ] 打印
- [ ] 布局设置: IxProTableLayoutTool
- [x] 列显示隐藏 column.changeVisiable
- [x] 列拖拽排序 column.changeIndex
- [x] 列固定 column.changeFixed
- [ ] 列搜索
- [ ] 表格大小调整
- [x] 列宽拖动 column.resizable
- [ ] 行拖拽排序
- [ ] 表格行修改,删除,新增
- [ ] 编辑
- [ ] 删除
- [ ] 新增
- [ ] 右键菜单
- [ ] 快捷渲染方式(其实就是一些 cusotmCell, 感觉可以不用提供,业务自己封装几个常用的就好了)
- [x] 行号: column.type === 'indexable'
- [ ] 数字
- [ ] 金钱
- [ ] tag
- [ ] badge
- [ ] enum
- [ ] 快捷键
- [ ] 按住 control 后,快速选择
Translation of this issue:
[Pro: Table] Advanced Table Components Demand Collection
- [x] i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.
What proBLEES THIS Feature SOLVE?
Provide a more advanced package for table components, providing more efficient, convenient ways.
What does The proposed API Look Like?
Reference: https://procomponents.ant.design/components/table
- 嵌套子表格
- 支持快捷键,比如,按住shift后勾选两行,可以把两行之间的行都选上。
子表格,在基础组件中就已经实现了,不过样式可能还有问题,需要调整一下。 快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?
快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?
idux的表格不属于那种腾讯文档可编辑复杂表格,快捷键只需要实现最常用的就行了。具体可看这个issue: https://github.com/TuSimple/naive-ui/issues/554
1.通过浮层控制列的显示隐藏(包含全选/反选)、控制列的顺序、控制列的固定、重置(包含显示隐藏列及列的顺序和固定列) 2.列的默认配置:a.显示隐藏 b.列的固定(左固定,不固定,右固定) 3.列宽的调整 4.嵌套表格(分组形式,嵌套页面形式两种) 5.可编辑表格 6.行的拖拽排序 7.列的筛选(表头漏斗的形式) 8.跨页全选(需考虑远程分页、排序、过滤的场景)
- 行编辑,单元格编辑(可配置)
- 多列排序
- 支持行上下拖动
- 支持列左右拖动
表格几乎全部的功能都已经列出来了,主要的核心功能都已经完成。 还剩余部分高级的扩展功能后续也会慢慢完善。 有感兴趣的功能也欢迎直接 PR, welcome。