Guides
Row Ordering/DnD Guide
How to use and customize the row drag and drop and row ordering features of Shadcn Table
Shadcn Table has exposed all the APIs necessary to enable rich row drag-and-drop features that you can easily build to meet your needs. This includes the ability to reorder rows, drag rows to other tables, or drag rows to other UI in your application.
This is not the Sorting Guide, which is a different feature.
Relevant Table Options
Relevant State
Enable Row Ordering
A common use for row drag and drop is to allow users to reorder rows in a table. This can be done by setting the enableRowOrdering table option to true, then setting up an onDragEnd event handler on the stRowDragHandleProps table option.
const table = useShadcnTable({
columns,
data,
enableRowOrdering: true,
enableSorting: false, //usually you do not want to sort when re-ordering
stRowDragHandleProps: {
onDragEnd: (event, data) => {
//data re-ordering logic here
},
},
});
return <ShadcnTable table={table} />;Drag and Drop Rows to Other UI or Tables
The drag-and-drop features are not limited to just internally within the same table. You can also use them to drag rows to other UI elements in your application or even to other tables. This can be done by setting the enableRowDragging table option to true and setting up an onDragEnd event handler on the stRowDragHandleProps table option to perform whatever logic you want to happen when a row is dropped.
View Extra Storybook Examples