Format groupby rows in reactable

Question

In reactable, is there a way to style the entire row of groupBy header? e.g. to add a border to the bottom like this:

Code for table:

library(reactable)

data <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]

reactable(
  data,
  groupBy = "Manufacturer",
  defaultExpanded = TRUE
)

Answer 1

I was able to figure this out with the help of Copilot. You can use a JavaScript function that checks if the row has any sub rows, and if it does then it adds a border:

library(reactable)

data <- MASS::Cars93[10:22, c("Manufacturer", "Model", "Type", "Price", "MPG.city")]

reactable(
  data,
  groupBy = "Manufacturer",
  defaultExpanded = TRUE,
  rowStyle = JS("function(rowInfo) {
    if (rowInfo.subRows.length) {
      return { borderBottom: '3px solid #800080' }
    }
  }"),
)