Basic table 5x3 in Dash without using external stylesheets CSS

Dash Python
1

Hello,

I am new user to Dash and I am trying solve “basic” issue with creating empty table with 5 columns and 3 rows with defined width and heigh. I looked for 2 days for some manuals and help on dash forum but did not found any relevant solution (maybe only with using external stylesheets which I do not want use). I tried use Chat GPT for generating this table but it did not helped me. The table should be empty for this example (without any data).

  1. column width = 243.4 px, 2. to 4. column width = 25 px, 5. column = 21 px then all 3 rows has same heigh 33 px but I need that in last row will be all “cells” merged into one row (cell). Also the table must have same fixed dimensions which will not change if I will resize the page.

Do you think is it possible generate this table in Dash without using external stylesheets?

Thank you in advance!

2

Hi @ETB and welcome to the Dash community :slight_smile:

There are several ways to do this. Can you say more about the use-case and what you plan to do with the table?

1 Like
3

Hello, the table should be use as score board for tennis match. So it should use only 5 columns and 3 rows without any additional “titles” above or any other scroll elements in the right side or in the below of the table. Just like simple table in excel. The most important thing is that the dimensions will be fixed and not changed.

Thank you for help!

4

A few more questions.

  • How is the data updated?
  • Is this just for one match, or will you be presenting the data for an entire tournament?
  • Why don’t you want to use an external stylesheet? Would a .css file in the assets folder be OK?

It’s not necessary to use a stylesheet (external or local). You could use the style prop in each cell. But if you are open to a local stylesheet, you could use dash-bootstrap-components for the table layout. If you have a lot of data, it might be better to use dash-ag-grid. I’m just trying to narrow down the options before making a recommendation. :slight_smile:

5

Hello,

the data are loaded to list or dictionary in python from text file. It is only for one match. I do not have good experience with using CSS styles in my previous projects.

Thank you for help

6

OK, since it’s a small amount of data, I’d recommend using an html table. The Dash Bootstrap Component library makes it easier to format and style the table. Here is an example to get you started

import dash
from dash import html
import dash_bootstrap_components as dbc

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


data = [
    {"id": 1, "col1": "name 1", "col2": "2", "col3": "3", "col4": "4", "col5": "5"},
    {"id": 2, "col1": "name 2", "col2": "2", "col3": "3", "col4": "4", "col5": "5"},
    {"id": 3, "col1": "Row 3 spans all columns"}
]

table_body = [
    html.Tbody([
        html.Tr([
            html.Td(row["col1"], style={"width": 200}),
            html.Td(row["col2"], style={"width": 25}),
            html.Td(row["col3"], style={"width": 25}),
            html.Td(row["col4"], style={"width": 25}),
            html.Td(row["col5"], style={"width": 25})
        ],style={"height": 33}) if row["id"] != 3 else
        html.Tr([
            html.Td(row["col1"], colSpan=5, style={ "height": 33, "textAlign": "center"})
        ]) for row in data
    ])
]

table = dbc.Table(table_body, bordered=True, style={"width":300, "fontSize":"small"})

app.layout = dbc.Container([
    html.H4("Dash Bootstrap Components Table Example"),
    table
])


if __name__ == '__main__':
    app.run_server(debug=True)

image
image1154×370 19.7 KB

You can find more info here:

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/table/

7

I went for years avoiding CSS, and being rather put off it by the Mozilla tutorials. The thing that eventually converted me was this tutorial, which I totally recommend. (Just skip the basic HTML sections if you already know that stuff)

2 Likes