Column width does not fit to text after making columns 'hideable'

Dash Python
1

Hi there,

After I make columns hideable in the dash_table, the column width doesn’t adjust to text:

columns = [{'name': i,
            'id': i,
            'hideable': True
            } for i in df.columns]

text_hidden
text_hidden1017×562 12.5 KB

As you see, the column borders are curtailing my headers on top.

But if I remove the hideable, they are okay:

columns = [{'name': i,
            'id': i,
            } for i in df.columns]

text_not_hidden
text_not_hidden893×594 7.3 KB

Is this normal or do we have a fix for the former?

2

Hi @tbillah
can you share the code and data with us, so we can try this out on our computer?

3

Hi @adamschroeder,

The work is open source, please use: https://github.com/pnlbwh/freesurfer-analysis/blob/master/scripts/summary-table.py

For data, please download https://drive.google.com/open?id=1F-SySDKPOCEjc8GjkCkC02pitItdimta in the same folder of summary-table.py.

By the way, I think column width is calculated without considering ‘hide’, ‘sort’, or ‘delete’ icons. If I start adding one or more, the text gets trimmed as I have reported. You can try commenting out:

'hideable': True
filter_action='native',
sort_action='native',

and notice the change.

4

Also, can you check why there are repeating decimals in the dash_table?
I just updated my csv file and that has up to 4 decimal points only. But some of the cells miraculously seem to have obtained repeating decimals:

image

5

Hi @tbillah,
I sent you a private message regarding column width because I’m not sure if that’s possible with Dash DataTable.

6

This looks like a bug. I reported this here - Expand column width to account for icons · Issue #730 · plotly/dash-table · GitHub

7

Thank you for your sincere effort.

In other note, did either of you get a chance to look into the ‘miraculous’ repeating decimal?

8

that looks just like the way the data is being converted or read, an “issue” with floating point numbers. you can either preprocess the data to round the numbers before presentation or you can use the numeric formatting options in Typing and User Input Processing | Dash for Python Documentation | Plotly

9

Thanks @chriddyp, inclusion of type and format solved the problem:

columns = [{'name': i,
            'id': i,
            'hideable': True,
            'type': 'numeric',
            'format': Format(precision=4),
            } for i in df.columns],

:slight_smile:
P.S. I wish I could let you know earlier … maxed out my replies yesterday :confused:

1 Like
10

Hello again @chriddyp and @adamschroeder ,

I may have found a way around:

style_cell={'whiteSpace': 'pre-wrap'}

Including the above solved the problem:

trimming_solved
trimming_solved780×322 11.1 KB

1 Like
11

Wonderful news. This is very helpful. Thank you for sharing, @tbillah

1 Like
12

Actually, I realized that the way around I found is not consistent. Here is another data for which line breaks arbitrarily:

image

But at least I get to see the untrimmed header, some improvement over the original issue I originally reported.