<baht-tree>

Hierarchical tree: an org chart, folders, categories. Nodes with children start open unless open: false (or all closed with collapsed). Click or Enter selects a row; the chevron opens and closes it. The keyboard follows the APG tree pattern: Up/Down, Home/End, Right opens then enters, Left closes then climbs. selected is the host’s to keep, like <baht-tabs value>.

Org chart

<baht-tree label="Org chart" selected="backend"></baht-tree>

<script>
  const el = document.querySelector('baht-tree');
  el.items = [
    {
      "id": "co",
      "label": "Company",
      "meta": "Somchai (CEO)",
      "badge": "1",
      "children": [
        {
          "id": "eng",
          "label": "Engineering",
          "meta": "Malee",
          "badge": "2",
          "children": [
            {
              "id": "backend",
              "label": "Backend",
              "meta": "Anan",
              "badge": "6"
            },
            {
              "id": "infra",
              "label": "Infra",
              "badge": "3"
            }
          ]
        },
        {
          "id": "ops",
          "label": "Operations",
          "open": false,
          "children": [
            {
              "id": "oncall",
              "label": "On-call"
            }
          ]
        }
      ]
    }
  ];
</script>

const tree = document.querySelector('baht-tree');
tree.items = units; // [{ id, label, meta?, badge?, open?, children? }]
tree.addEventListener('baht-select', (e) => {
  tree.selected = e.detail.id;
  openUnit(e.detail.node);
});

Indent per level is --baht-tree-indent (20px).

Props

Name	Type	Default	Description
`items`JS	`TreeNode[]`	`[]`	Root nodes: { id, label, meta?, badge?, open?, children? }
`selected`	`string \| null`	`null`	Id of the selected node
`collapsed`	`boolean`	`false`	Start every node closed unless open: true
`label`	`string`	`''`	Accessible name of the tree
`empty-message`	`string`	`'Nothing here yet.'`	Shown with no items

Events

Event	detail	Description
`baht-select`	`{ id, node }`	A row was chosen
`baht-toggle`	`{ id, open }`	A node opened or closed
`name`	CustomEvent