Stipple.table colors

[Velimir V Vesselinov (monty)]

I do not see how to control the colors in Stipple.table? I got some weird invisible colors:

or

[Pere Giménez]

By default, tables should have a white/light grey pattern. See an example in the component gallery. Did you add any style customizations that would make it look like this?

You can also change the styling of the odd rows of the table by giving it an id with table(id="datatable", ...) and then targetting it with CSS:

#databable tbody tr:nth-child(2n) {
    background: rgba(108, 177, 242, 0.03);
}

[Velimir V Vesselinov (monty)]

Oops! Now, I see what caused the stripes.

Now the light mode works.

I still have issues with the dark mode:

Stipple.table(:datatable; pagination=:datatable_pagination, dense=true, striped=false, flat=true, dark=true, hover=true)

I tried to change the color and background:

tr {
background: #808080 !important;
color: #FFFFFF;
}

but it did not work. The only way to change colors in the table is using CSS, correct? Thank you!

[hhaensel]

You can always overwrite defaults by using templating.

Here I use a somewhat sophisticated example to display an editable table that changes the color of entries when they are edited.
Additionally, I just display the value with a custom color.

using Stipple, Stipple.ReactiveTools
using StippleUI
using DataFrames

df = DataFrame(name = ["Panda", "Lily"], email = ["[e-mail]", "[e-mail]"], age = [5, 6])

@app HH begin
    @in table = DataTable(df)
    @out ref_table = DataTable(copy(df))
end

css() = [style(".stipple-core .q-input .stipple-td {font-weight: 400; font-size: 0.9rem}")]
add_css(css)

ui() = [table(:table,
    template("", var"v-slot:body-cell" = "props", [
        quasar(:td, props = :props, [
            textfield("", R"table.data[props.key-1][props.col.name]", :dense, :borderless,
                input__class = [Dict("text-red" => js"table.data[props.key-1][props.col.name] != ref_table.data[props.key-1][props.col.name]"), "stipple-td"]
            )

            htmldiv(class = "text-teal", "{{props.value}}")
        ])
    ]))
]

route("/table") do
    global model
    model = HH |> init |> handlers
    page(model, ui) |> html
end

up()

Acknowledgement

The basic idea comes from: https://dev.to/quasar/quasar-s-qtable-the-ultimate-component-4-6-all-the-slots-40g2

[hhaensel]

The following ui() defintion makes adding a css unnecessary:

ui() = [table(:table,
    template("", var"v-slot:body-cell" = "props", [
        quasar(:td, [
            textfield("", R"table.data[props.key-1][props.col.name]", :dense, :borderless,
                input__class = Dict("text-red" => js"table.data[props.key-1][props.col.name] != ref_table.data[props.key-1][props.col.name]"),
                input__style = Dict("font-weight" => 400, "font-size" => "0.9rem") # standard settings from stipplecore.css
            )
        ])
    ]))
]

[hhaensel]

Added some code to StippleUI#master, to make styling and editing a breeze.
Hopefully, the idea behind it makes it to the quasar docs: in quasarframework/quasar#17051

[hhaensel]

Does this help you?
GenieFramework/StippleUI.jl@990456a

[Velimir V Vesselinov (monty)]

this is great! Thank you!