Dynamic setting of Table columns property gives empty component

[edmund-r]

Hi am attempting to limit the overall width of a Table and the width of the columns in the table. For the column widths, I created a dictionary for the DataTable columns in the @app block of the code and used @out for the variable to link to the Columns property in the no-code editor UI.

    # Why doesn't this work?
     search_dict = 
         map(col_attr -> Dict(
                 ":name" => col_attr[1],
                 ":label" => col_attr[1],
                 ":classes" => col_attr[2]
             )
             ,[["Column1","col-1"],["Column2","col-1"],["Column3","col-4"],["Column4","col-4"],["Column5","col-2"]]
          ) # Only show these columns
     @out search_dict_columns = [join(["$k = \"$(v)\"" for (k, v) in d], " ") for d in search_dict ]

However, when using this the table does not display the data when its data variable is updated. I can use

     @out search_dict_columns = ["Column1","Column2","Column3","Column4","Column5"]

However, this does not limit the width of the columns and causes the columns to extend beyond the "div" section it is in. This overlaps the next section and makes the UI unworkable.

How do you set the column widths for a Table component?

[hhaensel]

It was more difficult than I thought. This is my solution with classical Stipple, but I'm sure you can transfer that.

using Stipple, Stipple.ReactiveTools, StippleUI
using DataFrames

# The line below is for easier debugging to prevent resetting the old state when you are experimenting with initial values
# Stipple.enable_model_storage(false)

df = DataFrame(
    x = [1, 2, 3],
    y = [4, 5, 6],
    z = [7, 8, 9]
)

dt = DataTable(df)

col_width = Dict(
    "x" => 60,
    "y" => 30,
    "z" => 10
)

dt_options = DataTableOptions(columnspecs = Dict(k => Dict(:label => "$k label", :headerStyle => "width: $v%") for (k, v) in col_width))
dt.opts = dt_options

@app begin
    @in x = 11
    @in y = 22

    @out table = DataTable(df, dt_options)
    @out cols = col_width
end

@watch [
    :cols => js"""{
        handler () {
            this.table.columns.map((col, i) => {
                this.table.columns[i].headerStyle = "width: " + this.cols[col.field] + "%";
            });
        },
        deep: true
    }
    """
]

function ui()
    row(class = "q-mt-md", cell(class = "st-module q-pa-md",
        htmldiv(gutter = :md, [
            slider(10:50, R"cols.x", "X", style = "max-width: 500px"),
            slider(10:50, R"cols.y", "Y", style = "max-width: 500px"),
            table(:table)
        ])
    ))
end

@page("/", ui, model = MyApp, post = x -> (global model = x; nothing))

up(open_browser = true)