CODEWITHSUNDEEP
pythondatatableplotly-dash
Pyd
Pyd

Reputation: 6159

How to Reduce width of Dash DataTable

I have a dash.datatable like below a but the column width is too long for my values, the column width should be limited to the maximum length word of the respective column.

my code:

app = JupyterDash(__name__)

df = pd.DataFrame(
{
    "A" : ["one","two","three"],
    "B" : ["one","two","three"],
    "C" : ["one","two","three"],
    
}
)
app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_data={
        'whiteSpace': 'normal',
        'height': 'auto',
    },
    
)

if __name__ == "__main__":
    app.run_server(mode="jupyterlab")

My DataTable looks like:

enter image description here

Upvotes: 15

Views: 17049

Answers (1)

rftr
rftr

Reputation: 1275

According to the DataTable documentation there is an argument fill_width:

... False: The table container's width will equal the width of its content.

Setting this argument to False:

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns],
    style_data={
        'whiteSpace': 'normal',
        'height': 'auto',
    },
    fill_width=False
)

Output:

Result

Upvotes: 27

Related Questions