r - How to add titles to Reactable tables in R Markdown

Question

For this week's TidyTuesday challenge, I have been trying to make a table using reactable package. To this end, I looked at some blog posts on making tables with reactable in R and I made some progress, particularly with regard to customizing background colors and etc. However, although I tried for two-three days, I could not manage to add and customize titles in reactable package. The blogs I have looked at gave some examples. For instance, in one example, the following code chunk is given to make a beautiful table.

library(reactable)
library(htmltools)
library(tidyverse)
library(dplyr)

playoff_salary <- read_csv("https://raw.githubusercontent.com/jthomasmock/radix_themockup/master/_posts/2020-05-13-qb-salaries-vs-playoff-appearances/playoff_salary.csv")

make_color_pal <- function(colors, bias = 1) {
  get_color <- colorRamp(colors, bias = bias)
  function(x) rgb(get_color(x), maxColorValue = 255)
}

good_color <- make_color_pal(c("#ffffff", "#f2fbd2", "#c9ecb4", "#93d3ab", "#35b0ab"), bias = 2)

tbl <- playoff_salary %>%
  arrange(desc(salary)) %>%
  mutate(
    `Salary Rank` = rank(desc(salary)),
    salary = round(salary, 1)
  ) %>%
  select(`Salary Rank`, player:Superbowl, everything()) %>%
  reactable(
    pagination = FALSE,
    compact = TRUE,
    borderless = FALSE,
    striped = FALSE,
    fullWidth = FALSE,
    theme = reactableTheme(
      headerStyle = list(
        "&:hover[aria-sort]" = list(background = "hsl(0, 0%, 96%)"),
        "&[aria-sort='ascending'], &[aria-sort='descending']" = list(background = "hsl(0, 0%, 96%)"),
        borderColor = "#555"
      )
    ),
    defaultColDef = colDef(
      align = "center",
      minWidth = 100
    ),
    columns = list(
      salary = colDef(
        name = "Salary",
        style = function(value) {
          value
          normalized <- (value - min(playoff_salary$salary)) / (max(playoff_salary$salary) - min(playoff_salary$salary))
          color <- good_color(normalized)
          list(background = color)
        },
        cell = JS("function(cellInfo) {
                          return cellInfo.value + 'M'}")
      ),
      Total = colDef(
        style = function(value) {
          value
          normalized <- (value - min(playoff_salary$Total)) / (max(playoff_salary$Total) - min(playoff_salary$Total))
          color <- good_color(normalized)
          list(background = color)
        },
        class = "border-left"
      ),
      player = colDef(
        name = "Name",
        minWidth = 140,
        align = "left"
      )
    )
  )

div(
  class = "salary",
  div(
    class = "title",
    h2("2014-2019 Salary and Playoff Appearances"),
    "QBs limited to playoff games where they threw a pass"
  ),
  tbl,
  tags$span(style = "color:#C8C8C8", "TABLE: @THOMAS_MOCK | DATA: PRO-FOOTBALL-REFERENCE.COM & OVERTHECAP.COM")
)
tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet")
.salary {
  font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

.number {
  font-family: "Fira Mono", Consolas, Monaco, monospace;
  font-size: 16px;
  line-height: 30px;
  white-space: pre;
}

.title {
  margin: 18px 0;
  font-size: 16px;
}

.title h2 {
  font-size: 20px;
  font-weight: 600;
}


.header:hover,
.header[aria-sort="ascending"],
.header[aria-sort="descending"] {
  background-color: #eee;
}

.salary-table {
  margin-bottom: 20px;
}

/* Align header text to the bottom */
.header,
.group-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header {
  border-bottom-color: #555;
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
}

/* Highlight headers when sorting */
.header:hover,
.header[aria-sort="ascending"],
.header[aria-sort="descending"] {
  background-color: #eee;
}

.border-left {
  border-left: 2px solid #555;
}

/* Use box-shadow to create row borders that appear behind vertical borders */
.cell {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Although I was able to reproduce the same table until the beginning of the div code chunk, I did this in a R Markdown document as I read that it does not work in raw R, I was unable to do so in the remainder. I cannot add titles and other cool stuff to my table as it was done in this example. I hope I am clear about my problem, and I profoundly appreciate your help in reproducing this example.

Answer 1

Modify this:

.title h2 {
  font-family: "Fira Mono";
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #d3d3d3;
}