Skip to contents

Previously, if you wanted to embed images to your reactable table, you needed to upload the images to a folder and then pull the image names from that folder to your table as explained here.

Now, with reactablefmtr, there’s an easier way with embed_img().

Example

To show how embed_img() works, we’re going to build a table using data from the nflfastR package and display team logos in one of the columns of the table.

We’re going to convert the chart below from the nflfastR beginner’s guide into a reactable table.

The code needed to create dataset for the chart above is outlined in the beginner’s guide, which is shown below:

## load multiple seasons
seasons <- 2015:2019
pbp <- map_df(seasons, function(x) {
  readRDS(url(
    paste0(
      "https://raw.githubusercontent.com/guga31bb/nflfastR-data/master/data/play_by_play_",
      x,
      ".rds"
    )
  ))
})

## figures with QB stats
qbs <- pbp %>%
  filter(week <= 17,!is.na(epa)) %>%
  group_by(id, name) %>%
  summarize(
    epa = mean(qb_epa),
    cpoe = mean(cpoe, na.rm = T),
    n_dropbacks = sum(pass),
    n_plays = n(),
    team = last(posteam)
  ) %>%
  ungroup() %>%
  filter(n_dropbacks > 100 & n_plays > 1000)

## join team logos to dataset
qbs <- qbs %>%
  left_join(teams_colors_logos, by = c('team' = 'team_abbr'))
head(qbs)
## # A tibble: 6 x 17
##   id         name        epa   cpoe n_dropbacks n_plays team  team_name  team_id
##   <chr>      <chr>     <dbl>  <dbl>       <dbl>   <int> <chr> <chr>      <chr>  
## 1 00-0019596 T.Brady 0.195    1.09         3188    3287 NE    New Engla~ 3200   
## 2 00-0020531 D.Brees 0.199    4.46         2972    3077 NO    New Orlea~ 3300   
## 3 00-0021206 J.McCo~ 0.00264  0.260        1154    1191 PHI   Philadelp~ 3700   
## 4 00-0021429 C.Palm~ 0.142    2.19         1612    1653 ARI   Arizona C~ 3800   
## 5 00-0022803 E.Mann~ 0.00539 -1.57         2815    2867 NYG   New York ~ 3410   
## 6 00-0022924 B.Roet~ 0.188    2.72         2564    2624 PIT   Pittsburg~ 3900   
## # ... with 8 more variables: team_nick <chr>, team_color <chr>,
## #   team_color2 <chr>, team_color3 <chr>, team_color4 <chr>,
## #   team_logo_wikipedia <chr>, team_logo_espn <chr>, team_wordmark <glue>

Let’s limit the dataset to only the columns that we need:

qbs <- qbs %>%
  select(name, team_logo_espn, n_plays, cpoe, epa)

reactable(qbs)

The URLs to the team logo images are located in the team_logo_espn column. In order to convert the URLs into images in the table, all we need to do is use embed_img():

reactable(qbs,
          columns = list(team_logo_espn = colDef(cell = embed_img())))

Resize Image

By default, images are rendered with a size of 24px by 24px. But, if we want to increase the size, we can do so by specifying the height and width:

reactable(qbs,
          columns = list(team_logo_espn = colDef(cell = embed_img(
            height = "50", width = "50"
          ))))

Add Label to Image

Another option within embed_img() is assigning a label next to the image. For example, if we didn’t want a separate column for the team logos, we could combine them with the name of the player like so:

reactable(qbs,
          columns = list(
            team_logo_espn = colDef(cell = embed_img(qbs, label = "name")),
            name = colDef(show = FALSE) ## hide name column
          ))

We can finish up the table by adding data bars to the cpoe and epa columns with the data_bars_pos_neg() formatter:

reactable(qbs,
          defaultPageSize = 20, ## change pagination size from 10 to 20
          columns = list(
            name = colDef(show = FALSE), ## hide name column
            team_logo_espn = colDef(cell = embed_img(
              qbs, 
              label = "name"),
              maxWidth = 175), ## set column width
            n_plays = colDef(cell = color_tiles(
              qbs,
              colors = c("#d7191c", "#ffffbf", "#1a9641"),
              number_fmt = scales::comma),
              align = "center", ## align column header
              maxWidth = 100), ## set column width
            cpoe = colDef(cell = data_bars_pos_neg(
              qbs,
              colors = c("#d7191c", "#ffffbf", "#1a9641"),
              number_fmt = scales::percent),
              align = "center"), ## align column header
            epa = colDef(cell = data_bars_pos_neg(
              qbs,
              colors = c("#d7191c", "#ffffbf", "#1a9641"),
              number_fmt = scales::number_format(accuracy = 0.01)),
              align = "center") ## align column header
            ))