# Routing Rules block

> Routing rules data grid with drag-to-reorder priority and per-row enable switches

First-match-wins rule list where dragging a row sets precedence. Drag-drop rows, per-row Switch toggles, menu to move top/bottom or delete, reset, empty state. ReUI DataGrid, Badge; shadcn Card, DropdownMenu. For automations, routing config, rules.

- 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-2
- 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-2")`
- Built with: Badge, Button, Card, Data Grid, Dropdown Menu, Empty, Icon Stack, Item, Switch
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Top down rules with When and Then conditions, a 7 day match count and an Enabled switch that dims a rule without moving it

## Agent notes

- `ROUTING_RULES` is the sample rule set; `order` is match precedence and `normalizeOrder` rewrites it to row position after each move
- `handleToggle` flips `enabled` in local state only, and `matches7d` is static demo data summed into the header's weekly match total
- `handleAction` runs `move-top`, `move-bottom` and `remove` on local state, and remove deletes the rule with no confirm step

## When not to use

- Work items ranked by hand, with owners, due dates and effort points: use [Sprint Backlog](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-1.md) (`get_block("data-grid-drag-drop-1")`)

## 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-2
```

## 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.