For AI agents: the documentation index is at /dnd-grid/docs/llms.txt. Append .md to any page URL, or send Accept: text/markdown, for the Markdown version of that page.
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.
Working with grid items.
Each child of DndGrid is a grid item. The child's key must match the layout id.
<DndGrid layout={layout}>
<div key="a">Content A</div>
<div key="b">Content B</div>
<div key="c">Content C</div>
</Published with Edda
Grid items are absolutely positioned with transforms. Style your content directly.
<DndGrid layout={layout}>
<div key="widget" className="my-widget">
<h2>Dashboard Widget</h2>
<p>Widget content goes here</p>
</div>
</DndGrid>.my-widget {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 16px;
height: 100%;
overflow: auto;
}Use height: 100% to fill the allocated space.
Use per-item fields to lock items, constrain size, or override grid settings.
const layout: Layout = [
{ id: "header", x: 0, y: 0, w: 12, h: 1, static: true },
{ id: "content", x: 0, y: 1, w: 8, h: 4, minW: 4, maxW: 10 },
{
id: "custom",
x: 8,
y: 1,
w: 4,
h: 4,
draggable: false,
resizable: true,
bounded: true,
resizeHandles: ["s", "e"],
},
];Resize handles support edges (n, e, s, w) and corners (ne, nw, se, sw).
Custom components must forward ref, style, className, and event handlers.
import { forwardRef } from "react";
interface WidgetProps {
title: string;
children: React.ReactNode;
}
const Widget = forwardRef<HTMLDivElement, WidgetProps>(
({ title, children, ...props }, ref) => {
return (
<div ref={ref} {...props} className="widget">
<h3>{title}</h3>
{children}
</div>
);
}
);
<DndGrid layout={layout}>
<Widget key="a" title="Sales">
<Chart data={salesData} />
</Widget>
</DndGrid>Limit dragging to a handle or exclude specific elements:
<DndGrid
dragHandle=".drag-handle"
dragCancel=".no-drag"
layout={layout}
>
<div key="a">
<div className="drag-handle">Drag here</div>
<button className="no-drag">Click me</button>
<div>Content</div>
</div>
</DndGrid>