Dynamic add/remove
Add and remove grid items at runtime and watch the layout compact and reflow automatically in this dynamic add and remove dnd-grid React grid example.
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.
Related examples
- Toolbox — Move items between the grid and a separate toolbox panel, dragging blocks in and out of an off-grid tray in this toolbox dnd-grid React example.
- Local storage — Persist the grid layout to local storage and restore it on reload so user arrangements survive page refreshes in this dnd-grid React persistence example.
- Basic example — A simple draggable and resizable grid layout for React showing the core dnd-grid setup with movable, resizable items and live layout change handling.
- Kitchen sink — A full-featured layout builder with external drag, multi-select, an action bar, and an edit panel, showing everything dnd-grid can do in one React example.