Portal
Render the grid through createPortal into a separate DOM container while keeping drag and resize behaviour intact in this dnd-grid React portal example.
Grid rendered via createPortal into a separate container.
How it works
The grid measures its own container, so rendering it through createPortal into a different part of the DOM works as long as that container exists before the grid mounts. This example portals the whole grid into a separate bordered region.
Portals are how you keep a grid inside a modal, a drawer, or a resizable split pane without moving it in the React tree. The mounted flag here avoids rendering the portal during the server pass, when the target ref is still null.
Related examples
- Multiple instances — Run two independent dnd-grid instances on a single page, each with its own draggable and resizable layout state, in this multiple-instances React example.
- Composition — Items read their own drag and resize state with useDndGridItemState to render state-aware content inside each cell in this dnd-grid React composition example.
- Scale — Keep drag and resize maths correct when the grid is visually scaled with CSS transforms in this scale-aware dnd-grid React grid layout 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.