reactable icon indicating copy to clipboard operation
reactable copied to clipboard

Hide aggregated values when expanding rows?

Open smped opened this issue 11 months ago • 2 comments

It might be just me with poor JS skills, but I haven't been able to find a way to hide aggregated values when I expand rows. Is there a way to make this happen? To me, it would really declutter the tables.

I often use a summarisation function like the following, which returns the maximum values in the aggregated row, but I don't want to see these summaries once I've expanded everything.

max_js <- htmlwidgets::JS(
  "function(values) {
      var max_val = Math.max(...values)
      return '<' +  max_val.toExponential(2).toString() 
    }"
)

smped avatar Jan 26 '25 14:01 smped

Interesting question. It took me a while to understand so let me know if this isn't what you were thinking. But it should be possible using the aggreated cell render JS functions, making use of the row expanded value to conditionally render either the aggregated value or null (empty).

https://glin.github.io/reactable/articles/examples.html#aggregated-cell-rendering

Here's an example. I put this in the default colDef to enable it for all columns:

library(reactable)

data <- MASS::Cars93[14:38, 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")
  ),
  defaultColDef = colDef(
    aggregated = JS("function(cellInfo) {
      return cellInfo.expanded ? null : cellInfo.value
    }")
  )
)

glin avatar Feb 24 '25 05:02 glin

Thanks @glin !

That's exactly what I was trying to figure out. Thanks so much for taking the time to understand my question & help out. I think it really makes the table clearer, especially when used on combination with

tags$button(
      "Expand/Collapse All",
      onclick = glue::glue("Reactable.toggleAllRowsExpanded('{tbl_id}')")
    )

So you can see the aggregation for a quick look, then do a really simple deep dive without the redundant aggregation values cluttering things up. My context is a large number of Quality Control summaries, where I'm summarising across multiple runs, then enabling a deeper dive by subtype within each run when I expand all (or some) rows.

smped avatar Feb 25 '25 02:02 smped