Tree Table · React component

Name	Size
packages	412 kB
button	6 kB
index.tsx	2 kB
index.test.tsx	4 kB
table	14 kB
index.tsx	9 kB
docs	88 kB
app	80 kB
package.json	3 kB

Import

import { TreeRow, TreeCell, TreeLabel, TreeToggle } from '@rinzai/zen';

Examples

Planner

Amount per month, in paise; groups add up their items. */ amounts?: number[]; items?: Line[]; } const item = (label: string, rupees: number[]): Line => ({ key: label.toLowerCase().replace(/\W+/g, '-'), label, amounts: rupees.map((r) => r * 100), }); const PLAN: Line[] = [ { key: 'home', label: 'Home', items: [ item('Rent', [18500, 18500, 18500, 18500, 18500, 18500]), item('Electricity', [1400, 1250, 1600, 1900, 1700, 1300]), item('Internet', [799, 799, 799, 799, 799, 799]), ], }, { key: 'food', label: 'Food', items: [ item('Groceries', [9000, 9500, 12000, 9000, 9000, 9500]), item('Dining out', [3000, 2500, 6000, 2000, 2500, 3000]), ], }, { key: 'transport', label: 'Transport', items: [ item('Metro card', [1200, 1200, 1200, 1200, 1200, 1200]), item('Cabs', [1500, 1800, 2500, 1500, 1200, 1600]), ], }, ]; const total = (line: Line, month: number): number => line.items ? line.items.reduce((sum, i) => sum + total(i, month), 0) : (line.amounts?.[month] ?? 0); /** A budget grid like a planner: categories open into items, months run across, and the header, first column and totals stay put while it scrolls either way. Click an amount to change it. Rows are virtualized, so long plans stay fast.

Budget	Oct	Nov	Dec	Jan	Feb	Mar
Home	₹20,699	₹20,549	₹20,899	₹21,199	₹20,999	₹20,599
Rent
Electricity
Internet
Food	₹12,000	₹12,000	₹18,000	₹11,000	₹11,500	₹12,500
Groceries
Dining out
Transport	₹2,700	₹3,000	₹3,700	₹2,700	₹2,400	₹2,800
Metro card
Cabs
Total	₹35,399	₹35,549	₹42,599	₹34,899	₹34,899	₹35,899

API reference

<TreeRow>

A table row wired to useTree: tree semantics (aria-level, aria-expanded) and the open/close animation.

Prop	Type	Default
`row`Required	`TreeRowData<T>`	`—`
`tree`Required	`{ rows: TreeRowData<T>[]; toggle: (key: string) => void; isExpanded: (key: string) => boolean; expand: (key: string) => void; collapse: (key: string) => void; expandAll: () => void; collapseAll: () => void; rowProps: (row: TreeRowData<...>) => { ...; }; toggleProps: (row: TreeRowData<...>) => { ...; }; rowHeight: nu...`	`—`

<TreeCell>

A cell in a TreeRow: its content sits in a box whose height animates as groups open and close.

Prop	Type	Default
`numeric` Right-aligned, tabular digits.	`boolean`	`—`
`sticky` Stay in view when the table scrolls sideways.	`"left"`	`—`

<TreeLabel>

The first column's content: indented by depth, with the row's toggle (or a spacer, so labels line up).

Prop	Type	Default
`row`Required	`TreeRowData<T>`	`—`
`tree`Required	`{ rows: TreeRowData<T>[]; toggle: (key: string) => void; isExpanded: (key: string) => boolean; expand: (key: string) => void; collapse: (key: string) => void; expandAll: () => void; collapseAll: () => void; rowProps: (row: TreeRowData<...>) => { ...; }; toggleProps: (row: TreeRowData<...>) => { ...; }; rowHeight: nu...`	`—`
`className`	`string`	`—`
`indent` Indent per level, in px.	`number`	`20`

<TreeToggle>

Chevron button that opens and closes a row: points right when closed, down when open.

Prop	Type	Default
`expanded`Required	`boolean`	`—`
`onToggle`Required	`() => void`	`—`