DragSortTable - Drag Sort Table

DragSortTable uses react-sortable-hoc for sorting, you need to provide rowKey to determine the unique value of the data, otherwise it will not work properly. Currently, sorting of data requested by request is not supported. The data requested by request can be stored and passed in through dataSource.

Demo

Drag to sort

拖拽排序
排序姓名年龄地址
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

Drag and drop to sort and edit the table

拖拽排序(默认把手)
排序姓名年龄地址
自定义Render[John Brown-0]
John Brown32New York No. 1 Lake Park
自定义Render[Jim Green-1]
Jim Green42London No. 1 Lake Park
自定义Render[Joe Black-2]
Joe Black32Sidney No. 1 Lake Park
拖拽排序(自定义把手)
排序姓名年龄地址
 1 - John Brown
John Brown32New York No. 1 Lake Park
 2 - Jim Green
Jim Green42London No. 1 Lake Park
 3 - Joe Black
Joe Black32Sidney No. 1 Lake Park

API

propertydescriptiontypedefault value
dragSortKeyIf this parameter is configured, the drag sorting handle will be displayed in the row corresponding to the key, allowing drag sortingany-
dragSortHandlerRenderThe function for rendering custom drag sorting handles. If dragSortKey is configured but this parameter is not configured, the default handle icon is used(rowData: T, idx: number) => React.ReactNode<MenuOutlined className= "dragSortDefaultHandle" style={{ cursor: 'grab', color: '#999' }} />
onDragSortEndDrag sort completion callback(newDataSource: T[]) => Promise<void> | void-