rreactablereactablefmtr

How to ignore NA when using icon_sets() in reactablefmtr package?


I'm wondering if it is possible to ignore NA values in a given column when applying the icon_sets() function from the reactablefmtr package in R.

In my very basic example below, the current code does not display the icon, but NA still appears in the column when the reactable table is rendered which I'd like to avoid. It also produces a warning message which isn't ideal. Given the columns are numeric, I presume I can't replace NA with "" or " ". Any solutions/workarounds will be appreciated.

Given I have values in other columns, I really need to preserve all rows in the data frame that I'm passing to the reactable object. As you'll see in my code, I have tried assigning NA as the icon and colour palette in my case_when() statement, but this still does not work. In short, I don't want NA printed when there is no value, icon and colour palette combination.

library(tidyverse)
library(reactable)
library(reactablefmtr)

icon_pal <- function(x){
  case_when(
    is.na(x) ~ NA,
    x == "arrow-up" ~ "green",
    x == "arrow-down" ~ "red",
    .default = "black"
    )
  }

set.seed(1)
dat <- data.frame(
  var1 = c(round(rnorm(9, 100, 20)), NA),
  var2 = c(NA, round(rnorm(9, 100, 20))),
  var1_icon = c(sample(c("arrow-up", "arrow-down", "arrows-left-right"), 9, replace = TRUE), NA),
  var2_icon = c(NA, sample(c("arrow-up", "arrow-down", "arrows-left-right"), 9, replace = TRUE))
  ) %>%
  mutate(across(
    .cols = ends_with("icon"),
    .fns = icon_pal,
    .names = "{col}_pal"
  ))

reactable(dat,
          highlight = TRUE,
          pagination = FALSE,
          defaultColDef = colDef(
            align = "center",
            headerVAlign = "center",
            html = TRUE
            ),
          columns = list(
            var1 = colDef(cell = icon_sets(dat, icon_ref = "var1_icon", icon_color_ref = "var1_icon_pal")),
            var2 = colDef(cell = icon_sets(dat, icon_ref = "var2_icon", icon_color_ref = "var2_icon_pal"))
            )
          )

Warning message:

    The `name` provided ('NA') does not correspond to a known icon
The `name` provided ('NA') does not correspond to a known icon
Warning messages:
1: In fa_tbl$name == canonical_name :
  longer object length is not a multiple of shorter object length
2: In fa_tbl$name == canonical_name :
  longer object length is not a multiple of shorter object length

enter image description here


Solution

  • You can use the number_fmt argument like this:

    nf <- function(x) if (is.na(x)) "" else x
    
    reactable(dat,
              highlight = TRUE,
              pagination = FALSE,
              defaultColDef = colDef(
                align = "center",
                headerVAlign = "center",
                html = TRUE
                ),
              columns = list(
                var1 = colDef(cell = icon_sets(dat, icon_ref = "var1_icon", icon_color_ref = "var1_icon_pal", number_fmt = nf)),
                var2 = colDef(cell = icon_sets(dat, icon_ref = "var2_icon", icon_color_ref = "var2_icon_pal", number_fmt = nf))
                )
              )
    

    A reacttable table representation where there is no NA value in the corresponding columns

    I would still consider this a workaround as the warning persists, indictaing that somewhere down in the reactable package there may be another issue with NAs in columns.