# Tree Basic > TreeView basics for Dash: data-driven items, defaultExpandedItems, click and focus tracking, and custom getItemId/getItemLabel accessors. **Site index:** [https://muicharts.2plot.dev/llms.txt](https://muicharts.2plot.dev/llms.txt) — every page on this site, as Markdown. **Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites. **Sibling sites:** 13 more in The 2plot network — listed in the site index above. **Sitemap:** https://muicharts.2plot.dev/sitemap.xml --- ### 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 ```python items = [ {"id": "docs", "label": "Documents", "children": [ {"id": "docs-resume", "label": "resume.pdf"}, {"id": "docs-cover", "label": "cover_letter.docx"}, ]}, ] ``` ### Basic usage ```python 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. ```python @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 ```python # 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*