Is it possible to style the rows where there are groups

[olivroy]

reactable::reactable(
    mtcars,groupBy = "vs", defaultExpanded = T
)

In reactable theme, I thought that rowGroupStyle would work, but it doesn't.

# puts the full table as red
reactable::reactable(
    mtcars,groupBy = "vs", defaultExpanded = T, theme = reactable::reactableTheme(rowGroupStyle = list(backgroundColor = "red"))
)

I am wondering if I am missing something.

# all white
reactable::reactable(
    mtcars,groupBy = "vs", defaultExpanded = T, theme = reactable::reactableTheme(rowGroupStyle = list(backgroundColor = "red"), rowStyle = list(backgroundColor = 
                                                                                                                                                     "white"), groupHeaderStyle = list(backgroundColor = "red"))
)

Relates to #250

Possibly this, but would like to avoid JS #129

https://albert-rapp.de/posts/28_reactable_intro/28_reactable_intro.html

[glin]

JS is the only way for now, but it's not too bad. It's just that row grouping and aggregation is done completely in JavaScript, so there's not a great way to style them from pure R. There's not a very specific example of styling aggregated rows, but there is an example of styling nested rows within a row group: https://glin.github.io/reactable/articles/cookbook/cookbook.html#borders-between-groups-of-data

The same approach can be used for aggregated rows, where level is 0:

data <- MASS::Cars93[4:8, c("Type", "Price", "MPG.city", "DriveTrain", "Man.trans.avail")]

reactable(
  data,
  groupBy = "Type",
  columns = list(
    Price = colDef(aggregate = "max"),
    MPG.city = colDef(aggregate = "mean", format = colFormat(digits = 1)),
    DriveTrain = colDef(aggregate = "unique"),
    Man.trans.avail = colDef(aggregate = "frequency")
  ),
  rowStyle = JS("function(rowInfo) {
    if (rowInfo.level === 0) {
      return { background: 'red' }
    }
  }"),
  defaultExpanded = TRUE
)

Also, rowGroupStyle isn't named or documented well I've realized. "Row group" in that context means a single row including the expandable details. rowStyle does the same thing, but does not include expandable details.

[glin]

Docs updated in 34facb0