CLI setup for DnD code on this page
If you copy code from the Snippet or Component tabs, run the command below first. It scaffolds AfnoUI, installs the pointer-event DnD primitives at components/dnd/*, and pulls the runtime deps the snippets import (lucide-react, clsx, tailwind-merge).
Alternatively, install a ready-made demo with afnoui add dnd/<variant>. That command pulls the DnD primitives and the variant's example file (under dnd/<variant>/, a sibling of components/) in one go — you don't need to run the init step separately.
Install with:
npx afnoui init --dnd Custom Pointer DnD
Table row reorder
Drag the grip handle to reorder rows in a configuration table — toggles, badges, and actions stay live.
axis: y
grip handle
live cells
Install with:
npx afnoui add dnd/table-reorderTable row reorder
Company Type
Company field configuration
Key
Display Value
Status
Type
Position
Usage
Actions
owner
OWNER
System Default
01
—
3pl
3PL
System Default
02
—
both
BOTH
System Default
03
—
vendor
VENDOR
Custom
04
—