Tree Basic

TreeView basics for Dash: data-driven items, defaultExpandedItems, click and focus tracking, and custom getItemId/getItemLabel accessors.

Overview

TreeView basics for Dash: data-driven items, defaultExpandedItems, click and focus tracking, and custom getItemId/getItemLabel accessors.

TreeView

TreeView is the data-driven tree component in dash-mui-charts (Community license — no key needed). It wraps MUI X RichTreeView: you pass one nested items list and the component renders the whole tree, with controlled selection, expansion, in-place label editing, and per-item disabling available through props.

Item shape

items = [
    {"id": "docs", "label": "Documents", "children": [
        {"id": "docs-resume", "label": "resume.pdf"},
        {"id": "docs-cover", "label": "cover_letter.docx"},
    ]},
]

Basic usage

from dash_mui_charts import TreeView

TreeView(
    id="tree",
    items=items,
    defaultExpandedItems=["docs"],
)

Key props

• items — nested list of {id, label, children} dicts (the whole tree).
• defaultExpandedItems — item ids expanded on load (uncontrolled).
• expandedItems / selectedItems — controlled equivalents, in/out.
• getItemId / getItemLabel / getItemChildren — string accessors for

when your dicts use different keys, e.g. getItemId="key", getItemLabel="name" maps {"key": "a", "name": "Alpha"} items.

• expandIcon / collapseIcon / endIcon — MUI icon names as strings.

Outputs (use as callback Inputs)

• clickedItem — {itemId, event_timestamp} on every item click.
• focusedItem — fires when an item receives focus (click or keyboard nav).
• expandedItems / selectedItems — update as the user toggles/selects.
• editedItemLabel — {itemId, newLabel} after inline label editing.

@callback(Output("out", "children"), Input("tree", "clickedItem"))
def show_click(data):
    return data["itemId"] if data else "Click an item..."

Related pages

• /tree-selection — single, multi, checkbox and propagated selection
• /tree-expansion — expansion triggers and controlled expand/collapse
• /tree-editing — inline label editing
• /tree-icons — icons, indentation, height and sx styling
• /tree-disabled — disabled items and focusability
• /tree-simple — SimpleTreeView, the lighter JSX-driven tree
• /tree-pro — TreeViewPro: drag-reorder, lazy loading, per-item controls

Live examples

# File: docs/tree_basic/demo.py

"""Tree Basic demo — rendered on /tree-basic via `.. exec::`.

Ported verbatim from the pre-migration pages/tree_basic.py (same ids, same callbacks).
"""
import json
from dash import html, callback, Input, Output

from dash_mui_charts import TreeView

# --- Sample Data ---
MUI_X_PRODUCTS = [
    {"id": "grid", "label": "Data Grid", "children": [
        {"id": "grid-com", "label": "@mui/x-data-grid"},
        {"id": "grid-pro", "label": "@mui/x-data-grid-pro"},
        {"id": "grid-premium", "label": "@mui/x-data-grid-premium"},
    ]},
    {"id": "pickers", "label": "Date and Time Pickers", "children": [
        {"id": "pickers-com", "label": "@mui/x-date-pickers"},
        {"id": "pickers-pro", "label": "@mui/x-date-pickers-pro"},
    ]},
    {"id": "charts", "label": "Charts", "children": [
        {"id": "charts-com", "label": "@mui/x-charts"},
    ]},
    {"id": "tree", "label": "Tree View", "children": [
        {"id": "tree-com", "label": "@mui/x-tree-view"},
        {"id": "tree-pro", "label": "@mui/x-tree-view-pro"},
    ]},
]

FILE_SYSTEM = [
    {"id": "docs", "label": "Documents", "children": [
        {"id": "docs-resume", "label": "resume.pdf"},
        {"id": "docs-cover", "label": "cover_letter.docx"},
        {"id": "docs-projects", "label": "Projects", "children": [
            {"id": "docs-proj-a", "label": "project_a.md"},
            {"id": "docs-proj-b", "label": "project_b.md"},
        ]},
    ]},
    {"id": "images", "label": "Images", "children": [
        {"id": "img-photo", "label": "photo.jpg"},
        {"id": "img-diagram", "label": "diagram.png"},
    ]},
    {"id": "src", "label": "Source Code", "children": [
        {"id": "src-main", "label": "main.py"},
        {"id": "src-utils", "label": "utils.py"},
        {"id": "src-tests", "label": "tests/", "children": [
            {"id": "src-test1", "label": "test_main.py"},
        ]},
    ]},
]

section_style = {'marginBottom': '40px'}
output_style = {
    'fontSize': '12px', 'margin': 0,
    'padding': '10px 14px', 'borderRadius': '6px',
    'backgroundColor': '#f5f5f5',
    'border': '1px solid #ddd',
    'whiteSpace': 'pre-wrap',
    'maxHeight': '150px',
    'overflow': 'auto',
}

component = html.Div([
    # --- 1. Minimal tree ---
    html.Div([
        html.H3("1. Minimal Tree"),
        html.P("Just pass items. Click nodes to expand/collapse.", style={'color': '#666'}),
        TreeView(
            id="tree-basic-minimal",
            items=MUI_X_PRODUCTS,
        ),
    ], style=section_style),

    # --- 2. Default expanded ---
    html.Div([
        html.H3("2. Default Expanded Items"),
        html.P(
            'defaultExpandedItems=["grid", "pickers"] opens those nodes on load.',
            style={'color': '#666'},
        ),
        TreeView(
            id="tree-basic-expanded",
            items=MUI_X_PRODUCTS,
            defaultExpandedItems=["grid", "pickers"],
        ),
    ], style=section_style),

    # --- 3. File system tree with click tracking ---
    html.Div([
        html.H3("3. Click Tracking"),
        html.P("clickedItem output fires on each click with {itemId, event_timestamp}.", style={'color': '#666'}),
        TreeView(
            id="tree-basic-clicks",
            items=FILE_SYSTEM,
            defaultExpandedItems=["docs", "src"],
        ),
        html.P("Last click:", style={'marginTop': '10px', 'fontSize': '13px', 'color': '#666'}),
        html.Pre(id="tree-basic-click-out", children="Click an item...", style=output_style),
    ], style=section_style),

    # --- 4. Focus tracking ---
    html.Div([
        html.H3("4. Focus Tracking"),
        html.P("focusedItem fires when an item receives focus (click or keyboard nav).", style={'color': '#666'}),
        TreeView(
            id="tree-basic-focus",
            items=FILE_SYSTEM,
            defaultExpandedItems=["images"],
        ),
        html.P("Last focused:", style={'marginTop': '10px', 'fontSize': '13px', 'color': '#666'}),
        html.Pre(id="tree-basic-focus-out", children="Focus an item...", style=output_style),
    ], style=section_style),

    # --- 5. Custom accessor keys ---
    html.Div([
        html.H3("5. Custom Item Keys"),
        html.P(
            'Items use "name" instead of "label" and "key" instead of "id". '
            'getItemId="key" and getItemLabel="name" map them correctly.',
            style={'color': '#666'},
        ),
        TreeView(
            id="tree-basic-custom-keys",
            items=[
                {"key": "a", "name": "Alpha", "children": [
                    {"key": "a1", "name": "Alpha-One"},
                    {"key": "a2", "name": "Alpha-Two"},
                ]},
                {"key": "b", "name": "Beta", "children": [
                    {"key": "b1", "name": "Beta-One"},
                ]},
            ],
            getItemId="key",
            getItemLabel="name",
            defaultExpandedItems=["a"],
        ),
    ], style=section_style),
])


@callback(
    Output("tree-basic-click-out", "children"),
    Input("tree-basic-clicks", "clickedItem"),
    prevent_initial_call=True,
)
def show_click(data):
    if not data:
        return "Click an item..."
    return json.dumps(data, indent=2)


@callback(
    Output("tree-basic-focus-out", "children"),
    Input("tree-basic-focus", "focusedItem"),
    prevent_initial_call=True,
)
def show_focus(data):
    if not data:
        return "Focus an item..."
    return json.dumps(data, indent=2)

:defaultExpanded: false :withExpandedButton: true

Source: /tree-basic