AI agents: fetch the documentation index at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Server-side rendering (SSR)
Server rendering and hydration tips for React grid layouts.
DndGrid relies on DOM events and ResizeObserver. In Next.js App Router,
render it in a client component:
"use client";
import { DndGrid } from "@dnd-grid/react";DndGrid and ResponsiveDndGrid wait for their first measurement by default.
If you want to render immediately, pass measureBeforeMount={false} and an
initialWidth.
import { DndGrid } from "@dnd-grid/react";
return (
<DndGrid
{...props}
measureBeforeMount={false}
initialWidth={800}
/>
);If you already have a width (layout shells, SSR constraints), pass it directly:
import { DndGrid } from "@dnd-grid/react";
return <DndGrid width={800} {...props} />;Make sure the stylesheet is imported from a client entry or global CSS:
import "@dnd-grid/react/styles.css";