# Dispatch Layout Presets block

> Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets

Warehouse wave dispatch board with draggable, resizable columns, layout preset buttons (Dispatch, Dock, Risk), reset, and a live numbered review-order strip. ReUI DataGrid, Frame, Badge, shadcn Button, status pills, capacity bars.

- Type: Pro block
- Category: [Drag & Drop](https://web.dev.reui.io/blocks/data-grid/drag-drop.md)
- Page: https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-3
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- MCP: `get_block("data-grid-drag-drop-3")`
- Built with: Badge, Button, Data Grid, Frame, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Column headers dragged sideways over fixed rows, with 3 one click layout presets, capacity mini bars and an exceptions footer

## Agent notes

- `FULFILLMENT_WAVES` holds the demo rows, and the footer's `exceptionCount` and `atRiskCount` are computed from them
- `REVIEW_LAYOUT_PRESETS` hardcodes the Dispatch, Dock and Risk orders as lists of column ids; swap in your own saved layouts
- `REVIEW_COLUMN_LABELS` names each column in the Review Order strip; add a label with every new column id or the raw id shows

## When not to use

- Fields shown or hidden from a settings popover, with density options: use [Course Catalog](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-2.md) (`get_block("data-grid-columns-2")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/) (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)

## Install

```bash
npx shadcn@latest add @reui/data-grid-drag-drop-3
```

## About Drag & Drop blocks

### When to use

- Ranked lists where a dragged row sets priority or precedence, such as a sprint backlog or routing rules
- Column layouts users rearrange by dragging headers, or swap among named presets
- File and folder hierarchies whose rows drag into another folder or between siblings to reorder

### When not to use

- A reorderable list or stack of cards with no table columns: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)
- A bare reorderable table assembled from parts in a layout you already have: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Choosing which fields show and how dense rows sit, with order left as it is: use the [Columns blocks](https://web.dev.reui.io/blocks/data-grid/columns.md)

### Agent notes

- `handleDragEnd` writes the new order to local `useState` only; save the rows, rules, columns or tree to your API from there
- `handleReset` restores the seeded demo order, so point it at the order your API last saved or remove it
- Each page.tsx centers the grid in a `min-h-svh` main with `max-w-7xl` and padding; drop that wrapper inside an app shell

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.