Skip to contents

Simple Tree View - Expansion

Source: vignettes/simple-tree-view-expansion.Rmd
simple-tree-view-expansion.Rmd

Original MUI X documentation: Simple Tree View - Expansion. The examples of this page are written for R.

library(muiTreeView)
library(htmltools)

# Some functions of muiMaterial, muiCharts and reactRouter, used in all the examples of this page
pkg_items <- function() {
  list(
    TreeItem(
      itemId = "muiMaterial",
      label = "muiMaterial",
      TreeItem(itemId = "muiMaterial::Button", label = "Button()"),
      TreeItem(itemId = "muiMaterial::TextField", label = "TextField()"),
      TreeItem(itemId = "muiMaterial::Drawer", label = "Drawer()")
    ),
    TreeItem(
      itemId = "muiCharts",
      label = "muiCharts",
      TreeItem(itemId = "muiCharts::BarChart", label = "BarChart()"),
      TreeItem(itemId = "muiCharts::LineChart", label = "LineChart()")
    ),
    TreeItem(
      itemId = "reactRouter",
      label = "reactRouter",
      TreeItem(itemId = "reactRouter::RouterProvider", label = "RouterProvider()"),
      TreeItem(itemId = "reactRouter::Route", label = "Route()"),
      TreeItem(itemId = "reactRouter::NavLink", label = "NavLink()")
    )
  )
}

Default expansion

Use defaultExpandedItems to expand items when the tree is created. Always give the ids in a list(). MUI docs

SimpleTreeView(
  defaultExpandedItems = list("muiMaterial", "reactRouter"),
  pkg_items()
)

Controlled expansion

Use expandedItems with onExpandedItemsChange to control the expansion from your app, for example from the Shiny server with renderReact(). See controlled state in Shiny. MUI docs

onExpandedItemsChange receives the ids of all the expanded items. In Shiny, use onExpandedItemsChange = setInput("expanded", 1) to get them in input$expanded. On this page, a JS() function writes them below the tree:

div(
  SimpleTreeView(
    onExpandedItemsChange = JS(
      "(event, itemIds) => { document.getElementById('stv-expanded').textContent = JSON.stringify(itemIds); }"
    ),
    pkg_items()
  ),
  tags$pre("Expanded items: ", tags$span(id = "stv-expanded", "[]"))
)
Expanded items: 
[]

Track item expansion change

Use onItemExpansionToggle to know which item was just expanded or collapsed. It receives the event, the item id and whether the item is now expanded. MUI docs

div(
  SimpleTreeView(
    onItemExpansionToggle = JS(
      "(event, itemId, isExpanded) => {
        document.getElementById('stv-toggle').textContent =
          itemId + (isExpanded ? ' was expanded' : ' was collapsed');
      }"
    ),
    pkg_items()
  ),
  tags$pre(tags$span(id = "stv-toggle", "No item expansion recorded"))
)
No item expansion recorded

Limit expansion to icon container

By default, clicking anywhere on an item expands it. Use expansionTrigger = "iconContainer" to expand it only when clicking on the arrow icon, so that a click on the label only selects the item. MUI docs

SimpleTreeView(
  expansionTrigger = "iconContainer",
  pkg_items()
)

Imperative API

The MUI imperative API (apiRef, to expand an item or check whether it is expanded from JavaScript) relies on a React hook, which is not available from R. MUI docs

API