reactable footer total is doubled with paginateSubRows = TRUE and row is expanded

[vneyman]

Total is doubled for each expanded row when paginateSubRows = TRUE. The below example will show a total of 956.2 vs 478.1.
Is there a way to keep the footer total accurate. Maybe there is a javascript trick?

data <- MASS::Cars93[18:47, ] %>%
select(Manufacturer, Model, Type, Sales = Price)

reactable(
data,
defaultExpanded = TRUE,
paginateSubRows = TRUE,
groupBy = "Manufacturer",
searchable = TRUE,
columns = list(
Manufacturer = colDef(footer = "Total"),
Sales = colDef(
aggregate = "sum",
format = colFormat(currency = "USD"),
footer = JS("function(column, state) {
let total = 0
state.sortedData.forEach(function(row) {
total += row[column.id]
})
return total.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
}")
)
),
defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
)

[glin]

There is a way to tell if a row is grouped, but it's not well documented or obvious to use. A row will have a _subRows array property if it's grouped. You can ignore these rows, e.g.:

data <- MASS::Cars93[18:47, ] %>%
  select(Manufacturer, Model, Type, Sales = Price)

reactable(
  data,
  defaultExpanded = TRUE,
  paginateSubRows = TRUE,
  groupBy = "Manufacturer",
  searchable = TRUE,
  columns = list(
    Manufacturer = colDef(footer = "Total"),
    Sales = colDef(
      aggregate = "sum",
      format = colFormat(currency = "USD"),
      footer = JS("function(column, state) {
        let total = 0
        state.sortedData.forEach(function(row) {
          // Ignore grouped rows
          if (row._subRows) {
            return
          }
          total += row[column.id]
        })
        return total.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
      }")
    )
  ),
  defaultColDef = colDef(footerStyle = list(fontWeight = "bold"))
)

This is included in a few examples on the custom rendering doc page, but it could definitely use better documentation.