How to display only column/vertical borders in a DataTable

Dash Python
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