Tree View

Foundations · ContextMenu, InlineEdit, KeyValue, TreeView

Hierarchies, in-place editing and object menus: TreeView, InlineEdit, ContextMenu.

TreeView: items ({id, label, icon, meta, children}), defaultOpen (ids), selected + onSelect, label. Arrow keys open, close and move; meta sits right in mono.
InlineEdit: value, onSave(v), options (select instead of text), mono, type, display(v), align. Double-click or Enter edits, Enter saves, Esc cancels.
ContextMenu: items (Menu items), children (the target). Right-click or a long press opens it at the pointer; destructive actions last.

PreviewCode

FollowerX GmbH€48,210
- Northwind€31,400
  - Ads€9,800
  - SMM providers€14,100
- Chatteo€12,610
Trepte Ventures UG€4,200

Double-click or Enter to edit

Category: Software
Amount: 1,240.00

Right-click or long-press here

Props

ContextMenu

Prop	Type	Notes
`items`	`(MenuItem \| "-")[]`	Required
`children`	`ReactNode`	Required
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

InlineEdit

Prop	Type	Notes
`value`	`string`	Required
`onSave?`	`(v: string) => void`
`options?`	`string[]`
`mono?`	`boolean`
`type?`	`string`
`display?`	`(v: string) => ReactNode`
`align?`	`"left" \| "right"`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

KeyValue

Prop	Type	Notes
`items`	`KeyValueItem[]`	Required
`dense?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

TreeView

Prop	Type	Notes
`items`	`TreeItem[]`	Required
`defaultOpen?`	`string[]`
`selected?`	`string`
`onSelect?`	`(id: string) => void`
`label?`	`string`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.