# DataTable Column Interactivity Doesn't Resize Column

**URL:** <https://community.plotly.com/t/datatable-column-interactivity-doesnt-resize-column/56844>\
**Category:** Dash Python\
**Created:** [September 21, 2021, 8:49pm UTC](https://community.plotly.com/t/datatable-column-interactivity-doesnt-resize-column/56844 "2021-09-21T20:49:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxin](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@maxin](https://community.plotly.com/u/maxin)\
**Post date:** [September 21, 2021, 8:49pm UTC](https://community.plotly.com/t/datatable-column-interactivity-doesnt-resize-column/56844/1 "2021-09-21T20:49:41Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/d/1ddbbc449a129c86370ce28bb1f15ff1406467fd.png)

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

> <https://github.com/plotly/dash-table/issues/687>
>
> If the column name is wider than the width of the longest value in that column, …then the column appears to automatically expand to the width of the column name. However, the presence of the toggle 'eye' icon in the header means that the end of the column name gets cut off. Presumably the icon width is not being taken into account in the auto-width logic. 
> 
> !\[image\](https://user-images.githubusercontent.com/17439476/73970852-e255a700-48eb-11ea-8d9e-fda7fb5823f2.png)
> 
> Packages:
> dash 1.3.1      
> dash-auth 1.3.2          
> dash-core-components 1.2.1      
> dash-daq 0.1.7      
> dash-html-components 1.0.1      
> dash-renderer 1.1.0      
> dash-table 4.3.0
> 
> Browser: 
> Chrome Version 79.0.3945.130 (Official Build) (64-bit), 
> Chromium Version 79.0.3945.130 (Developer Build) built on Debian 10.2, running on Debian 10.2 (64-bit)

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.

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [September 22, 2021, 12:46am UTC](https://community.plotly.com/t/datatable-column-interactivity-doesnt-resize-column/56844/2 "2021-09-22T00:46:24Z")

</div>

Hi @maxin and welcome to the Dash community 🙂

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

> <https://github.com/plotly/dash-table/issues/867>
>
> Bug first appeared for me when I upgraded to dash-table 4.11.1
> 
> Notice the las…t letter of the column headers are being cut off when the header text is longer than the cell contents and sorting is enabled. I think this also only happens when the table has a bunch of columns. Small tables with just a few columns and plenty of horizontal space to stretch out seem to be immune, but when you load up a table with many columns, you see this start to happen.
> 
> bug in action:
> !\[image\](https://user-images.githubusercontent.com/52638880/106084702-d199d480-60ec-11eb-8be4-7f774fc3de76.png)
> 
> and without sorting:
> !\[image\](https://user-images.githubusercontent.com/52638880/106085533-5f29f400-60ee-11eb-8d8b-ec00fb54c4d0.png)
> 
> Thanks yall are great.
> Nathan

---

<div class="post-metadata">

**Author:** ![maxin](https://avatars.discourse-cdn.com/v4/letter/m/c57346/32.png) [@maxin](https://community.plotly.com/u/maxin)\
**Post date:** [September 22, 2021, 12:10pm UTC](https://community.plotly.com/t/datatable-column-interactivity-doesnt-resize-column/56844/3 "2021-09-22T12:10:01Z")

</div>

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