TreeList
The records of the ambient <List> as a collapsible tree, nested by a parent field. Give the list a perPage that covers the whole tree: a record whose parent is on another page shows as a root.
Installation
pnpm dlx shadcn@latest add @chelone/tree-listThe records of the ambient <List> as a collapsible tree, nested by a parent field. Give the list a perPage that covers the whole tree: a record whose parent is on another page shows as a root.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| defaultExpanded | boolean | — | Whether branches start open. Default `false`. |
| empty | ReactNode | — | Rendered with no records, in place of `ListNoResults`. |
| iconMap | Record<string, ComponentType<{ className?: string }>> | — | |
| iconSource | string | — | The field whose value picks a component from `iconMap`. |
| linkType | false | "show" | "edit" | — | Where a row links to when `onSelect` is not given. `edit` by default, `show` when the resource has no edit view, and an inert row when it has neither. `false` leaves rows inert. |
| loading | ReactNode | — | Rendered while the list is pending, in place of `SimpleListLoading`. |
| onSelect | (record: LooseRecord) => void | — | Called with the record when a row is selected, in place of navigating. |
| parentSource | string | — | The field holding the parent's id; a dotted path reads a nested value. |
| titleSource | string | — | The string field shown as the row title; the record representation otherwise. |