I am following the tutorial on this website here : https://glin.github.io/reactable/articles/building-twitter-followers.html - I would like to build a "Reactive Table" as seen in the example.
I was able to follow most of the steps in the tutorial - for example, the code below works perfectly:
library(reactable)
library(htmltools)
data <- read.csv("https://glin.github.io/reactable/articles/twitter-followers/twitter_followers.csv",
stringsAsFactors = FALSE)
# Render a bar chart with a label on the left
bar_chart <- function(label, width = "100%", height = "0.875rem", fill = "#00bfc4", background = NULL) {
bar <- div(style = list(background = fill, width = width, height = height))
chart <- div(style = list(flexGrow = 1, marginLeft = "0.375rem", background = background), bar)
div(style = list(display = "flex", alignItems = "center"), label, chart)
}
reactable(
data,
defaultSorted = "exclusive_followers_pct",
columns = list(
account = colDef(
name = "Account",
format = colFormat(prefix = "@")
),
followers = colDef(
name = "Followers",
defaultSortOrder = "desc",
cell = function(value) {
width <- paste0(value * 100 / max(data$followers), "%")
value <- format(value, big.mark = ",")
# Fix each label using the width of the widest number (incl. thousands separators)
value <- format(value, width = 9, justify = "right")
bar_chart(value, width = width, fill = "#3fc1c9")
},
align = "left",
# Use the operating system's default monospace font, and
# preserve white space to prevent it from being collapsed by default
style = list(fontFamily = "monospace", whiteSpace = "pre")
),
exclusive_followers_pct = colDef(
name = "Exclusive Followers",
defaultSortOrder = "desc",
cell = function(value) {
value <- paste0(format(value * 100, nsmall = 1), "%")
# Fix width here to align single and double-digit percentages
value <- format(value, width = 5, justify = "right")
bar_chart(value, width = value, fill = "#fc5185", background = "#e1e1e1")
},
align = "left",
style = list(fontFamily = "monospace", whiteSpace = "pre")
)
)
)
Now, I would like to follow the "Finishing Touches" section of this tutorial.
I ran this code in the R console : https://shrib.com/#NineBandedArmadillo-JqkBNm and then I created an R markdown document and ran "knitted" (i.e. "knit to html") this code in the R markdown editor using "css tags": https://shrib.com/#Olivia382nNeg
But I don't think I correctly followed the instructions because the resulting reactive table did not load:
- Can someone please show me how to correctly follow the steps for the "Finishing Touches" section of this tutorial?
Thank you!

