Custom rendering example not working

[novotny1akub]

I tried to run the example for custom rendering, but it does not seem to be working. How can I edit the JS code so that it works? Thank you!

data <- MASS::Cars93[20:24, c("Manufacturer", "Model", "Type", "Price")]

reactable(
  data,
  searchable = TRUE,
  columns = list(
    Price = colDef(
      html = TRUE,
      footer = JS("function(column, state) {
        const values = state.data.map(function(row) {
          return row[column.id]
        })
        let total = 0
        values.forEach(function(value) {
          total += value
        })
        return '<b>$' + total.toFixed(2) + '</b>'
      }")
    ),
    Manufacturer = colDef(html = TRUE, footer = "<b>Total</b>")
  )
)

[radovan-miletic]

Hi @novotny1akub, You may try another (possibly updated) Greg's JS render function, works perfectly for me:

footer = JS("function(colInfo) {
        let total = 0
        colInfo.data.forEach(function(row) {
          total += row[colInfo.column.id]
        })
        return '<b>$' + total.toFixed(2) + '</b>'
      }")

[novotny1akub]

@radovan-miletic works like a charm, thanks!

[glin]

Sorry about that, this was probably because that example used a new feature in the unreleased development version (v0.2.3.9000), the new state argument for header and footer render functions. I think it'd help to add a note like "this example requires v0.2.3.9000 (unreleased)" for any example that needs the development version, so I'll go through the docs and do that.

On a related note, reactable v0.3.0 was just released to CRAN, so that example should now work with the latest reactable on CRAN. And colInfo.data was deprecated in favor of state.data, although colInfo.data will still work for a long time. So switch over to state.data when you can, but it's not super urgent.