In kcuilla/reactablefmtr: Streamlined Table Styling and Formatting for Reactable

knitr::opts_chunk$set(echo = TRUE, warning = FALSE, message = FALSE)

library(reactablefmtr)
library(dplyr)
library(palmerpenguins)

Sparklines

In order to use the sparkline functions within {reactablefmtr}, one must first download the {dataui} package from GitHub.

Once installed, users of {reactablefmtr} will have the ability to create highly customizable interactive sparkline line charts and bar charts.

We will start off with an example of the sparkline line charts using data from the {palmerpenguins} package.

The first thing we need to do is summarize the column in a list format:

df <- penguins %>%
  filter(!is.na(sex)) %>%
  group_by(species, sex) %>%
  summarize(flipper_length_mm = list(flipper_length_mm))

Then we can call react_sparkline() within the cell of {reactable}:

reactable(df,
          columns = list(
            species = colDef(width = 150),
            sex = colDef(width = 150),
            flipper_length_mm = colDef(cell = react_sparkline(df))
          ))

By default, react_sparkline() is interactive and displays the value when we hover over them, but there is an option to turn this off by setting tooltip to FALSE.

Line Options

We can change the color of the line with line_color:

reactable(df,
          columns = list(
            species = colDef(width = 150),
            sex = colDef(width = 150),
            flipper_length_mm = colDef(cell = react_sparkline(df,
                                                              line_color = "blue"))
          ))

If we want to assign line colors to specific groups, we can do so by creating a columns with the color assignments and calling that column name within line_color_ref:

df <- df %>%
  mutate(
    cols = case_when(
      species == "Adelie" ~ "#f5a24b",
      species == "Chinstrap" ~ "#af52d5",
      species == "Gentoo" ~ "#4c9b9b",
      TRUE ~ "grey"
    )
  )

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkline(df,
                                                      line_color_ref = "cols"))
  )
)

By default, the curvature of the line is of type "cardinal", but we have the option to change it to "linear" as well as "monotoneX", or "basis" within line_curve. We can also adjust the width of the line with line_width:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      cell = react_sparkline(
        df,
        line_width = 2,
        line_curve = "linear",
        line_color_ref = "cols"
      )
    )
  )
)

Area Charts

By setting show_area to TRUE, we can show the filled area beneath the line:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkline(
      df,
      show_area = TRUE,
      line_color_ref = "cols"
    ))
  )
)

The color of the filled area is 90% transparent, but we are able to darken the colors by increasing the opacity within area_opacity:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      cell = react_sparkline(
        df,
        show_area = TRUE,
        area_opacity = 1,
        line_color_ref = "cols"
      )
    )
  )
)

By default, the color of the filled area is assigned from the color of the line, but we can change the color of the area with area_color. Alternatively, we can also custom assign colors using area_color_ref using the same method we used with line_color_ref earlier.

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      cell = react_sparkline(
        df,
        show_area = TRUE,
        area_color = "grey",
        line_color_ref = "cols"
      )
    )
  )
)

Points and Labels

If we wanted to add points to particular data points on the sparkline, we could do so using highlight_points. Within highlight_points, we can call a helper function, which is also called highlight_points, and assign colors to either the min, max, first, last, or all data points.

Below, we are assigning the color red to the minimum values on the sparkline and the color blue to the maximum values:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkline(
      df,
      highlight_points = highlight_points(min = "red", max = "blue")
    ))
  )
)

We may also apply the labels directly to the sparkline by specifying which values we would like to display with labels. The label options are the same as highlight_points where we can label either the first, last, min, max, or all values. Note that the labels option will work with or without the highlight_points option:

reactable(df,
          columns = list(
            species = colDef(width = 150),
            sex = colDef(width = 150),
            cols = colDef(show = FALSE),
            flipper_length_mm = colDef(cell = react_sparkline(
              df,
              labels = c("first", "last"),
              highlight_points = highlight_points(first = "green", last = "purple")
            ))
          ))

Stat Lines

We may want to display summary statistics about each sparkline series and can do this by using the statline option. The statistical summary options that are available are mean, median, min, or max.

The example below adds a mean reference line to each of the sparklines and displays the mean value to the right of each line:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        line_width = 1,
        line_color = "blue",
        statline = "mean"
      )
    )
  )
)

There are additional options to control the appearance of the statline and statline label as well:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        line_width = 1,
        line_color = "blue",
        statline_color = "green",
        statline_label_color = "green",
        statline = "mean"
      )
    )
  )
)

Band Lines

To add a band line to each of the sparklines, we can use the bandline option as shown below. The options within bandline are "innerquartiles" which shows the inner-quartile range of each series, and "range" which will show the full range of the data from the minimum value to the maximum value.

Note that we can also increase the height of the sparklines by providing a value within the height option to better display the trends within the data.

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        height = 60,
        line_width = 1,
        line_color_ref = "cols",
        bandline = "innerquartiles"
      )
    )
  )
)

The color and opacity of the bandline can also be adjusted as shown below:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        height = 60,
        line_width = 1,
        line_color_ref = "cols",
        bandline = "innerquartiles",
        bandline_color = "darkgreen",
        bandline_opacity = 0.4
      )
    )
  )
)

We may also stack multiple elements together, such as showing the bandline with a mean statline:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      minWidth = 200,
      cell = react_sparkline(
        df,
        height = 60,
        line_width = 1,
        line_color_ref = "cols",
        highlight_points = highlight_points(min = "red", max = "blue"),
        labels = c("min", "max"),
        statline = "mean",
        bandline = "innerquartiles"
      )
    )
  )
)

Bar Charts

To display the sparkline chart as a bar chart rather than a line chart, we can use react_sparkbar():

reactable(df,
          columns = list(
            species = colDef(width = 150),
            sex = colDef(width = 150),
            cols = colDef(show = FALSE),
            flipper_length_mm = colDef(cell = react_sparkbar(df))
          ))

Bar Options

Many of the options that are available within react_sparkline() are also available within react_sparkbar() with some few minor differences. For example, if we wanted to assign custom colors to each of the bars, we could use fill_color_ref:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkbar(df,
                                                     fill_color_ref = "cols"))
  )
)

By default, the line color around each of the bars is transparent, but we can also assign custom colors to the outlines with line_color_ref:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(
      cell = react_sparkbar(
        df,
        fill_color = "transparent",
        line_width = 2,
        line_color_ref = "cols"
      )
    )
  )
)

Bars and Labels

Another difference in react_sparkbar is if we want to highlight particular data points, we would use highlight_bars instead of highlight_points. The options in which data points to highlight are the same (first, last, min, max, or all).

Note: the height of the bars auto-starts at the minimum value in each series. Therefore, if we assign a color to the minimum value within highlight_bars, we will be unable to see it unless we declare the minimum value as a number less than the minimum value present in the dataset:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkbar(
      df,
      min_value = 170,
      highlight_bars =  highlight_bars(min = "red", max = "blue")
    ))
  )
)

We can also assign labels using the same method as react_sparkline():

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkbar(
      df,
      labels = c("first", "last"),
      highlight_bars = highlight_bars(first = "green", last = "purple")
    ))
  )
)

Statlines and Bandlines

Just like with react_sparkline(), statlines and bandlines can be layered onto react_sparkbar using the same options:

reactable(
  df,
  columns = list(
    species = colDef(width = 150),
    sex = colDef(width = 150),
    cols = colDef(show = FALSE),
    flipper_length_mm = colDef(cell = react_sparkbar(
      df,
      height = 80,
      fill_color_ref = "cols",
      bandline = "innerquartiles",
      statline = "mean"
    ))
  )
)