Creating Tables Again

Exploring reactable to build high quality tables for publication.

Previously I took a look at the gt package. Now I’m seeing what I can make of reactables another interesting way to generate html tables. I’ll be using the latest tidytues dataset on x-men!

Load in the data

library(tidyverse)

Show code

character_visualization <- readr::read_csv('https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2020/2020-06-30/character_visualization.csv')

Make a table. I’ll note I’m not digging too deep into the x-men content here; I’m just looking for an easy table structure.

top_speech <- character_visualization %>% 
  filter(!(character %in% c("Editor narration", "Omnipresent narration"))) %>% 
  group_by(character) %>% 
  summarize(across(speech:depicted, sum)) %>% 
  slice_max(order_by = speech, n = 15) %>% 
  separate(character, into = c("hero", "real_name"), sep = " = ") %>% 
  mutate(pct_speech = speech/sum(speech)) %>% 
  arrange(desc(pct_speech)) %>% 
  select(-real_name) %>% 
  select(hero, pct_speech, everything()) %>% 
  mutate(pct_speech = round(pct_speech, 3))

I added this css after the fact.

.x-men {
  margin: 0 auto;
  width: 750px;
  font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

Render the table

library(reactable)
library(htmltools)


# Render a bar chart with a label on the left
bar_chart <- function(label, 
                      width = "100%", 
                      height = "14px", 
                      fill = "#00bfc4", 
                      background = NULL) {
  bar <- div(style = list(background = fill, width = width, height = height))
  chart <- div(style = list(flexGrow = 1, marginLeft = "6px", background = background), bar)
  div(style = list(display = "flex", alignItems = "center"), label, chart)
}

col_groups = c("speech", "thought", "narrative", "depicted")

reactable(top_speech,
          compact = TRUE,
          class = "x-men",
          defaultSorted = "pct_speech",
          highlight = TRUE,
          defaultColDef = colDef(headerClass = "header", align = "left"),
          columnGroups = list(
            colGroup(name = "Representation Type", columns = col_groups)
          ),
          columns = list(
            hero = colDef(name = "X-Men Hero",
                        minWidth = 170,
                        style = list(fontWeight = 500)),
            speech = colDef(name = "Speech",
                            format = colFormat(separators = TRUE)),
            thought = colDef(name = "Thought",
                             format = colFormat(separators = TRUE)),
            narrative = colDef(name = "Narrative",
                               format = colFormat(separators = TRUE)),
            depicted = colDef(name = "Depicted",
                              format = colFormat(separators = TRUE)),
            pct_speech = colDef(
              name = "Proportion of Speech",
              minWidth = 150,
              defaultSortOrder = "desc",
              cell = function(value) {
              value <- paste0(format(value * 100, nsmall = 1), "%")
              value <- format(value, width = 5, justify = "right")
              bar_chart(value, width = value, fill = "#fc5185", background = "#e1e1e1")
            },
            align = "left",
            style = list(fontFamily = "monospace", whiteSpace = "pre")
          )))

It’s super buggy using blogdown. At first I couldn’t render the table using a .Rmarkdown file. Once I switched to an .Rmd it seemed to work. Seems like a great table making library.