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

[funwaywang]

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]

我感觉确实有可能提供这样的 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]

感谢您的回复.
现在的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]

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

[L1yp]

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

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

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

[PZ-18664918826]

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

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

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

我没有问题哎

[SarathSantoshDamaraju]

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

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

我没有问题哎

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]

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

[L1yp]

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.