Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 369
Vicky Avatar asked Jan 08 '21 08:01

Vicky


People also ask

How to modify the display of data in the DataTable?

The DataTable also exposes a powerful API that can be further used to modify how the data is displayed. The autoWidth option is used to specify whether the automatic calculation of the column width in the DataTable is enabled or not.

What is the use of the autowidth option in DataTable?

The autoWidth option is used to specify whether the automatic calculation of the column width in the DataTable is enabled or not. This calculation takes a little time and may be disabled when the column widths are explicitly passed using the columns.width option.

How to use DataTables reduce in browsers which do not support reduce?

In browsers which do not support reduce natively, a polyfill is provided to allow this DataTables method to operate as expected. Apply a callback function against and accumulator and each element in the Api's result set. Callback function which is called for each item in the API instance result set.

What is the DataTable used for?

This also allows the data in the table to be searched, sorted, and filtered according to the needs of the user. The DataTable also exposes a powerful API that can be further used to modify how the data is displayed.


Video Answer


1 Answers

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

like image 172
rftr Avatar answered Sep 24 '22 06:09

rftr