[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?

[hhaensel]

It's an error with rendering, will fix and report

[hhaensel]

It's fixed in the latest main branches of Stipple and StippleUI and will be released soon.
What you can already do with the existing release is setting the format after initialisation:

using DataFrames

# don't allow the session data to overwrite the model
Stipple.enable_model_storage(false)

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

df = DataFrame(budget = [1000, 2000, 3000], actuals_total = [500, 1000, 1500])

# dt = DataTable(df)
# format_currency(dt)

ui() = table(:table)

@app begin
    @out table = DataTable(df)
    @in x = 2

    @onchange isready begin
        table = format_currency(table)
    end
end

@page("/", ui)

Any updates to table can be formatted