📣 New Documention on Setting DataTable & Column Widths & Heights

Dash Python
1

:wave: Hello Dash Community! We just shipped two new chapters of extensive DataTable documentation:

We took good care to document all of the known limitations with these methods. Some of these limitations will be solved in future versions of Dash, but until then we wanted to save you some time debugging by being upfront with recommended workarounds.

Take a read and let us know what you think! If there are any examples missing, you can comment or edit the files on GitHub and open a pull request.

At time of writing, the following examples are included in the DataTable Width & Column Width chapter:

  • Default Width
  • Wrapping onto Multiple Lines
  • Denser Multi-Line Cells with Line-Height
  • Wrapping onto Multiple Lines while Constraining the Height of Cells
  • Overflowing Into Ellipses
  • Ellipses & Tooltips
  • Horizontal Scroll
  • Horizontal Scroll with Fixed-Width Columns & Cell Wrapping
  • Horizontal Scroll with Fixed-Width & Ellipses
  • Horizontal Scrolling via Fixed Columns
  • Setting Column Widths
  • Percentage Based Widths
  • Percentage Based Widths and table-layout: fixed
  • Individual Column Widths with Pixels
  • Overriding a Single Column’s Width
    image
    image1057×1163 172 KB

And the following examples are included in the DataTable Height chapter:

  • Setting Table Height with Pagination
  • Setting Table Height with Vertical Scroll
  • Vertical Scroll With Pagination
  • Vertical Scroll With Fixed Headers
  • Vertical Scroll with Virtualization
    image
    image1260×1137 204 KB

Stay safe & healthy out there –

2 Likes
3

Thanks for this interactive design.

Looking into 2 things and unable to get best option :

  1. My data is long text but has no space, therefore its not getting split into multi lines. Column width is getting adjusted to data length.
  2. If i fix the column width, i cannot see the full test in that column. Not even by adding the tooltip feature. As it doesn’t shows the full text within the tooltip box.

Is there a way

  • Either i can split the text in multiple lines even without text having space.
  • Or column width is re-sizable for better view.

Please suggest.

Thanks allot.

4

Try applying the css style wordBreak: break-all. that should break your long strings into multiple lines, even if there isn’t a space.

5

@chriddyp, Thanks for your response .
I will try this property as you mentioned. And will update if i am successful.
And apologies as i am poor with css properties. Let me try.

Thanks.

1 Like
6

Thanks. It worked. :slight_smile:

1 Like