Basic example

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