dbc.Table background color

[Gillesa]

Hello, I create a dbc.Table and put it in a dbc.CardBody. I just migrate to Dash 1.20.0 into 2.18.1 and dash_bootstrap_components version 1.16.0 to 1.6.0 and have some troubles.

Codes

# Create my table
table_header = [html.Thead(html.Tr([html.Th("Station inactive"), html.Th("Dernière anomalie")]))]

table_row = []
for i in range(0, len(data)):
    station_id = data.iloc[i]["station_id"]
    station_label = data.iloc[i]["station_label"]
    last_date_anomaly = data.iloc[i]["Dernière anomalie"]

    table_row.append(
        html.Tr(
            [
                html.Td(
                    dcc.Link(station_label, href="/station/" + str(station_id), target="_blank", refresh=True),
                ),
                html.Td(last_date_anomaly),
            ]
        )
    )
table = dbc.Table(
    table_header + table_row,
    striped=True,
    bordered=True,
    hover=True,
    # dark=True,
    size="sm",
    color="info",
)

# Create # Board station
 tab_board = dbc.Card(
    dbc.CardBody(
        [
            dbc.Row(
                [
                    dbc.Col(
                        html.Div(
                            [
                                # bla bla
                            ]
                        ),
                        width=2,
                    ),
                    dbc.Col(
                        html.Div(
                            [
                                table_station_inactive,
                            ]
                        )
                    ),
                    dbc.Col(
                        html.Div(
                            [
                                # bla bla
                            ]
                        ),
                        width=2,
                    ),
                ]
            ),
        ]
    ),
    className="mt-3",
)

Result

What I want :

What I got :

I miss something but don’t know what…

[AIMPED]

Hey @Gillesa, does this help?

dbc.Table and html.Div have different backgrounds

Hello, I have a dbc.Table and a Html.Div, which both have the same background color (#191919). However, when displayed they show a different color like in the image below. I have dbc.bootstrap.themes.Cyborg in use. Does anyone know a solution? Making the table background transparent or !important does not work either. Best Regards Clemens [Screenshot 2023-09-09 081551]

[AnnMarieW]

Hi @Gillesa

Can you make a complete minimal example that replicates the issue?

For example, this includes a table in a card and uses dcc.Link in a column. The background color looks fine.

import dash_bootstrap_components as dbc
from dash import Dash, html, dcc

app=Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


table_header = [
    html.Thead(html.Tr([html.Th("First Name"), html.Th("Last Name")]))
]

row1 = html.Tr([html.Td(dcc.Link("Arthur", href="/station/")), html.Td("Dent")])
row2 = html.Tr([html.Td(dcc.Link("Ford", href="/station/")), html.Td("Prefect")])
row3 = html.Tr([html.Td(dcc.Link("Zaphod", href="/station/")), html.Td("Beeblebrox")])
row4 = html.Tr([html.Td(dcc.Link("Trillian", href="/station/")), html.Td("Astra")])

table_body = [html.Tbody([row1, row2, row3, row4])]

table = dbc.Table(table_header + table_body, bordered=True, color="info")

app.layout = dbc.Container([
    dbc.Card(table, body=True)
])

if __name__ =="__main__":
    app.run(debug=True)

[Gillesa]

@AnnMarieW Of course, I should have done it from the beginning.

Thanks @AIMPED , it help me to create a minimal exemple

import dash_bootstrap_components as dbc
import pandas as pd
from dash import Dash, dcc, html

app = Dash(__name__, external_stylesheets=[dbc.themes.LUX])

data = pd.DataFrame(
    {
        "station": ["groupe A", "groupe B", "groupe C", "groupe D"],
        "date": ["2024-07-30 08:50", "", "", ""],
    }
)

# Create Table
table_header = [html.Thead(html.Tr([html.Th("Station inactive"), html.Th("Dernière anomalie")]))]

table_row = []
for i in range(0, len(data)):
    station_id = data.iloc[i]["station"]
    station_label = f"Station {station_id}"
    last_date_anomaly = data.iloc[i]["date"]

    table_row.append(
        html.Tr(
            [
                html.Td(
                    dcc.Link(station_label, href="/station/" + str(station_id), target="_blank", refresh=True),
                ),
                html.Td(last_date_anomaly),
            ]
        )
    )
table = dbc.Table(
    table_header + table_row,
    striped=True,
    bordered=True,
    hover=True,
    # dark=True,
    size="sm",
    color="info",
)


app.layout = dbc.Card(
    dbc.CardBody(
        [
            dbc.Row(
                [
                    dbc.Col(
                        html.Div(
                            [
                                table,
                            ]
                        )
                    ),
                ]
            ),
        ]
    ),
    # className="mt-3",
)
# Run the app
if __name__ == "__main__":
    app.run(host="127.0.0.1", port="3000", debug=False)

[AIMPED]

@Gillesa the missing piece was given by @AnnMarieW: you have to nest the rows into the table body tags.

table_body = [html.Tbody(table_row)]

table = dbc.Table(
    table_header + table_body,
    striped=True,
    bordered=True,
    hover=True,
    # dark=True,
    size="sm",
    color="info",
)

Full code:

import dash_bootstrap_components as dbc
import pandas as pd
from dash import Dash, dcc, html

app = Dash(__name__, external_stylesheets=[dbc.themes.LUX])

data = pd.DataFrame(
    {
        "station": ["groupe A", "groupe B", "groupe C", "groupe D"],
        "date": ["2024-07-30 08:50", "", "", ""],
    }
)

# Create Table
table_header = [html.Thead(html.Tr([html.Th("Station inactive"), html.Th("Dernière anomalie")]))]

table_row = []
for i in range(0, len(data)):
    station_id = data.iloc[i]["station"]
    station_label = f"Station {station_id}"
    last_date_anomaly = data.iloc[i]["date"]

    table_row.append(
        html.Tr(
            [
                html.Td(
                    dcc.Link(station_label, href="/station/" + str(station_id), target="_blank", refresh=True),
                ),
                html.Td(last_date_anomaly),
            ]
        )
    )

table_body = [html.Tbody(table_row)]

table = dbc.Table(
    table_header + table_body,
    striped=True,
    bordered=True,
    hover=True,
    # dark=True,
    size="sm",
    color="info",
)


app.layout = dbc.Card(
    dbc.CardBody(
        [
            dbc.Row(
                [
                    dbc.Col(
                        html.Div(
                            [
                                table,
                            ]
                        )
                    ),
                ]
            ),
        ]
    ),
    # className="mt-3",
)
# Run the app
if __name__ == "__main__":
    app.run(host="127.0.0.1", port="3000", debug=False)

[Gillesa]

Yeah just find it ! Solution of my orignal question / solution.

table = dbc.Table(
    table_header + [html.Tbody(table_row)],
    striped=True,
    bordered=True,
    hover=True,
    # dark=True,
    size="sm",
    color="info",
)