For AI agents: the documentation index is at /dnd-grid/docs/llms.txt. Append .md to any page URL, or send Accept: text/markdown, for the Markdown version of that page.
For AI agents: the documentation index is at llms.txt. Markdown versions are available by appending .md to any page URL, including this page's markdown.
Event callbacks for drag, resize, and drop operations.
dnd-grid provides callbacks for drag, resize, drop, and layout changes.
Drag and resize callbacks receive an event object:
type GridDragEvent<TData = unknown> = {
type: "dragStart" | "drag" | "dragEnd";
layout:
Published with Edda
onLayoutChange(layout: Layout) => voidFires whenever the layout changes. Use this to persist layout state.
onDragStart(event: GridDragEvent) => voidFires when a drag operation begins.
onDrag(event: GridDragEvent) => voidFires continuously during drag.
onDragEnd(event: GridDragEvent) => voidFires when a drag operation ends.
onResizeStart(event: GridResizeEvent) => voidFires when a resize operation begins.
onResize(event: GridResizeEvent) => voidFires continuously during resize.
onResizeEnd(event: GridResizeEvent) => voidFires when a resize operation ends.
onDrop(layout: Layout, item: LayoutItem | null | undefined, event: Event) => voidFires when an external item is dropped onto the grid.
onDropDragOver(event?: DragOverEvent) => { w?: number; h?: number } | false | null | undefinedCalled when an external item is dragged over the grid. Return size or false to reject the drop.
onDrag and onResize fire frequently. Avoid expensive work in these callbacks.
For expensive updates, prefer onDragEnd or onResizeEnd, or set
callbackThrottle on DndGrid to limit call frequency.