Dependencies

install.packages("htmltools") # possibly unnecessary
remotes::install_github("mitchelloharawild/icons")

Data

For the type of table we are creating here, we want a few data points of different types. For example, if we had to display personal and social media information in a tabular format, we could have something like the list below. We have one person, “Jaime” and we record information about their age, hobby, and twitter account:

jaime <-
  list(
    Name = "Jaime",
    Position = "Researcher",
    Twitter = "Jaime123",
    Hobby = "Football"
  )
jaime

## $Name
## [1] "Jaime"
## 
## $Position
## [1] "Researcher"
## 
## $Twitter
## [1] "Jaime123"
## 
## $Hobby
## [1] "Football"

For now, we’ll work only with this one person list, but you can imagine having many such items in a data frame and indexing this data frame to display data.

Icons

For icons, we’ll use the {icons} package. We’ll work with fontawesome icons, but with the {icons} package, we have several other options too:

library(icons)

## ── Installed icons ─────────────────────────────────────────────── icon 0.2.0 ──

## ✖ ionicons                  ✖ google_material      
## ✖ academicons               ✖ feather_icons        
## ✖ simple_icons              ✖ octicons             
## ✖ bioicons                  ✔ fontawesome     6.3.0

Downloading icon sets is simple, we use icons::download_*, and the resulting object is an icon_set class that we can pass an icon name to obtain the SVG of the icon:

icons::download_fontawesome()

icons::fontawesome("twitter")

HTML table with icons

First, we add icons to our person list. We convert each item to a list with two slots, text and icon.

jaime <-
  list(
    Name = list(text = "Jaime", icon = "user"),
    Position = list(text = "Researcher", icon = "flask"),
    Twitter = list(text = "Jaime123", icon = "twitter"),
    Hobby = list(text = "Football", icon = "futbol")
  )

Next, we’ll use this list of item lists to generate the HTML for our table:

• We define some CSS styles for the th and td tags
• We use lapply to cycle over the elements of our person list jaime to generate rows (tr + td) tags for each item
• We wrap the row_tags in a table tag (tags$table)

style <- "text-align: left; padding: 10px 25px;"
row_tags <- lapply(jaime,
                   function(x) {
                     htmltools::tags$tr(
                       htmltools::tags$td(
                         style = style,
                         icons::icon_style(
                           icons::fontawesome(name = x[["icon"]]),
                           scale = 1.5,
                           fill = "#5E81AC"
                         )
                       ),
                       htmltools::tags$td(style = style, x[["text"]])
                     )
                   })

container_style <- "
    border: 0.5px solid #5E81AC; 
    width: 50%; 
    padding: 20px; 
    display: flex; 
    justify-content: center;"

table_with_icons <- htmltools::div(style = container_style,
               htmltools::tags$table(
                 htmltools::tags$tr(
                   htmltools::tags$th("Icon", style = style),
                   htmltools::tags$th("Text", style = style)
                 ),
                 row_tags
               ))
table_with_icons

Application in a parametrized report or a Shiny application

To use our table with icons in a Rmd report or shiny application, we need to wrap it into a function:

make_table_w_icons <- function(person_list) {
  style <- "text-align: left; padding: 10px 25px;"
  row_tags <- lapply(person_list,
                     function(x) {
                       htmltools::tags$tr(
                         htmltools::tags$td(
                           style = style,
                           icons::icon_style(
                             icons::fontawesome(name = x[["icon"]]),
                             scale = 1.5,
                             fill = "#5E81AC"
                           )
                         ),
                         htmltools::tags$td(style = style, x[["text"]])
                       )
                     })
  
  container_style <- "
    border: 0.5px solid #5E81AC;
    width: 50%;
    padding: 20px;
    display: flex;
    justify-content: center;"
  
  table_with_icons <- htmltools::div(style = container_style,
                                     htmltools::tags$table(
                                       htmltools::tags$tr(
                                         htmltools::tags$th("Icon", style = style),
                                         htmltools::tags$th("Text", style = style)
                                       ),
                                       row_tags
                                     ))
  return(table_with_icons)
}

make_table_w_icons(jaime)

We can now create a simple {shiny} application that displays our person data with icons.

tableWithIconsUI <- function(id) {
  ns <- shiny::NS(id)
  shiny::tagList(
    shiny::uiOutput(ns("tab"))
  )
}

tableWithIconsServer <- function(id) {
  shiny::moduleServer(
    id,
    function(input, output, session) {
      
      person_rct <- shiny::reactiveVal()
      
      output$tab <- shiny::renderUI({
        make_table_w_icons(person_list = person_rct())
      })
      
      return(list(
        set_person = function(x) {
          person_rct(x)
        }
        
      ))
    }
  )
}

library(shiny)

jaime <-
  list(
    Name = list(text = "Jaime", icon = "user"),
    Position = list(text = "Researcher", icon = "flask"),
    Twitter = list(text = "Jaime123", icon = "twitter"),
    Hobby = list(text = "Football", icon = "futbol")
  )

jessica <- list(
  Name = list(text = "Jessica", icon = "user"),
  Position = list(text = "Researcher", icon = "flask"),
  Twitter = list(text = "IamJessica", icon = "twitter"),
  Hobby = list(text = "Fishing", icon = "fish")
)

persons_data <- list(
  Jaime = jaime,
  Jessica = jessica
)

ui <- fluidPage(
  selectInput(
    inputId = "person",
    label = "Person",
    choices = c("Jaime", "Jessica")
  ),
  tableWithIconsUI(id = "tab1")
)

server <- function(input, output, session) {
  tab1 <- tableWithIconsServer(id = "tab1")
  
  shiny::observeEvent(input$person, {
    person_data <- person_list[[input$person]]
    tab1$set_person(person_data)
  })
}

shinyApp(ui, server)

needed_icons <- c(lapply(persons_data$Jaime, "[[", "icon"),
                  lapply(persons_data$Jessica, "[[", "icon")
                  )
needed_icons <- unique(needed_icons)
# requires that folder `icons` exists!
icons::icon_save(icons = needed_icons, path = "./icons")

app_icons <- icons::icon_set("path/to/icons")

Summary

In this post we went through a simple workflow for creating HTML tables with icons to display small-scale, heterogenous data that are not suitable for charting and don’t require interactive table widgets. We also saw how to use this type of visualization in a {shiny} application and how to include only a subset of required icons as resources for our web application.

Gist

The full code for the working application is available as a gist below: