Added a new widget type - Interactive Table.

[abcdvvvv]

I created a new widget - Interactive Table. Users can enter data into the table from the frontend and the data will be passed directly to the Julia variable on the backend. This method is meant to replace ms excel for data entry.

I also modified table.css to add a light-theme and a dark-theme, the default is the light-theme.

This is an example code

using Bonito

dict_table = Dict("Name" => ["Alice", "Bob", "Charlie"], 
    "Age" => [30, 25, 35],
    "Height"=>[170, 180, 300],
)
editable_table = Bonito.InteractTable(dict_table)

app = App() do session::Session
    button = Button("Print Table";
        style=Styles(
            CSS(
                "background-color" => "rgb(80,80,80)",
                "font-size" => "15px",
                "font-weight" => "400",
                "color" => "white",
            ),
            CSS(":focus", "background-color" => "rgb(50,50,50)"),
        ),
    )

    on(button.value) do clicked::Bool
        for (i, row) in enumerate(editable_table.cell_obs)
            row_vals = [cell[] for cell in row]
            println("Row $i = $row_vals") 
        end
        println("---------------")
    end

    button2 = Button(
        "Calculate the total number of ages";
        style=Styles(
            CSS(
                "background-color" => "rgb(80,80,80)",
                "font-size" => "15px",
                "font-weight" => "400",
                "color" => "white",
            ),
            CSS(":focus", "background-color" => "rgb(50,50,50)"),
        ),
    )

    on(button2.value) do clicked::Bool
        sum=0
        for (i, row) in enumerate(editable_table.table["Age"])
            sum+=row
        end
        println("Total $sum years.")
        println("---------------")
    end

    return DOM.div(
        Bonito.jsrender(session, editable_table), button, button2; class="dark-theme"
    )
end

Something to do later is to add the description document and the test set. Currently it only supports tables in Dict{String,Vector} format. I will add other support in the future.

1/24/2025 It now supports all tables that conform to the Tables.jl interface.

[SimonDanisch]

Cool thank you! I will try to take a look!

[abcdvvvv]

ERROR: LoadError: LoadError: syntax: invalid assignment location "; cell_obs, colnames, coltypes" around /home/runner/work/Bonito.jl/Bonito.jl/src/widgets.jl:477 that appears in CI is due to the fact that Julia 1.6 does not support Property destructuring.

Don't worry, I had no problem running it in v1.10.7.