DataTable Column Interactivity Doesn't Resize Column

Dash Python
1

I have to thank everyone upfront who contribute to Dash, it’s great. One thing I’ve been struggling with recently is how DataTable column interactivity like adding ‘hideable’, ‘deletable’, etc. doesn’t resize the column width. If you have enough columns and some of those columns widths are being determined by the header name the interactivity tools push the column name out of view.

Screen Shot 2021-09-21 at 4.42.59 PM

I looked around and only found one mention of this issue on the dash-table github with no discussion.

If anybody knows a solution to get the columns to resize when interactivity is added please let me know.

Reproducible example below. If you don’t see the issue at first try making your browser window narrower.

import dash
import dash_table
import pandas as pd
from collections import OrderedDict

data = OrderedDict(
    [
        ('Temperature', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature1', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature2', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature3', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature4', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature5', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature6', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature7', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature8', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature9', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature10', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature11', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature12', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature13', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature14', [1, -20, 3.512, 4, 10423, -441.2]),
        ('Temperature15', [1, -20, 3.512, 4, 10423, -441.2]),
    ]
)
df = pd.DataFrame(data)

app = dash.Dash(__name__)

app.layout = dash_table.DataTable(
    data=df.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in df.columns[0:2]] +
        [{'id': c, 'name': c, 'clearable': True, 'renamable': True, 'deletable': True, 'selectable': True,} for c in df.columns[2:]]
)

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

Hi @maxin and welcome to the Dash community :slightly_smiling_face:

You are in luck! This was just fixed and will be in the next release: :confetti_ball:

3

Thanks @AnnMarieW. Happy to be here and the quick update was much appreciated :slight_smile: