Grid items

Working with grid items.

Basic 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>
</DndGrid>

Styling 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.

Item behaviour

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

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>

Drag regions

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>