SSR

dnd-grid is safe to render on the server. DndGrid and ResponsiveDndGrid measure their container width on the client, so use the patterns below to avoid layout jumps and hydration warnings.

Use a client component

DndGrid relies on DOM events and ResizeObserver. In Next.js App Router, render it in a client component:

Copy"use client";

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

Auto width (default)

DndGrid and ResponsiveDndGrid wait for their first measurement by default. If you want to render immediately, pass measureBeforeMount={false} and an initialWidth.

Copyimport { DndGrid } from "@dnd-grid/react";

return (
  <DndGrid
    {...props}
    measureBeforeMount={false}
    initialWidth={800}
  />
);

Explicit width (known ahead of time)

If you already have a width (layout shells, SSR constraints), pass it directly:

Copyimport { DndGrid } from "@dnd-grid/react";

return <DndGrid width={800} {...props} />;

Keep styles global

Make sure the stylesheet is imported from a client entry or global CSS:

Copyimport "@dnd-grid/react/styles.css";