Dynamic resizing of dash.dash_table.DataTable with the window

Dash Python
1

I have a dash.dash_table.DataTable that looks fine on a 1920x1080p display. When I resize the window or use a smaller resolution display the data table does not scale. What instead happens is other elements move ontop of it, overlapping the table and also there are columns in the table that are blank. these blank columns shrink but the other columns that have data stay the same size so the cells in the columns that are all empty get really really small. What I need is a way for the table to shrink font size and everything while keeping all cells the same size such that the table still has the same proportions when the window is resized/using a display with a different resolution.

This is minimum repoduceable example. When you make the window smaller you can see how the empty columns get smaller but the other ones don’t. Also you can see how the text “something” starts to overlap with the table.

import dash
import dash_bootstrap_components as dbc
import pandas

from numpy import nan


def getStyleCellConditionalFormatting(df):

    styling = [
               # Set the first column formatting
               {"if": {
                       "column_id": df.columns[0]
                      },
                "width": "77px",
                "textAlign": "left",
                "color": "black",
                "fontWeight": "bold",
                "backgroundColor": "#D0CECE"}] + [
               # Set the other columns formatting
               {"if": {
                       "column_id": str(c)},
                "width": "60px",
                "textAlign": "center"} for c in df.columns[1:]]

    return styling


def makeTable(df, noHeaders=False):
    columns = tuple(dict(id=str(c), name=str(c), type="numeric", format=dash.dash_table.FormatTemplate.percentage(1)) for c in df.columns)

    headerStyleConditional = [{"if": {"column_id": df.columns[0]},
                                "textAlign": "left",
                                "width": "79px"}]


    if noHeaders:
        headerStyle = {"display": "none", "height": "5px"}
        tableStyle  = {"margin-top":"-15px"}


    else:
        headerStyle = {"textAlign": "center",
                        "backgroundColor": "#BBBBBB",
                        "fontWeight": "bold",
                        "color": "black",
                        "width": "60px",
                        "border": "3px solid black"}
        tableStyle = {}


    return dash.dash_table.DataTable(data=df.to_dict("records"),
                                     columns=columns,
                                     style_header=headerStyle,
                                     style_header_conditional=headerStyleConditional,
                                     style_cell_conditional=getStyleCellConditionalFormatting(df),
                                     style_table=tableStyle)



df = pandas.DataFrame(data={"col0":  ["row1", "row2", "row3", "row4", "row5", "row6", "row7", "row8"],
                            "col1":  [nan, nan, nan, nan, nan, nan, nan, nan],
                            "col2":  [nan, nan, nan, nan, nan, nan, nan, nan],
                            "col3":  [nan, nan, nan, nan, nan, nan, nan, nan],
                            "col4":  [nan, nan, nan, nan, nan, nan, nan, nan],
                            "col5":  [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col6":  [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col7":  [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col8":  [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col9":  [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col10": [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782],
                            "col11": [0.9823, 0.4572, 0.4757, 0.4524, nan, 0.4567, 0.8765, 0.6782]})





app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CERULEAN, dbc.themes.BOOTSTRAP])


table = makeTable(df, noHeaders=True)



app.layout = dbc.Container([



dbc.Row([
         dbc.Col(table, id="tableId", width=6),
         dbc.Col("something", width=6),
]),



], fluid=True)



if __name__ == '__main__':
    app.run(debug=True)
2

I think you can you xs, md, lg instead of width setting for Col. Something as below:

app.layout = dbc.Container([
    dbc.Row([
         dbc.Col(table, id="tableId", xs=12, md=12, lg=6),
         dbc.Col("something", xs=12, md=12, lg=6),
]),
], fluid=True)

So when you resizing your window, something will be under the table.

image
image627Ă—850 37.9 KB

1 Like
3

That works great for soliving the overlap problem!!
but what about the first four columns shrinking. is there no way to keep ever cell the same size and just decrease font size and table width such that every cell remains the same size?

4

I think you can set minWidth in your code. Something as below:

def getStyleCellConditionalFormatting(df):
    styling = [
               # Set the first column formatting
               {"if": {
                       "column_id": df.columns[0]
                      },
                "width": "77px",
                "minWidth":77,
                "textAlign": "left",
                "color": "black",
                "fontWeight": "bold",
                "backgroundColor": "#D0CECE"}] + [
               # Set the other columns formatting
               {"if": {
                       "column_id": str(c)},
                "width": "60px",
                "minWidth":60,
                "textAlign": "center"} for c in df.columns[1:]
1 Like
5

right but that stops them from shrinking. what I want is for the cells to ALL shrink THE SAME and for the font size to adjust accordingly to fit in the smaller cells

1 Like