Default Styling for DataTables

Dash Python
1

Hi everyone - I find myself using Dash DataTables in many different places across my application, having to apply many of the same styles to each one. I was wondering whether there is a way to reset the default DataTable styles to the ones that I have set / still having the ability to adjust any of them if I would like to change the conditional formatting and such. I’m not that well-versed in subclassing, but I think that perhaps that might have something to do with what I want to achieve? Thanks!

2

Hi @dash-beginner

While it’s possible to use classes, it’s not necessary. I usually use a function. For example, this one takes an id and a dataframe and returns a DataTable. Then the table can be updated in a callback.

def make_datatable(dff, id=id):
    return dash_table.DataTable(
        id=id,
        columns=[{"name": i, "id": i, "deletable": True} for i in dff.columns],
        data=dff.to_dict("records"),
        page_size=10,
        editable=True,
        cell_selectable=True,
        filter_action="native",
        sort_action="native",
        style_table={"overflowX": "auto"},
    )
3 Likes
3

Another alternative is to use a dictionariy. That might make it a little bit easier to slightly adjust your default.

default_style=dict(page_size=10,
        editable=True,
        cell_selectable=True,
        filter_action="native",
        sort_action="native",
        style_table={"overflowX": "auto"})

table1=dash_table.DataTable(id="my_id",
              columns=[{"name": i, "id": i, "deletable": True} for i in dff.columns],
              data=dff.to_dict("records"),
              **default_style)

style2=dict(default_style) #make a copy, don't overwrite default
style2['editable']=False

table2=dash_table.DataTable(id="my_id_2",
              columns=[{"name": i, "id": i, "deletable": True} for i in dff.columns],
              data=dff.to_dict("records"),
              **style2)
2 Likes
4

Hey - so I was looking through the Dash documentation and came across All-In-One Components that were released in Dash 2.0. Would that also be a way to handle some more complex standardized DataTables?

1 Like
5

Hi @dash-beginner

Yes, the All-in-One component is a great option if you want to include callbacks with the table. If it’s strictly defining the table, then either solution above might be simpler.

2 Likes