AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Grid items
Working with grid items.
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>