tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.08k stars 1.67k forks source link

Data Table allow user drag rows to re-order them. 数据表格支持用户鼠标拖拽行以调整行顺序. #1563

Closed funwaywang closed 7 months ago

funwaywang commented 2 years ago

This function solves the problem (这个功能解决的问题)

Sometimes, the rows in the table have custom sortable fields, such as "priority, sort index". It would be great if the user is allowed to drag the rows to customize their order. 很多时候数据表格里的行有自定义的排序属性, 比如优先级等. 希望能提供一个开关, 允许用户拖拽行自定排序.

Expected API (期望的 API)

1). provide a switch to turn on custom-sort <n-data-table ... :drag-to-sort="true" />

2). provider a callback, handle sort event on-sort-drop (row: object, nextSibling: object) => void

the behavior like dragula (https://bevacqua.github.io/dragula/)

07akioni commented 2 years ago

我感觉确实有可能提供这样的 API,但是数据量大的时候性能应该还是堪忧。

而且对于固定列的支持可能会存在一些问题,不过这些都是我的猜测

I think it's possible to provide api like that. However performance won't be good when data scale is large.

Also there would be some problem with fixed column table. However maybe there won't be, I'm not sure.

funwaywang commented 2 years ago

感谢您的回复. 现在的DataTable功能非常强大, 我明白对它维护和修改都是一件艰巨的工作, 不过这个功能确实有用. 基本上不会在大数据量的场景使用这个功能, 数据行数一般不会超过20个左右, 否则失去了让用户排序的意义. 再则如果和固定列冲突硬性二选一也是可以接受的. 默认不会开启这个功能.

I understand that the DataTable component is very powerful and maybe difficult to maintain, but this feature is very useful. Basically, we won't use this feature when data is large, mostly the rows number will less than 20. If it's hard to working with fixed column, I think we can just force disable one to enable one. Thank you.

jk4235 commented 2 years ago

我感觉这个不太适合做到组件内,对于固定列/固定表头/表头分组之类的实现可能都会有冲突.后续维护目测会比较麻烦.真的有需求可以用Sortable.js自己包裹下,根据自己的业务去实现就好了.真实业务中我更推荐提供一个表格列配置选项,这些配置用户配置过一次之后多半是不会再动了.

L1yp commented 2 years ago

我感觉这个不太适合做到组件内,对于固定列/固定表头/表头分组之类的实现可能都会有冲突.后续维护目测会比较麻烦.真的有需求可以用Sortable.js自己包裹下,根据自己的业务去实现就好了.真实业务中我更推荐提供一个表格列配置选项,这些配置用户配置过一次之后多半是不会再动了.

我用sortableJS对DOM做过,但是有点问题,请问您能公开一下相关代码吗?

当我拖拽排序之后,tableData是不变的,如果我在onEnd函数通过splice去修改tableData就会导致dom重新渲染导致重排序,结果就会不正确

PZ-18664918826 commented 2 years ago

我感觉这个不太适合做到组件内,对于固定列/固定表头/表头分组之类的实现可能都会有冲突.后续维护目测会比较麻烦.真的有需求可以用Sortable.js自己包裹下,根据自己的业务去实现就好了.真实业务中我更推荐提供一个表格列配置选项,这些配置用户配置过一次之后多半是不会再动了.

我用sortableJS对DOM做过,但是有点问题,请问您能公开一下相关代码吗?

当我拖拽排序之后,tableData是不变的,如果我在onEnd函数通过splice去修改tableData就会导致dom重新渲染导致重排序,结果就会不正确

我没有问题哎 image image

SarathSantoshDamaraju commented 1 year ago

我感觉这个不太适合做到组件内,对于固定列/固定表头/表头分组之类的实现可能都会有冲突.后续维护目测会比较麻烦.真的有需求可以用Sortable.js自己包裹下,根据自己的业务去实现就好了.真实业务中我更推荐提供一个表格列配置选项,这些配置用户配置过一次之后多半是不会再动了.

我用sortableJS对DOM做过,但是有点问题,请问您能公开一下相关代码吗? 当我拖拽排序之后,tableData是不变的,如果我在onEnd函数通过splice去修改tableData就会导致dom重新渲染导致重排序,结果就会不正确

我没有问题哎 image image

How do you call setSort ?. sorter is on column level and draggable is for row. This might render Broken Ui. I have a necessity for this, can someone share a codesandbox link ?

L1yp commented 1 year ago

It's my problem. naive-ui works well. because n-data-table`s data is not reactive.

L1yp commented 1 year ago

It's my problem. naive-ui works well. because n-data-table`s data is not reactive. I had a problem with using element-plus when I was testing, because el-table 's data is responsive.

SarathSantoshDamaraju commented 1 year ago

How did you solve that problem, because i have the same need

L1yp commented 1 year ago

How did you solve that problem, because i have the same need

yes,here is the demowith vxe-table

L1yp commented 1 year ago

我感觉这个不太适合做到组件内,对于固定列/固定表头/表头分组之类的实现可能都会有冲突.后续维护目测会比较麻烦.真的有需求可以用Sortable.js自己包裹下,根据自己的业务去实现就好了.真实业务中我更推荐提供一个表格列配置选项,这些配置用户配置过一次之后多半是不会再动了.

我用sortableJS对DOM做过,但是有点问题,请问您能公开一下相关代码吗? 当我拖拽排序之后,tableData是不变的,如果我在onEnd函数通过splice去修改tableData就会导致dom重新渲染导致重排序,结果就会不正确

我没有问题哎 image image

How do you call setSort ?. sorter is on column level and draggable is for row. This might render Broken Ui. I have a necessity for this, can someone share a codesandbox link ?

you can try this demo

SarathSantoshDamaraju commented 1 year ago

How did you solve that problem, because i have the same need

yes,here is the demowith vxe-table

Thank you, but i needed to drag sort the ROWS and i have managed to get to some point of it.

if someone looking to get the Row sorting on the data table, this might help https://codesandbox.io/s/goofy-neco-zj2i7g?file=/src/Demo2.vue

L1yp commented 1 year ago

How did you solve that problem, because i have the same need

yes,here is the demowith vxe-table

Thank you, but i needed to drag sort the ROWS and i have managed to get to some point of it.

if someone looking to get the Row sorting on the data table, this might help https://codesandbox.io/s/goofy-neco-zj2i7g?file=/src/Demo2.vue

I tested it and work well👍

jahnli commented 7 months ago

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

JS-mark commented 3 months ago

这个功能很有用啊