Bounded

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { useState } from "react";
5 
6const initialLayout: Layout = [0, 1, 2, 3, 4, 5].map((i) => ({
7  id: i.toString(),
8  x: (i * 2) % 12,
9  y: Math.floor(i / 6) * 2,
10  w: 2,
11  h: 2,
12}));
13 
14export function BoundedExample() {
15  const [layout, setLayout] = useState<Layout>(initialLayout);
16 
17  return (
18    <DndGrid
19      bounded
20      cols={12}
21      layout={layout}
22      onLayoutChange={setLayout}
23      rowHeight={50}
24    >
25      {layout.map((item) => (
26        <div className="grid-item" key={item.id}>
27          {item.id}
28        </div>
29      ))}
30    </DndGrid>
31  );
32}