How to add an icon in front of specific column name of reactable

Question

R Gurus,

I am struggling with a unique problem with adding an icon in front of certain column names in a reactable.

library(htmltools)
library(dplyr)
library(tippy)

data <- as_tibble(mtcars[1:6, ], rownames = "car") %>%
  select(car:hp)

# See the ?tippy documentation to learn how to customize tooltips
with_tooltip <- function(value, tooltip, ...) {
  div(style = "text-decoration: underline; text-decoration-style: dotted; cursor: help",
      tippy(value, tooltip, ...))
}

reactable(
  data,
  columns = list(
    mpg = colDef(header = with_tooltip("mpg", "Miles per US gallon")),
    cyl = colDef(header = with_tooltip("cyl", "Number of cylinders"))
  )
)

In this example, I would like to add icon("circle-question") in front of mpg and cyl columns.

I tried to add class="fa fa-circle-question" or icon("circle-question") at various places but could not find a solution. Any help would be much appreciated.

Is the question just about adding an icon, or do you want to add an icon that is clickable? — bretauv, Sep 09 '22 at 08:58
Just icon is fine (non-clickable). I will add a tooltip using tippy. — M.Qasim, Sep 11 '22 at 00:15

score 4 · Accepted Answer · answered Sep 12 '22 at 04:51

One way is as follows:

library(htmltools)
library(dplyr)
library(tippy)
library(reactable)

data <- as_tibble(mtcars[1:6, ], rownames = "car") %>%
  select(car:hp)

# See the ?tippy documentation to learn how to customize tooltips
with_tooltip <- function(value, tooltip, ...) {
  div(style = "text-decoration: underline; text-decoration-style: dotted; cursor: help",
      tippy(value, tooltip, ...))
}

# Do not render just yet, but store in table_widget
table_widget = reactable(
  data,
  columns = list(
    mpg = colDef(header = with_tooltip("mpg", "Miles per US gallon")),
    cyl = colDef(header = with_tooltip("cyl", "Number of cylinders"))
  )
)

# Import font-awesome 6.2.0 and add CSS to produce the help icon after the columns with tips
htmlwidgets::prependContent(
  table_widget,
  htmlDependency(
    name = "font-awesome",
    version = "6.2.0",
    src = c(href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0"),
    stylesheet = "css/all.min.css"
  ),
  htmltools::tags$style(HTML(
        '.tippy:after {
          font-family: "Font Awesome 6 Free";
          content: " \\f059";
          }'
    )
  )
)

Description:

First we store your reactable in a variable called table_widget. We'd like to modify it by injecting the icon before we render. We will "inject" using the prependContent function.
The icon requires the font-awesome css so we import that using htmlDependency -- the link came from here: https://cdnjs.com/libraries/font-awesome. You can also leverage offline by downloading the CSS and referencing the downloaded file instead.
Next, we use CSS to inject the help icon after any class = tippy (which are your headers with tooltips). The "f09a" is the unicode from https://fontawesome.com/icons/circle-question?s=solid&f=classic (see top right)

Neat solution exactly as required. – M.Qasim Sep 12 '22 at 23:29 — M.Qasim, Sep 12 '22 at 23:29

How to add an icon in front of specific column name of reactable

1 Answers1