C&C Docs
Log in

cnc-tree

A collapsible tree of labelled rows with optional icons. Selection, expansion and highlighting are three separate things here, and the page is mostly about keeping them apart.

Quick start

Give it a root tree and bind $selected. Clicking a row selects it and emits nodeclick with the id.

selected: scope 

<cnc-tree
  $selected="picked"
  @nodeclick="picked = $event.detail.nodeId"
  $root='{
    "children": [
      { "id": "src", "label": "src", "icon": "heroicons/folder", "children": [
        { "id": "auth", "label": "auth.rs", "highlighted": true }
      ]}
    ]
  }'
></cnc-tree>

Node fields

Field Purpose
id The node's identity, matched by selected and carried in the event.
label The row's text.
children An array of the same shape. A node with children is a group and draws a toggle.
highlighted Marks the row as highlighted — a search hit, a changed file. Distinct from SELECTED, which the user does by clicking.
style An inline style string applied to the row, for colouring one node without a stylesheet.

Usage guidance

Keep SELECTED, EXPANDED and HIGHLIGHTED apart. Selection is what the user clicked and lives in selected; expansion is which groups are open and lives in expanded; highlighting is a property of the DATA — a search hit, a modified file — and lives on the node. Conflating the last two is the usual mistake: marking nodes highlighted does not reveal them, so bind expanded as well when a search should open the branches it matched.

Bind expanded for any tree the user returns to. Without it every re-render collapses the tree back to its initial shape, which in a sidebar means losing their place on each navigation.

The event carries the id alone, so keep your own tree to hand. For a file-shaped tree with connector lines use cnc-tree-directory; for rows with COLUMNS use cnc-treetable2, and for a tree inside a form field cnc-select-tree.

← Back to Widgets