Layout item

Layout item type reference.

Layout type

Layout<TData> is an array of LayoutItem<TData> objects:

import { type Layout } from "@dnd-grid/react";

type CardData = { kind: "chart" | "text" };

const layout: Layout<CardData> = [
  { id: "a", x: 0, y: 0, w: 2, h: 2, data: { kind: "chart" } },
  { id: "b", x: 2, y: 0, w: 2, h: 2, data: { kind: "text" } },
];

Properties

Required

idstringrequired

Unique id. Must match the child's key.

xnumberrequired

X position in grid units (0-based).

ynumberrequired

Y position in grid units (0-based).

wnumberrequired

Width in grid units.

hnumberrequired

Height in grid units.

Optional

minWnumber

Minimum width.

maxWnumber

Maximum width.

minHnumber

Minimum height.

maxHnumber

Maximum height.

constraintsLayoutConstraint[]

Per-item drag and resize constraints.

staticbooleanDefault: false

If true, the item is locked.

draggableboolean

Override grid drag setting.

resizableboolean

Override grid resize setting.

boundedboolean

Override grid bounded setting.

resizeHandlesResizeHandleAxis[]

Override grid resize handles.

dataTData

Optional typed metadata for the item.

Examples

With size constraints

const layout: Layout = [
  {
    id: "constrained",
    x: 0, y: 0, w: 4, h: 3,
    minW: 2, maxW: 8,
    minH: 2, maxH: 6,
  },
];