Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pro:table] 高级表格组件需求收集 #761

Closed
45 of 70 tasks
danranVm opened this issue Feb 22, 2022 · 8 comments
Closed
45 of 70 tasks

[pro:table] 高级表格组件需求收集 #761

danranVm opened this issue Feb 22, 2022 · 8 comments
Assignees

Comments

@danranVm
Copy link
Member

danranVm commented Feb 22, 2022

  • 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 中已经集成的功能

通用能力

  • 自动高度:autoHeight
  • 有无边框: borderless
  • 自定义事件和样式: customAdditional
    • 行样式,例如:斑马纹
    • 各种原生事件
  • 文本超长处理:ellipsis
  • 自定义空数据内容:empty
  • 自定义表格头部:hader
  • 表格分页: pagination
  • 表格宽高和滚动条, :scroll
    • 固定表头
  • 大小: size
  • 加载中:spin
  • 粘性表头(吸顶): sticky
  • 虚拟滚动:virtual
  • 自定义页尾(总结栏)

列配置

  • 对齐方式: column.align
  • 合并单元格:column.colSpan + column.rowSpan
  • 合并表头:column.titleColSpan
  • 表头分组:column.children
  • 固定列: column.fixed
  • 表格宽度: column.width
  • 自定义渲染单元格: column.customCell
  • 自定义渲染表头:column.customTitle
  • 排序:column.sortable
    • 单列
    • 多列
    • 服务端
  • 筛选:column.filterable
    • 单字段
    • 多字段
    • 服务端
    • 自定义下拉菜单
  • 可展开:column.type === 'expandable'
    • 单行展开
    • 树型表格
    • 嵌套表格(其实就是单行展开,样式可能还需要优化)
  • 可选择:column.type === 'selectable'
    • 单选
    • 多选
    • 点击行选择(单击,双击)
    • 选择全部,当前页,反选,取消全部,自定义规则

高级功能

IxProTable 中扩展的功能

  • 表格头部工具栏 (可能以插件的形式提供)
    • 刷新
    • 导入
    • 导出
    • 打印
  • 布局设置: IxProTableLayoutTool
    • 列显示隐藏 column.changeVisiable
    • 列拖拽排序 column.changeIndex
    • 列固定 column.changeFixed
    • 列搜索
    • 表格大小调整
  • 列宽拖动 column.resizable
  • 行拖拽排序
  • 表格行修改,删除,新增
    • 编辑
    • 删除
    • 新增
  • 右键菜单
  • 快捷渲染方式(其实就是一些 cusotmCell, 感觉可以不用提供,业务自己封装几个常用的就好了)
    • 行号: column.type === 'indexable'
    • 数字
    • 金钱
    • tag
    • badge
    • enum
  • 快捷键
    • 按住 control 后,快速选择
@idux-bot
Copy link

idux-bot bot commented Feb 22, 2022

Translation of this issue:

[Pro: Table] Advanced Table Components Demand Collection

  • 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

@brenner8023
Copy link
Member

  • 嵌套子表格
  • 支持快捷键,比如,按住shift后勾选两行,可以把两行之间的行都选上。

@danranVm
Copy link
Member Author

子表格,在基础组件中就已经实现了,不过样式可能还有问题,需要调整一下。
快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?

@brenner8023
Copy link
Member

快捷键这个,可以更详细的列一下么?不然就只能想到一个实现一个?

idux的表格不属于那种腾讯文档可编辑复杂表格,快捷键只需要实现最常用的就行了。具体可看这个issue:
tusen-ai/naive-ui#554

@hele10086
Copy link
Contributor

1.通过浮层控制列的显示隐藏(包含全选/反选)、控制列的顺序、控制列的固定、重置(包含显示隐藏列及列的顺序和固定列)
2.列的默认配置:a.显示隐藏 b.列的固定(左固定,不固定,右固定)
3.列宽的调整
4.嵌套表格(分组形式,嵌套页面形式两种)
5.可编辑表格
6.行的拖拽排序
7.列的筛选(表头漏斗的形式)
8.跨页全选(需考虑远程分页、排序、过滤的场景)

@Darma1106
Copy link
Contributor

Darma1106 commented Feb 24, 2022

  • 行编辑,单元格编辑(可配置)
  • 多列排序

@lvzero535
Copy link

  • 支持行上下拖动
  • 支持列左右拖动

@danranVm
Copy link
Member Author

表格几乎全部的功能都已经列出来了,主要的核心功能都已经完成。
还剩余部分高级的扩展功能后续也会慢慢完善。
有感兴趣的功能也欢迎直接 PR, welcome。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants