How to make border Bottom for one column of Datatable

Dash Python
1

I’m trying to add borders to a column of Datatable but I have a problem that I did not find solution. Below is my sample code:

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell={'textAlign': 'left'},
    style_data_conditional=[
        {'if': {'column_id': 'Region'},
         'borderRight': ' 3px solid red',
         'borderLeft': ' 3px solid red'
        }
    ],
    style_header_conditional=[
        {'if': {'column_id': 'Region'},
         'borderRight': ' 3px solid red',
         'borderLeft': ' 3px solid red',
         'borderTop': ' 3px solid red'
        }
    ]
)

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

And here is the result:

Screenshot 2022-12-02 162053
Screenshot 2022-12-02 1620531912×231 7.04 KB

I tried to add borderBottom to style_data_conditional but it will add border for all cell.

Screenshot 2022-12-02 162236
Screenshot 2022-12-02 1622361916×227 7.06 KB

So I want to ask is there anyway to add borderBottom for last cell only. Thank you.

2

Hello @hoatran,

You can probably figure out something that would work, but it might be easiest to use css for this:

#idoftable tr:last-of-type>td(1) {
    border-bottom: 3px solid red;
}
3

Hi @jinnyzor, so I have to add your css code to my css code in assests folder or what should I do? Thank you.

4

That would be the case, but let’s try this:

from dash import Dash, dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ("Date", ["2015-01-01", "2015-10-24", "2016-05-10", "2017-01-10", "2018-05-10", "2018-08-15"]),
        ("Region", ["Montreal", "Toronto", "New York City", "Miami", "San Francisco", "London"]),
        ("Temperature", [1, -20, 3.512, 4, 10423, -441.2]),
        ("Humidity", [10, 20, 30, 40, 50, 60]),
        ("Pressure", [2, 10924, 3912, -10, 3591.2, 15]),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_cell={'textAlign': 'left'},
    style_data_conditional=[
        {'if': {'column_id': 'Region'},
         'borderRight': ' 3px solid red',
         'borderLeft': ' 3px solid red'
        },
        {‘if’: {‘column_id’:’Region’, ‘row_index’:len(df)-1}, ‘bordeBottom’: ‘3px solid red’}
    ],
    style_header_conditional=[
        {'if': {'column_id': 'Region'},
         'borderRight': ' 3px solid red',
         'borderLeft': ' 3px solid red',
         'borderTop': ' 3px solid red'
        }
    ]
)

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

Thank you, you’re incredible. By the way I have another question that I’ve styled header of Datatable but when print, color of header disappeared. Do you know how to fix this? Thank you.

1 Like
6

No. But this might be easier with css in an assets folder. Lol.

@media print {
#id th(1){
     border-top: 3px solid red
}
}
1 Like