TreeMenu

A TreeMenu control

Import

import { TreeMenu } from "@schukai/monster/source/components/tree-menu/tree-menu.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

The monster-tree-menu renders a tree from structured data and is ideal for navigation or selection workflows. It builds entries from a datasource and supports nested hierarchies, icons, and expand/collapse behavior.

Basic Usage

<monster-datasource-dom id="tree-ds">
  <script type="application/json">
    {
      "dataset": [
        { "id": "root-1", "parent": 0, "title": "Root 1" },
        { "id": "root-1-a", "parent": "root-1", "title": "Root 1 - A" },
        { "id": "root-1-b", "parent": "root-1", "title": "Root 1 - B" },
        { "id": "root-2", "parent": 0, "title": "Root 2" }
      ]
    }
  </script>
</monster-datasource-dom>

<monster-tree-menu
  data-monster-option-datasource-selector="#tree-ds"
  data-monster-option-mapping-idtemplate="id"
  data-monster-option-mapping-parentkey="parent"
  data-monster-option-mapping-labeltemplate="${title}"
  data-monster-option-mapping-valuetemplate="${id}"
></monster-tree-menu>

Mapping Rules

Use the mapping options to tell the component where to find ids, parent references, and labels. Root nodes are detected by mapping.rootReferences (default includes 0 and null).

Basic Tree Menu

A basic tree menu built from datasource data. The mapping configuration points to the id, parent, and label fields.

Javascript

import '@schukai/monster/source/components/tree-menu/tree-menu.mjs';
import '@schukai/monster/source/components/datatable/datasource/dom.mjs';

HTML

<monster-datasource-dom id="tree-menu-simple-ds">
    <script type="application/json">
        {
            "dataset": [
                { "id": "root-1", "parent": 0, "title": "Root 1" },
                { "id": "root-1-a", "parent": "root-1", "title": "Root 1 - A" },
                { "id": "root-1-b", "parent": "root-1", "title": "Root 1 - B" },
                { "id": "root-2", "parent": 0, "title": "Root 2" }
            ]
        }
    </script>
</monster-datasource-dom>

<monster-tree-menu
    data-monster-option-datasource-selector="#tree-menu-simple-ds"
    data-monster-option-mapping-idtemplate="id"
    data-monster-option-mapping-parentkey="parent"
    data-monster-option-mapping-labeltemplate="${title}"
    data-monster-option-mapping-valuetemplate="${id}"
></monster-tree-menu>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The tree menu uses the shared tree menu stylesheet and exports parts for customization. Selected entries follow the same style rule used in other tree menu variants.

[data-monster-role=entry].selected:not([data-monster-state=open])

Exported Parts

control: Wrapper around the rendered entries.
entries: Container for the generated entry list.
entry-label: Label part inside each entry.

monster-tree-menu::part(entry-label) {
    font-weight: 600;
}

HTML Structure

<monster-tree-menu></monster-tree-menu>

JavaScript Initialization

const element = document.createElement('monster-tree-menu');
document.body.appendChild(element);

Exported

TreeMenu

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

datasource

data source

object

mapping

mapping.selector

string

Path to select the appropriate entries

mapping.labelTemplate

string

template with the label placeholders in the form ${name}, where name is the key

mapping.keyTemplate

string

undefined

template with the key placeholders in the form ${name}, where name is the key

mapping.rootReferences

string

0, null

the root references

mapping.idTemplate

string

template with the id placeholders in the form ${name}, where name is the key

mapping.parentKey

string

parent

the parent key

mapping.selection

string

undefined

the selection

mapping.filter

function

undefined

a filter function to filter the entries

object

classes

classes.control

string

monster-theme-primary-1

the class for the control element

classes.label

string

monster-theme-primary-1

the class for the label element

object

actions

actions.open

function

the action to open an entry (arguments, etnry, index, event)

actions.close

function

the action to close an entry (arguments, etnry, index, event)

actions.select

function

undefined

the action to select an entry (arguments, etnry, index, event)

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Constructor

constructor()

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

This method is called internal and should not be called directly.

getTag()

Returns

{string}

This method is called internal and should not be called directly.

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{void}

Other methods

selectEntry(value)

Parameters

value {string}: value

Events

The component emits the following events:

entries-imported

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.