Skip to contents

Simple Tree View - Items

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

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

Basics

SimpleTreeView() takes its items as TreeItem() children. Nest TreeItem()s to create levels. MUI docs

SimpleTreeView(
  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()")
  )
)

Item identifier

Each TreeItem() needs an itemId that is unique in the whole tree. It is used to expand or select items by default, and it is the value sent to Shiny. MUI docs

Item label

The label of a TreeItem() can be a string or any UI element, such as icons or muiMaterial components. MUI docs

library(muiMaterial)

shiny_input_label <- function(icon, text) {
  Stack(
    direction = "row",
    spacing = 1,
    alignItems = "center",
    span(shiny::icon(icon), " ", text),
    Chip(label = "Shiny input", size = "small", color = "primary")
  )
}

SimpleTreeView(
  defaultExpandedItems = list("muiMaterial"),
  TreeItem(
    itemId = "muiMaterial",
    label = span(shiny::icon("cube"), " muiMaterial"),
    TreeItem(itemId = "muiMaterial::Button.shinyInput", label = shiny_input_label("hand-pointer", "Button.shinyInput()")),
    TreeItem(itemId = "muiMaterial::Slider.shinyInput", label = shiny_input_label("sliders", "Slider.shinyInput()")),
    TreeItem(itemId = "muiMaterial::Card", label = span(shiny::icon("square"), " Card()"))
  ),
  TreeItem(itemId = "muiCharts", label = span(shiny::icon("chart-column"), " muiCharts")),
  TreeItem(itemId = "reactRouter", label = span(shiny::icon("route"), " reactRouter"))
)

Disabled items

Use disabled = TRUE on a TreeItem() to disable it: it can’t be selected, expanded or focused. MUI docs

SimpleTreeView(
  TreeItem(
    itemId = "muiMaterial",
    label = "muiMaterial",
    TreeItem(itemId = "muiMaterial::Button", label = "Button()"),
    TreeItem(itemId = "muiMaterial::TextField", label = "TextField()"),
    TreeItem(itemId = "muiMaterial::Drawer", label = "Drawer()", disabled = TRUE)
  ),
  TreeItem(
    itemId = "muiCharts",
    label = "muiCharts",
    disabled = TRUE,
    TreeItem(itemId = "muiCharts::BarChart", label = "BarChart()"),
    TreeItem(itemId = "muiCharts::LineChart", label = "LineChart()")
  ),
  TreeItem(itemId = "reactRouter", label = "reactRouter")
)

Focus disabled items

By default, the keyboard navigation skips the disabled items. Use disabledItemsFocusable = TRUE to let them receive the focus, so their children can still be reached with the keyboard. Click on “muiMaterial” and use the arrow keys. MUI docs

SimpleTreeView(
  disabledItemsFocusable = TRUE,
  TreeItem(itemId = "muiMaterial", label = "muiMaterial"),
  TreeItem(
    itemId = "muiCharts",
    label = "muiCharts (disabled)",
    disabled = TRUE,
    TreeItem(itemId = "muiCharts::BarChart", label = "BarChart()")
  ),
  TreeItem(itemId = "reactRouter", label = "reactRouter")
)

Track item clicks

Use onItemClick to know which item was clicked. In Shiny, send the clicked id to the server with setInput(). On this page, which runs without a Shiny server, a small JS() function writes it below the tree instead. MUI docs

div(
  SimpleTreeView(
    onItemClick = JS(
      "(event, itemId) => { document.getElementById('stv-click').textContent = itemId; }"
    ),
    TreeItem(
      itemId = "muiCharts",
      label = "muiCharts",
      TreeItem(itemId = "muiCharts::BarChart", label = "BarChart()"),
      TreeItem(itemId = "muiCharts::LineChart", label = "LineChart()")
    ),
    TreeItem(itemId = "reactRouter", label = "reactRouter")
  ),
  tags$pre("Last clicked item: ", tags$span(id = "stv-click", "none"))
)
Last clicked item: 
none

In a Shiny app:

SimpleTreeView(
  onItemClick = setInput("clickedItem", 1), # 1 = second argument: the item id
  ...
)
# server: input$clickedItem

See Shiny for complete apps.

Item height

Use itemHeight to set the height of each item, in pixels. MUI docs

SimpleTreeView(
  itemHeight = 48,
  defaultExpandedItems = list("muiCharts"),
  TreeItem(
    itemId = "muiCharts",
    label = "muiCharts",
    TreeItem(itemId = "muiCharts::BarChart", label = "BarChart()"),
    TreeItem(itemId = "muiCharts::LineChart", label = "LineChart()")
  ),
  TreeItem(itemId = "reactRouter", label = "reactRouter")
)

Build items from a data frame

This section is specific to R. To create the TreeItem()s from a data frame, split it by the parent column and create the items with lapply(). Here, some functions grouped by package:

fns <- data.frame(
  package = c("muiMaterial", "muiMaterial", "muiCharts", "muiCharts", "reactRouter", "reactRouter"),
  fn = c("Button", "Drawer", "BarChart", "PieChart", "Route", "NavLink")
)
fns_by_package <- split(fns$fn, fns$package)

SimpleTreeView(
  defaultExpandedItems = list("muiCharts"),
  lapply(names(fns_by_package), function(package) {
    TreeItem(
      itemId = package,
      label = package,
      lapply(fns_by_package[[package]], function(fn) {
        TreeItem(itemId = paste0(package, "::", fn), label = paste0(fn, "()"))
      })
    )
  })
)

RichTreeView() with asMuiTree() does the same in one line: see Data frames with asMuiTree(). Building the TreeItem()s yourself is useful when the labels must contain UI elements.

Imperative API

The MUI imperative API (apiRef, e.g. to get the DOM element of an item) relies on a React hook, which is not available from R. MUI docs

API