Select which borders to show in datatable

Dash Python
1

Hi,

I’d like to recreate this table:
image

I know that all the borders can be removed with

style_data = [{'border': 'none'}]

Is there a way to specify the horizontal borders between specific lines to break the table into multiple sub parts?

Thanks

2

Here’s an ugly (but working) solution, using conditional formatting on the table. I’d recommend using come css along with a dash-bootstrap-components table, however, as it seems you want a fairly non-interactive table.

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

data = OrderedDict(
    [
        ("Metric", ["Risk-Free Rate", "Time in Market", "Cumulative Return", "CAGR%", "Sharpe", "Smart Sharpe"]),
        ("Strategy", ['100%'] * 6),
        ("Benchmark", ['100%'] * 6),
    ]
)

df = pd.DataFrame(data)

app = Dash(__name__)


def add_borders(locations):
    return [
        {
            'if': {
                'filter_query': '{{Metric}} = {}'.format(repr(loc))
            },
            'border-bottom': '1pt solid'
        }
        for loc in locations
    ]


border_locations = ['Time in Market', 'CAGR%']

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    sort_action='native',
    columns=[{'name': i, 'id': i} for i in df.columns if i != 'id'],
    style_data_conditional=add_borders(border_locations),
    style_data={'border': 'none'}
)

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

Thanks for this solution! I solved it similarly by dividing the data into multiple tables without header (except for the first one) and adding an empty Div with top border between the different tables.