Allow overlap

1"use client";
2 
3import {
4  DndGrid,
5  type Layout,
6  verticalCompactor,
7  verticalOverlapCompactor,
8} from "@dnd-grid/react";
9import { useState } from "react";
10 
11const initialLayout: Layout = [
12  { id: "a", x: 0, y: 0, w: 3, h: 2 },
13  { id: "b", x: 1, y: 0, w: 3, h: 2 },
14  { id: "c", x: 2, y: 1, w: 3, h: 2 },
15  { id: "d", x: 6, y: 0, w: 3, h: 3 },
16];
17 
18export function AllowOverlapExample() {
19  const [layout, setLayout] = useState<Layout>(initialLayout);
20  const [allowOverlap, setAllowOverlap] = useState(true);
21  const compactor = allowOverlap ? verticalOverlapCompactor : verticalCompactor;
22 
23  return (
24    <div>
25      <button onClick={() => setAllowOverlap((prev) => !prev)} type="button">
26        {allowOverlap ? "Disable overlap" : "Enable overlap"}
27      </button>
28 
29      <DndGrid
30        cols={12}
31        compactor={compactor}
32        layout={layout}
33        onLayoutChange={setLayout}
34        rowHeight={50}
35      >
36        {layout.map((item) => (
37          <div className="grid-item" key={item.id}>
38            {item.id}
39          </div>
40        ))}
41      </DndGrid>
42    </div>
43  );
44}