cnc-treetable
A tree whose rows are grid rows, so nested content lines up in columns. Rows collapse, indent by
depth, and can be dragged into a new order. The newer cnc-treetable2 covers the
same ground with a slotted row template; this one renders its rows itself.
Quick start
Bind a tree to root. Clicking a row selects it and emits nodeclick;
clicking the chevron expands.
last nodeclick: (none)
<cnc-treetable
:root="basicRoot"
@nodeclick="picked = $event.detail.nodeId"
></cnc-treetable>Node fields
| Field | Purpose |
|---|---|
| id |
The node's identity — or whichever field id-field names.
|
| label |
The row's text. name is used as a fallback when there is no label.
|
| icon | A cnc-icon name shown before the label. |
| children | An array of the same shape. |
Usage guidance
Prefer cnc-treetable2 for new work. It takes a slotted row template instead of
rendering rows itself, so columns are yours to define, and its drag reports moves in a form you
can persist. This widget is the right choice mainly where an existing page already uses it.
Set id-field rather than reshaping your data. Rows, selection and both events all
key on it, so pointing it at the field your records already have is cheaper than mapping every
node to gain an id.
Do not treat dragend as a reorder you can save. It names the row that moved and
nothing about where it went, and root is unchanged — so a handler that
persists on this event will write the OLD order back and undo the move on the next render.