ef-tree / ef-tree-item

Generic data-driven tree component. The building block used by ef-hierarchy.

ef-tree is a general-purpose tree view driven by a .items array. ef-hierarchy is built on top of it. Use ef-tree directly when you need a collapsible tree for non-composition data.

html
<ef-tree show-header header="Files"></ef-tree>

<script>
  const tree = document.querySelector('ef-tree');
  tree.items = [
    {
      id: 'src',
      label: 'src',
      children: [
        { id: 'index', label: 'index.ts' },
        { id: 'app', label: 'app.ts' },
      ],
    },
    { id: 'package', label: 'package.json' },
  ];

  tree.addEventListener('tree-select', (e) => {
    console.log('selected:', e.detail.id);
  });
</script>

TreeItem shape:

ts
interface TreeItem {
  id: string;
  label: string;
  icon?: string;       // optional icon HTML/text
  children?: TreeItem[];
}

Attributes

4 of 4

expand-all

React prop
expandAll
Type
boolean
Default
true
Description
Expands all items by default.

header

React prop
header
Type
string
Default
""
Description
Header text shown above the tree (when show-header).

selected-id

React prop
selectedId
Type
string | null
Default
—
Description
ID of the currently selected item.

show-header

React prop
showHeader
Type
boolean
Default
false
Description
Whether to show the header row.

CSS Parts

CSS Custom Properties

Events

CSS Parts

CSS Custom Properties