For AI agents: the documentation index is at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Dynamic add/remove
Add and remove items at runtime.
How it works
Adding and removing items is a matter of updating the layout array; the grid reconciles children by key and the compactor closes any gap a removal leaves behind. This example appends items at the first free position and removes them from a control inside each cell.
The dragCancel prop is what makes the remove button usable: it marks a selector that should never start a drag, so clicking the button does not also pick the card up. Any interactive control inside a cell needs the same treatment.
Installation
npx shadcn@latest add https://blode.co/dnd-grid/r/dynamic-add-remove-example.jsonPublished with Edda