Sortable

Drag-and-drop sortable lists with a beautiful default design. Built on top of the headless SortablePrimitive.

Default

Vertical list with a styled grip handle. Drag is constrained to the handle.

Task: Design wireframes

Task: Write unit tests

Task: Implement API

Task: Code review

Task: Deploy to staging

Full-Item Drag

Set AsHandle on SortableItem to make the entire item the drag target.

Alpha drag me

Beta drag me

Gamma drag me

Delta drag me

Horizontal

Set Orientation='Horizontal' for column-based reordering.

One

Two

Three

Four

Five

Custom Handle Icon

Provide a render fragment to SortableItemHandle to replace the default grip icon.

Backlog

In Progress

Review

Done

Composability with DataView — List

Wrap a DataView in a Sortable root and SortableContentPrimitive. Each SortableItem in the ListTemplate participates in drag-and-drop reordering with zero changes to DataView itself.

Design wireframes

Design

Write unit tests

Implement API

Backend

Code review

DevOps

Deploy to staging

Ops

Composability with DataView — Grid

Provide both ListTemplate and GridTemplate to keep the layout toggle. SortableItem works in both layouts — the same Sortable context covers both renderings.

Dashboard

Design

Auth flow

Security

Notifications

Settings

Config

Analytics

Data

Reports

Data

Composability with DataTable

Add Context to Sortable to receive a typed SortableScope. Pass s.RowAttributes directly to any grid, table, or list — no knowledge of internal attribute names needed.

	Task	Status
	Design wireframes	To Do
	Write unit tests	In Progress
	Implement API	To Do
	Code review	In Progress
	Deploy to staging	Done

Inside a Dialog

Sortable works inside a Dialog even though the dialog centres itself with a CSS transform. The drag overlay detects the transformed containing block on drag start and compensates, so the ghost stays under the cursor instead of drifting.

Kanban Board

Items drag freely between columns using the Group parameter. OnItemTransferredOut removes the item from its source list; OnItemTransferredIn inserts it into the target.

To Do (3)

Design mockup

Write specs

Plan sprint

In Progress (2)

Implement auth

API integration

Done (1)

Setup CI/CD

Cross-List Transfer — Table ↔ Table

Items transfer between two DataTables sharing the same Group. Consumer handles transfer-in and transfer-out; the component fires events with the resolved index.

Table A

	Name	Tag
	Design wireframes	Design
	Write unit tests	QA
	Implement API	Backend

Table B

	Name	Tag
	Code review	DevOps
	Deploy	Ops

Using the Primitive

For full control over styling, use the headless SortablePrimitive directly. See the Sortable Primitive docs for the complete API.

First item

Second item

Third item

Sortable<TItem> API Reference

Parameters for the Sortable component.

Prop	Type	Default	Description
Items	IList<TItem>	—	The list of items to sort. Required.
GetItemId	Func<TItem, string>	—	Extracts a unique string ID from each item. Required.
Orientation	SortableOrientation	Vertical	Drag axis: `Vertical`, `Horizontal`, `Grid`, or `Mixed`.
Group	string?	—	Group name for cross-list DnD. Instances with the same group can exchange items.
OnItemsReordered	EventCallback<IList<TItem>>	—	Fired after a successful same-list reorder. Receives the new ordered list.
OnItemTransferredOut	EventCallback<SortableTransferArgs>	—	Fired on the source instance when an item is transferred out. Consumer should remove the item.
OnItemTransferredIn	EventCallback<SortableTransferArgs>	—	Fired on the target instance when an item is transferred in. Consumer should insert the item at `args.Index`.
OnCanDrop	Func<SortableDragQueryArgs, bool>?	—	Optional drop-time guard on the target instance. Return `false` to reject the transfer.
OnDragStart	EventCallback<string>	—	Fired when a drag begins. Receives the active item ID.
OnDragEnd	EventCallback<SortableDragEndArgs>	—	Fired when a same-list drag ends. Carries ActiveId, OverId, FromIndex, ToIndex, and Moved.
OnDragCancel	EventCallback	—	Fired when a drag is cancelled via Escape or pointer cancel.
Class	string?	—	Additional CSS classes on the root element.

SortableContent API Reference

Parameters for the SortableContent component.

Prop	Type	Default	Description
Class	string?	flex flex-col gap-2	CSS classes merged with the default flex-column layout. Override with e.g. `Class="flex-row gap-3"` or `Class="block"` for table/DataView wrappers.
ChildContent	RenderFragment?	—	SortableItem children to render inside the container.

SortableItem API Reference

Parameters for the SortableItem component.

Prop	Type	Default	Description
Value	string	—	Unique item identifier matching GetItemId output. Required.
AsHandle	bool	false	When true the entire item surface is the drag handle.
Class	string?	—	Additional CSS classes merged with the default item styles.
ChildContent	RenderFragment?	—	Content rendered inside the item.

SortableItemHandle API Reference

Parameters for the SortableItemHandle component.

Prop	Type	Default	Description
ChildContent	RenderFragment?	—	Custom handle content. Renders a six-dot grip icon by default.
Class	string?	—	Additional CSS classes on the handle button.

SortableOverlay API Reference

Parameters for the SortableOverlay component.

Prop	Type	Default	Description
Class	string?	—	CSS classes merged with defaults (`rounded-lg shadow-lg opacity-90 transition-transform duration-150 data-[state=dragging]:scale-[1.05]`). Override shadow, opacity, scale, or easing.
ChildContent	RenderFragment<string>?	—	Custom ghost content. Context is the active item ID. When null the JS sensor auto-clones the dragged element.

Previous Slider Next Spinner