# Sprint Backlog block

> Sprint backlog data grid with drag handle row reordering and live priority rank

Drag-to-prioritize task table where reordering rewrites the rank column; row handles, move-to-top/bottom and remove menu, reset, empty state. ReUI DataGrid, Frame, Badge; shadcn Avatar, DropdownMenu. Backlog, sprint, priority queue.

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

## Best for

Work items ranked by dragging, the top one flagged, each with a type icon, owner avatar, cycle, due date and effort points

## Agent notes

- `BACKLOG_ITEMS` is the seeded backlog; `normalizeOrder` rewrites `displayOrder` to row position after every move or remove
- `handleAction` runs `move-top`, `move-bottom` and `remove` on local state only, and remove deletes the row with no confirm step
- Sorting, filtering and pagination are left out so `displayOrder` stays the only order, and `manualPagination` makes every row render

## When not to use

- Match rules that run top down, each with its own on or off switch: use [Routing Rules](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-2.md) (`get_block("data-grid-drag-drop-2")`)
- Thousands of rows that must scroll without rendering every row at once: use [Card Payments Ledger](https://web.dev.reui.io/blocks/data-grid/virtualization/data-grid-virtualization-1.md) (`get_block("data-grid-virtualization-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-1
```

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