# Tree Table

Rows that roll up, with guides for depth. Selecting rows totals their spend in the footer.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/tree-table
```

## Usage

```tsx
import { TreeTable } from '@/components/fetaui/tree-table'

export function Example({ rows }) {
  return <TreeTable rows={rows} defaultExpanded={['platform']} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| rows | TreeRow[] | required |
| defaultExpanded | string[] | first row |
| defaultSelected | string[] | [] |
| format | (value) => string | dollars |
| animated | boolean | true |

## When to use

- When rows roll up into groups, like teams and their services.
- When people total a hand picked set of rows.

## When not to use

- For files and navigation: use Tree View.
- For flat records: use Data Table.

## Accessibility

- Uses treegrid with aria-level, aria-setsize, aria-posinset and aria-expanded.
- The total is announced politely.

## Motion

- Children reveal in 240 ms with a 30 ms stagger and the chevron turns 90°.
- The footer total counts over 240 ms.
- With reduced motion, rows appear in place.