How to use groupBy and show data from other columns with an R render function or cellInfo from Javascript

Question

I would like to combine reactable's groupBy aggregates with the ability to show information from other cells. For example, I can show/combine information from other columns like so:

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

data <- starwars %>%
  select(character = name, height, mass, gender, homeworld, species)

reactable(
  data,
  columns = list(
    character = colDef(
      # Show species under character names
      cell = function(value, index) {
        species <- data$species[index]
        species <- if (!is.na(species)) species else "Unknown"
        div(
          div(style = "font-weight: 600", value),
          div(style = "font-size: 0.75rem", species)
        )
      }
    ),
    species = colDef(show = FALSE)
  ),
  defaultPageSize = 6
)

Independently, I can use the groupBy argument to aggregate rows:

reactable(
  data,
  groupBy = c("character"),
  defaultPageSize = 6
)

But when attempting to combine the two, things do not work as expected:

reactable(
  data,
  groupBy = c("character"),
  columns = list(
    character = colDef(
      # Show species under character names
      cell = function(value, index) {
        species <- data$species[index]
        species <- if (!is.na(species)) species else "Unknown"
        div(
          div(style = "font-weight: 600", value),
          div(style = "font-size: 0.75rem", species)
        )
      }
    ),
    species = colDef(show = FALSE)
  ),
  defaultPageSize = 6
)

There is a grouped argument within the colDef() function that I think holds the answer, but I have not been able to get this to work.

Here are some links that could be helpful:

• Show data from other columns
• Grouping and aggregation
• Multiple groups
• Column definitions colDef documentation

Answer 1

I ended up using this approach: create a new column with the HTML formatting baked into the column and then html = TRUE in the colDef:

library(dplyr)
library(reactable)

data <- starwars %>%
  select(character = name, height, mass, gender, homeworld, species)

data %>% 
  mutate(
    character_and_species = glue::glue("<strong>{character}</strong><br><small>{species}</small>")
  ) %>% 
  reactable(
    groupBy = c("character_and_species"),
    columns = list(
      character_and_species = colDef(html = TRUE),
      species = colDef(show = FALSE)
    ),
    defaultPageSize = 6
  )

Results in:

Still interested in other approaches, but this accomplishes the intended results.