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.
Callbacks
Event callbacks for drag, resize, and drop operations.
type GridDragEvent<TData = unknown> = {
type: "dragStart" | "drag" | "dragEnd";
layout: Layout<TData>;
previousItem: LayoutItem<TData> | null | undefined;
item: LayoutItem<TData> | null | undefined;
placeholder: LayoutItem<TData> | null | undefined;
event: Event;
node: HTMLElement | null | undefined;
};
type GridResizeEvent<TData = unknown> = {
type: "resizeStart" | "resize" | "resizeEnd";
layout: Layout<TData>;
previousItem: LayoutItem<TData> | null | undefined;
item: LayoutItem<TData> | null | undefined;
placeholder: LayoutItem<TData> | null | undefined;
event: Event;
node: HTMLElement | null | undefined;
handle: ResizeHandleAxis;
};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.