app_sizing width examples in Dash Table#121
Conversation
|
adding @Marc-Andre-Rivet as well for review |
| 'selector': '.dash-spreadsheet', | ||
| 'rule': 'height: 300px; overflow: scroll;' | ||
| }] | ||
| ), |
There was a problem hiding this comment.
I'm seeing a double scroll bar here:
| 'selector': '.dash-cell', | ||
| 'rule': 'padding-left: 10px;' | ||
| }] | ||
| ), |
There was a problem hiding this comment.
In the default HTML style, the cells expand to their content:
In the dash-table, we have fixed width columns. Could we add an example where the cell's width expands to the content? We might want to make that the default. Here's how it looks now:
There was a problem hiding this comment.
That would be problematic with fixed rows.. as it stands right now
There was a problem hiding this comment.
That would be problematic with fixed rows.. as it stands right now
As I've mentioned before, I want us consider the case where we don't have fixed rows right now. I'm OK with fixed rows vs not fixed rows having different limitations.
There was a problem hiding this comment.
#130 will provide support for default cell width
| section_title("Dash Table - Widths that are smaller than the content"), | ||
| # ... | ||
| section_title("Dash Table - Content with Ellipses"), | ||
| section_title("Dash Table - Content with Ellipses [Not Working]"), |
There was a problem hiding this comment.
@Marc-Andre-Rivet can you review all of these "[Not Working]" examples?
| 'selector': '.dash-spreadsheet', | ||
| 'rule': 'max-height: 300px; overflow: scroll;' | ||
| }] | ||
| ), |
There was a problem hiding this comment.
The purpose of this example was to show that the table container wouldn't expand past its max height. In the HTML example, it was demonstrated by using 3 rows of data but setting the max height to something much larger:
So, could we update this example to use df (3 rows) instead of df_long?
| # ... | ||
| dash_table.Table( | ||
| id="dt-vert-scroll", | ||
| dataframe=df_long.to_dict("rows"), |
There was a problem hiding this comment.
similarly here (use df instead of df_long to demonstrate how setting a height works with short content)
|
@chriddyp @valentijnnieman PR #129 should take care of the width % scenarios in master To activate correct % behavior you will need to add You still need to set a width for .dash-spreadsheet as before. |
|
@chriddyp @valentijnnieman With paging/filtering/sorting there is no perfect way to "fit to content" for columns. One middle ground approach would be to use the initial df/viewport to analyze to figure out what the columns width should be and then fix the columns width for the table -- some mechanism to unlock/refresh could be put in place -- but it's not easy to have a fully "fit to content" table as the inputs don't play nice and force the column width to change if there's nothing forcing the width. Some basic version of this could be put in place in develop once the refactor PR goes through. |
|
Upate on all this, #130 will provide support for "fit content" / default width for all scenarios (no fixed, rows, columns, both) -- behavior as of 130 will be to match current table content, that means the cell widths will automatically update as the content changes. We can always revisit later for more refined behaviors. This review has not been forgotten. |
|
Should we close this in preference for #130 ? |
|
I think so. I can fill in for the missing examples after dev gets merged into master (#133) |
3 participants
Hey, here's a first stab at examples of setting widths in Dash Table. Not all of them work, I'm not sure if it's because something isn't working or if it's because I didn't do it the right way / didn't use the right prop, so let me know! I took the liberty of adding the examples from #116 so I could move quickly on that, sorry if that's causing issues somehow. The last example,
Dash Table - Alignmentisn't there because I wasn't sure what that should be.Closes #114