Conditional Currency Based on String Values in A Different Column

[mrworthington]

Hi Greg,

Amazing package. My understanding from the documentation is that when using colFormat(currency = X), the supplied value has to be a string character like "USD", "EUR", or "GBP" (like the reprex below). Is there a way to map these values from another column? I tried writing several functions, but keep getting an error saying the supplied value to the currency = X argument has to be a string, not a function.

Question: Is there anyway to pass a value to the currency argument other than a single string?

See the code chunks below for reprexes:

Example: Single String Argument

library(tibble)
library(reactable)

df <- tibble(organization = c("A", "B", "C", "A", "D", "E"),
       currency = c("EUR", "USD", "GBP", "EUR", "USD", "GBP"),
       value = c(20, 75, 88, 33, 43, 22))

reactable(df,
          columns = list(
            value = colDef(format = colFormat(currency = "USD"))
          ))

^{Created on 2022-08-03 by the reprex package (v2.0.1)}

Example: Attempting to Pass String from Other Column

library(tibble)
library(reactable)

df <- tibble(organization = c("A", "B", "C", "A", "D", "E"),
             currency = c("EUR", "USD", "GBP", "EUR", "USD", "GBP"),
             value = c(20, 75, 88, 33, 43, 22))

reactable(df,
          columns = list(
            value = colDef(format = colFormat(currency = function(value, index){
              value <- df$currency[index]
              
              paste0(value)
              
            }))
          ))
#> Error in colFormat(currency = function(value, index) {: `currency` must be a character string

^{Created on 2022-08-03 by the reprex package (v2.0.1)}

[glin]

Hi, there's no way to do conditional formatting using the built-in column formatters, but that's a really cool idea - added as a feature request.

For now, this kind of conditional formatting would have to be done through a custom JavaScript render function. Under the hood, colFormat() is just using the browser's built-in number.toLocaleString() like (20).toLocaleString(undefined, { style: 'currency', currency: 'EUR' }), so you can do something similar with a JS render function. For example:

library(tibble)
library(reactable)

df <- tibble(organization = c("A", "B", "C", "A", "D", "E"),
             currency = c("EUR", "USD", "GBP", "EUR", "USD", "GBP"),
             value = c(20, 75, 88, 33, 43, 22))

reactable(
  df,
  columns = list(
    value = colDef(cell = JS("function(cellInfo) {
      const currency = cellInfo.row['currency']
      return cellInfo.value.toLocaleString(undefined, { style: 'currency', currency: currency })
    }"))
  )
)

And if you want to use custom locales for the formatting, replace the undefined argument with a language tag like the colFormat(locales = ) argument.