How do I add separators in the footer (containing the total value of each column) of my reactable table in r?

user_17159301 0
Viewed 255

I have built a table using the reactable package in RStudio. The first column contains text and all the others contain monetary values. I have added a footer which contains the total of each column except the first. For the body of the table, I added separators to the numbers (because they are large numbers) using

colDef(format = colFormat(prefix = "£", separators = TRUE, digits = 2)

but this does not apply to the footer and I can't find out how to get the numbers in the footer in the same format. The footer was made using

sprintf("£%.2f", sum(values))

and so has the correct prefix and decimal places, but not the separators. Does anyone know how to do this? Thank you!

reactable r
1 Answers

In reactable, you can customize data rendering using either an R or JavaScript function that returns custom content.

A possible solutions with an R render function using formatC().
A simple reproducible example (just for the record):

df <- data.frame(
  TextColumn = c("A", "B", "C", "D", "E"),
  NumColumn1 = c(1000111.01, 1000222.02, 1000333.03, 1000444.04, 1000555.05),
  NumColumn2 = c(2000111, 2000222, 2000333, 2000444, 2000555)
)

reactable::reactable(
  data = df,
  columns = list(
    NumColumn1 = reactable::colDef(
      format = reactable::colFormat(
        suffix = " €",
        separators = TRUE,
        digits = 2
      ),
      footer = function(values, name) {
        htmltools::div(paste0(formatC(
          x = sum(values),
          digits = 2,
          big.mark = " ",
          format = "f"
        ), " €"))
      }
    ),
    NumColumn2 = reactable::colDef(
      format = reactable::colFormat(
        prefix = "£",
        separators = TRUE,
        digits = 2
      ),
      footer = function(values, name) {
        htmltools::div(paste0("£", formatC(
          x = sum(values),
          digits = 2,
          big.mark = " ",
          format = "f"
        )))
      }
    ),
    TextColumn = reactable::colDef(footer = "Total")
  )
)

Output:
enter image description here

A solution you might be interested in:

df <- data.frame(
  TextColumn = c("A", "B", "C", "D", "E"),
  NumColumn1 = c(1000111.01, 1000222.02, 1000333.03, 1000444.04, 1000555.05),
  NumColumn2 = c(2000111, 2000222, 2000333, 2000444, 2000555)
)

reactable::reactable(
  data = df,
  columns = list(
    NumColumn1 = reactable::colDef(
      format = reactable::colFormat(
        prefix = "£",
        separators = TRUE,
        digits = 2
      )),
    NumColumn2 = reactable::colDef(
      format = reactable::colFormat(
        prefix = "£",
        separators = TRUE,
        digits = 2
      )),
    TextColumn = reactable::colDef(
      footer = "Total"
    )
  ),
  defaultColDef = reactable::colDef(
    footer = function(values, name) {
      if (name %in% c("NumColumn1", "NumColumn2")) {
        htmltools::div(paste0("£", formatC(
          x = sum(values),
          digits = 2,
          big.mark = " ",
          format = "f"
        )))
      }
    },
    footerStyle = list(fontWeight = "bold")
    )
)

Output:
enter image description here

user_125614760
Related