GenieBuilder -> DataTable -> Style -> Color not working

[Atitlanio]

The Color property of a DataTable doesn't seem to have any effect. E.g., setting it to "primary"

Steps to Reproduce:

1. add DataTable block
2. Set Data Binding, Columns and Pagination
3. Set Style -> Color to primary

app.jl.html has the following: <q-table :data="data.data" :pagination="data_pagination" :columns="data.columns" :color="primary"></q-table>

Color remains the default white. Tried other values such as warning, red-8, blue, etc.

Temporary working solution is to set Table Style = 'background-color: #XXXXXX', e.g., <q-table :data="in_data.data" :pagination="data_pagination" :columns="in_data.columns" :dense="true" :table-style="'background-color: #99a0fc'"></q-table>

[hhaensel]

It does change the color, but you are probably looking at the wrong part of the table. The color property changes the color of the pagination buttons, but you would need to omit the colon before color:

 <q-table :data="data.data" :pagination="data_pagination" :columns="data.columns" color="primary"></q-table>

If you want to change the color of the lines you need to change the attribute table-class:

 <q-table :data="data.data" :pagination="data_pagination" :columns="data.columns" table-class="bg-primary"></q-table>

or via StippleUI:

table(:data, table__class = "bg-primary")

Theroretically, you would also be able to set the font color here by setting table-class="bg-primary text-white", but unfortunately our current stipple-core.css overwrites this setting by

.stipple-core .q-table tbody tr {
  color: var(--st-text-2);
}

@essenciary We should somehow release that restriction without breaking our current layouts. Any idea?

[hhaensel]

Currently the only way is probably to overload the critical definition from stipple-core.css

function add_css(css::Function; update = true)
    update && deleteat!(Stipple.Layout.THEMES, nameof.(Stipple.Layout.THEMES) .== nameof(css)) 
    push!(Stipple.Layout.THEMES, css)
end

function mycss()
    [style("""
        .stipple-core .q-table tbody tr { color: inherit; }
    """)]
end

add_css(mycss)

[hhaensel]

@essenciary Shouldn't we add add_css to Stipple? We do use it in some demos like DraggableTree or TableDownloadClipboard.

[essenciary]

@hhaensel Yes, looks good

[hhaensel]

@Atitlanio With the latest version of Stipple v0.27.16 we defined add_css(), so all you need to do is

function mycss()
    [style("""
        .stipple-core .q-table tbody tr { color: inherit; }
    """)]
end

add_css(mycss)

Then you can style your table by the table-class or table-style attributes.