fetaUI
GitHub

Tree Table

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

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/tree-table
Playground
NameOwnerResourcesMonthly
PlatformNathan48$4,450
API gatewayDaniel16$2,150
api-produs-east-1Daniel12$1,840
api-stagingus-east-1Daniel4$310
Build runnersMarcus24$1,120
Select rows to total their spend
Selected
NameOwnerResourcesMonthly
PlatformNathan48$4,450
API gatewayDaniel16$2,150
api-produs-east-1Daniel12$1,840
api-stagingus-east-1Daniel4$310
Build runnersMarcus24$1,120
3 rows · $2,150 a month
Collapsed
NameOwnerResourcesMonthly
Select rows to total their spend
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/tree-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.

Responsive behavior

  • Only open branches render.
  • Mobile keeps Name and Monthly. Rows grow to 52.

Performance

  • Only open branches render. The flat row list is memoized on rows and open state.
  • The footer total tweens one number.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import TreeTable and the TreeRow type. Props: rows, defaultExpanded, defaultSelected, format, label, headers, emptyHint, totalSuffix, animated.
  • Rows need id, name and monthly, the value the footer totals. sub, owner, resources and children are optional, and the Owner or Resources column hides when no row has it. label, headers, emptyHint and totalSuffix replace the spend wording.
  • format sets the money text. Totals are computed from the selection: a picked row counts its own monthly, not its children again. Nothing is saved.
/docs/components/tree-table/markdown
PreviousData Table
NextTree View

Related

TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.Tree ViewComponentA file tree with guides, inline renaming and the selected path in the footer.Data TableComponentSort, search, filter, page and act in bulk on one set of records, with Data Table Header and Table Toolbar on the tray.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.