C&C Docs
Log in

cnc-treetable2

A tree rendered as a grid: collapsible rows, drawn branch connectors, aligned columns across every depth, and optional drag-and-drop reordering that previews the drop before the pointer is released. Rows are yours to compose through slots, the expander's glyph and seat are yours to choose, and a tree too large to render at all can be windowed with a single property.

Quick start

Bind :root to an object with a children array. Every node needs an id and a label; a node with children of its own gets an expander, in place of the branch connector a leaf draws there. The tree starts with every group shut — expand="true" opens it.

src
app.mjs
routes
index.html
about.html
package.json 
<cnc-treetable2 :root="quickRoot" expand="true"></cnc-treetable2>

// in the block's state
quickRoot: {
  id: 'quick',
  children: [
    { id: 'src', label: 'src', children: [{ id: 'app.mjs', label: 'app.mjs' }] },
    { id: 'package.json', label: 'package.json' },
  ],
}

Usage guidance

Reach for a tree table when the hierarchy is the point — a file explorer, a nested navigation, an outline the reader reorders. When rows are flat and it is the columns that matter, use a table instead: the indentation and the connectors cost horizontal space and buy nothing.

Turn on virtual="true" once the tree is large enough that rendering it whole is noticeable, and only inside a parent with a height. Treat moved as a request every time, even when your commit is synchronous: it is the same handler that will later have to talk to a server, and the widget's drop preview is already written to wait for it.

← Back to Widgets