Static items

1"use client";
2 
3import { DndGrid, type Layout } from "@dnd-grid/react";
4import { useState } from "react";
5 
6const initialLayout: Layout = [
7  { id: "0", x: 0, y: 0, w: 3, h: 2, static: true },
8  { id: "1", x: 3, y: 0, w: 3, h: 2 },
9  { id: "2", x: 6, y: 0, w: 3, h: 2, static: true },
10  { id: "3", x: 9, y: 0, w: 3, h: 2 },
11];
12 
13export function StaticElementsExample() {
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
25          className={item.static ? "static-item" : "grid-item"}
26          key={item.id}
27        >
28          {item.id} {item.static ? "(static)" : ""}
29        </div>
30      ))}
31    </DndGrid>
32  );
33}