How to display only column/vertical borders in a DataTable

Dash Python
1

I would like to display only vertical/column borders on certain columns, but no horizontal/row borders, in my Dash DataTable. Does anyone have a working example of this? I have been able to implement this in R Shiny but cannot find a way to replicate in Dash.

2

Hi @abreit26 and welcome to the Dash community :grinning:

Here’s an example - You can include columns headers too with style_header_conditional if you like:

image
image697Ă—229 18.4 KB 


from dash import Dash, dash_table, dcc, html
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__)

df['id'] = df.index

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    sort_action='native',
    columns=[
        {'name': 'Date', 'id': 'Date', 'type': 'datetime', 'editable': False},
        {'name': 'Delivery', 'id': 'Delivery', 'type': 'datetime'},
        {'name': 'Region', 'id': 'Region', 'type': 'text'},
        {'name': 'Temperature', 'id': 'Temperature', 'type': 'numeric'},
        {'name': 'Humidity', 'id': 'Humidity', 'type': 'numeric'},
        {'name': 'Pressure', 'id': 'Pressure', 'type': 'any'},
    ],
    editable=True,
    style_data_conditional=[
        {
            'if': {
                'column_id': 'Region',
            },
            'borderRight': '5px solid red',
            'borderLeft': '5px solid red',
        },
    ],
    style_header_conditional=[
        {
            'if': {
                'column_id': 'Region',
            },
            'borderRight': '5px solid red',
            'borderLeft': '5px solid red',
        },
    ]
)

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

Amazing, this worked! Thank you so much. Follow-up question: I’d love to also be able to do custom borders on the top row of a 2-row header. Specifically, I want to apply a left border to the “Main header 1” and “Main header 2” specified in the columns below, but those don’t have column IDs, just names. Any thoughts?

columns=[
    {"name": ["", "Metric section"], "id": "metric_section"},
    {"name": ["", "Metric name"], "id": "metric_name"},
    {"name": ["Main header 1", "Control EV"], "id": "control_ev"},
    {"name": ["Main header 1", "95% CI"], "id": "relative_diff_95_ci"},
    {"name": ["Main header 2", "Control EV"], "id": "control_ev_2"},
    {"name": ["Main header 2", "95% CI"], "id": "relative_diff_95_ci_2"}
]
4

hmm… now you are asking the hard questions! :thinking:

In theory, this is possible. You can specify a header_index number to target a specific row of a multi column header. However, it’s not working at the moment. :cry:

A bunch of work is being done on the DataTable right now, so hopefully, this will be fixed in the next release. You can comment on the issue and follow the progress here:

1 Like