2

I'm working on a dashboard using Dash and dash_bootstrap_components. I already have a layout with 3 rows of graphs that will change after a drop down selection (from a data frame). The one Thing I would like to do but could not find an answer for , is to to pick a variable and get a histogram (which I know how to do) and also get a table with some statistical values (similar to df.sescribe()). I'm attaching the mock layout before all the changes applied.

What is the way of doing it? dbc.Table?

Would like to get some ideas on how to continue from here.

Thanks!

enter image description here

NsN
  • 109
  • 5

1 Answers1

2

I make two kinds of tables in Dash, interactive using dash_table and more visually appealing ones using dbc.Table. Below are functions I've created that allow me to pass a pandas dataframe and some additional arguments for formatting the tables. I use these functions in callbacks to create and return the table I want to an html.Div component

Interactive: dash_table

import dash_table

def make_interactive_dash_table(df, cell_width='150px', page_size=10, sort_cols=None, ascending=True):
    
    if sort_cols:
        data = df.sort_values(sort_cols, ascending=ascending).to_dict('records')
    else:
        data = df.to_dict('records')

    # tweak these if you need to
    # this helps format column widths when you enable sort_action
    long_column_names = [{"if": {"column_id": column}, "min-width": "300px"} for column in df.columns if len(column) >= 30]
    med_column_names = [{"if": {"column_id": column}, "min-width": "250px"} for column in df.columns if (len(column) > 15 and len(column)) < 30]
    small_column_names = [{"if": {"column_id": column}, "min-width": "150px"} for column in df.columns if len(column) <= 15]

    adjusted_columns = long_column_names + med_column_names + small_column_names

    table = dash_table.DataTable(
        columns=[{'name': i, 'id': i} for i in df.columns],
        data=data,
        filter_action='native',
        sort_action='native',
        style_table={'overflowX': 'auto'},
        style_cell_conditional=adjusted_columns,
        page_size=page_size
    )

    return table

Formatted table: dbc.Table

import dash_html_components as html
import dash_bootstrap_components as dbc

def make_formatted_dash_table(df, header=True, sort_cols=None, ascending=True, size='md'):
    
    if sort_cols:
        df.sort_values(sort_cols, ascending=ascending, inplace=True)
    
    rows, cols = df.shape

    if header:
        table_header = html.Thead(
            html.Tr([html.Td(i) for i in df.columns])
        )
    else:
        table_header = None

    table_body = html.Tbody(
        [
            html.Tr(
                [
                    html.Td(df.iloc[row, col]) for col in range(cols)
                ]
            ) for row in range(rows)
        ]
    )

    table = dbc.Table(
        [table_header, table_body],
        bordered=True,
        hover=True,
        striped=True,
        size=size
    )

    return table
Chuck Tucker
  • 259
  • 1
  • 8