# Sub-Task Tracker block

> Task queue data grid with expandable parent rows that reveal nested sub-tasks inline

Issue tracker / task management grid where parent tasks expand to inline sub-tasks with their own checkboxes, status and assignee. Tabs, filters, settings popover for ordering and columns. ReUI DataGrid, Filters, Frame, Badge, shadcn Tabs, Checkbox.

- Type: Pro block
- Category: [Expansion](https://web.dev.reui.io/blocks/data-grid/expansion.md)
- Page: https://web.dev.reui.io/blocks/data-grid/expansion/data-grid-expansion-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-expansion-1")`
- Built with: Avatar, Badge, Button, Checkbox, Data Grid, Dropdown Menu, Field, Filters, Frame, Popover, Select, Separator, Switch, Tabs, Toggle Group
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Checkable sub-task rows in the parent's own columns, with a rule builder filter and All tasks, Active and Backlog tab counts

## Agent notes

- `TASKS` seeds the `tasks` state; `handleTaskCompletionChange` and `handleSubIssueCompletionChange` only edit it locally, so persist there
- `handleTaskAction`, `handleSubIssueAction`, `handleSaveView` and the New task button only call `showTaskToast`; wire real routes and saves
- Edited rows get the fixed `DEMO_UPDATED_AT` and an `updatedLabel` of Just now; stamp the server time instead

## When not to use

- A flat work queue that needs a table and card view toggle, with no nested rows: use [Work Queue](https://web.dev.reui.io/blocks/data-grid/columns/data-grid-columns-3.md) (`get_block("data-grid-columns-3")`)
- Thousands of flat rows loaded by infinite scroll, with bulk row actions: 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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-expansion-1
```

## About Expansion blocks

### When to use

- Parent records that open in place to show the child rows or detail cards they hold
- Rolled up totals, such as a cash or budget line, that drill down to the items behind them
- Task and approval queues where each item carries its own sub-tasks or checklist

### When not to use

- Rows bucketed by a shared field value, or a tree nested more than one level deep: use the [Grouping blocks](https://web.dev.reui.io/blocks/data-grid/grouping.md)
- A finished page of flat records where every row stands alone, with nothing nested: use the [Base blocks](https://web.dev.reui.io/blocks/data-grid/base.md)
- A table you assemble from the bare parts, where no row opens to reveal more: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)

### Agent notes

- Each page.tsx centers the view in a `min-h-svh` main capped at `max-w-7xl` beside an sr-only `h1`; keep only the view inside your app shell
- `pageSize` counts parent rows only, so open children always stay on their parent's page; page your API by parent and return children with it

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.