Tree

Nested items that expand and collapse.

Home

Products

Linen shirt

Oak dining chairDraft

Journal

Tree.tsx

import {Badge, Tree, TreeItem} from 'alinea/components'
import {LucideFile, LucideFolder} from 'alinea/dashboard/icons'

export function TreeExample() {
  return (
    <Tree
      aria-label="Pages"
      defaultExpandedKeys={['products']}
      selectionMode="single"
      defaultSelectedKeys={new Set(['shirt'])}
      style={{width: 280}}
    >
      <TreeItem id="home" title="Home" icon={LucideFile} />
      <TreeItem id="products" title="Products" icon={LucideFolder}>
        <TreeItem id="shirt" title="Linen shirt" icon={LucideFile} />
        <TreeItem
          id="chair"
          title="Oak dining chair"
          icon={LucideFile}
          suffix={
            <Badge size="sm" status="draft">
              Draft
            </Badge>
          }
        />
      </TreeItem>
      <TreeItem id="journal" title="Journal" icon={LucideFolder} />
    </Tree>
  )
}

Props

`<Tree>`

PropTypeDefaultDescription

itemsIterable<T>Default –Items to render with the children function

children*ReactNode | ((item: T) => ReactNode)Default –

expandedKeysIterable<Key>Default –

defaultExpandedKeysIterable<Key>Default –

onExpandedChange(keys: Set<Key>) => voidDefault –

onAction(key: Key) => voidDefault –Called when an item is activated with a click or Enter. With single selection a click selects the item and a double click or Enter activates it, with multiple selection a click toggles the item once items are selected.

renderEmptyState() => ReactNodeDefault –

virtualizedbooleanDefault –Only render the rows in view, every row must be rowHeight tall

rowHeightnumberDefault 34Row height in pixels when virtualized, defaults to 34

refRef<HTMLDivElement>Default –

`<TreeItem>`

PropTypeDefaultDescription

idKeyDefault –

title*stringDefault –Plain text title, also used for typeahead

labelReactNodeDefault –Rendered instead of the title

iconIconType | ReactElementDefault –

hrefstringDefault –Renders the icon and title as links, pressing the row still selects

suffixReactNodeDefault –Trailing content such as status icons

hasChildItemsbooleanDefault –Shows the expand button, set when children load lazily

hideDragHandlebooleanDefault –Hides the drag handle of this item. Its row can still be dragged with a pointer, reject drops of the item with canDrop.

itemsIterable<T>Default –Child items to render with the children function