[Vue warn]: Error in render: "TypeError: t.format is not a function" when using a table column formatter

[ianfiske]

I have been struggling with formatting table columns.

I have a format function below, that I grabbed from the Insurance example at https://github.com/BuiltWithGenie/InsuranceAnalysis/tree/main. The insurance example works fine for me locally, but when I try to use this same formatting function in my own project, I get js errors and the page tried to refresh repeatedly.

function format_currency(dt::DataTable)
    currency_columns = ["budget", "actuals_total"]
    for col in currency_columns
        dt.opts.columnspecs[col] = Stipple.opts(;
            format=Stipple.jsfunction(raw"""
                                      (val, row) => val.toLocaleString('en-US', {
                                      minimumFractionDigits: 2,
                                      maximumFractionDigits: 2
                                      })
                                      """)
        )
    end
    return dt
end

and I use it like

@out  main_table = build_main_table(input_data[]) |> format_currency

in app.jl

with UI

Stipple.table(:main_table)

in ui.jl.

The full js stacktrace is

vue.js:1906 TypeError: t.format is not a function
    at VueComponent.getCellValue (quasar.umd.min.js:6:464171)
    at quasar.umd.min.js:6:461674
    at Array.map (<anonymous>)
    at VueComponent.__getTBodyTR (quasar.umd.min.js:6:461471)
    at quasar.umd.min.js:6:462657
    at Array.map (<anonymous>)
    at VueComponent.__getTBody (quasar.umd.min.js:6:462630)
    at VueComponent.__getBody (quasar.umd.min.js:6:485430)
    at Proxy.render (quasar.umd.min.js:6:484107)
    at Vue._render (vue.js:3572:24)

And when I debug, I can see that the t.format object is of type jsfunction. I'm not sure why I hit this problem in my project, but not in the insurance example. Could it be that the insurance example has an HTML UI whereas I have a Stipple julia UI?