You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First of all, good work with this component, I really like it.
I'm having an issue with something, that might be a more common use case.
For good readability in my Datatable, I want the cells to automatically adapt to the content width.
So instead of defining some arbitrary width in the headers prop, which could be to narrow or wide for unknown data, I just pass a css class to the table-class-name attribute with white-space: nowrap. white-space: nowrap forces the cell text to be single-lined, which leads the columns to adapt to the text width.
Just doing that works perfectly fine. The cells width expand exactly to the width that each cell text needs to be single-lined. If it's larger than the screen, I get the horizontal scrollbar. Nice.
When combining this css class with the fixed-columns feature, all columns widths are reduced so they all fit the screen. The content stays single-lined and overflows making it unreadable. Image below.
I think it's a pretty common use case to have the width automatically set to the content's length, like when using white-space: nowrap.
Is there a way make the fixed columns and white-space: nowrap combination work?
Or maybe better: the Datatable could add a prop auto-width which does it more reliably.
The text was updated successfully, but these errors were encountered:
First of all, good work with this component, I really like it.
I'm having an issue with something, that might be a more common use case.
For good readability in my Datatable, I want the cells to automatically adapt to the content width.
So instead of defining some arbitrary width in the headers prop, which could be to narrow or wide for unknown data, I just pass a css class to the
table-class-name
attribute withwhite-space: nowrap
.white-space: nowrap
forces the cell text to be single-lined, which leads the columns to adapt to the text width.Just doing that works perfectly fine. The cells width expand exactly to the width that each cell text needs to be single-lined. If it's larger than the screen, I get the horizontal scrollbar. Nice.
When combining this css class with the fixed-columns feature, all columns widths are reduced so they all fit the screen. The content stays single-lined and overflows making it unreadable. Image below.
I think it's a pretty common use case to have the width automatically set to the content's length, like when using
white-space: nowrap
.Is there a way make the
fixed columns
andwhite-space: nowrap
combination work?Or maybe better: the Datatable could add a prop
auto-width
which does it more reliably.The text was updated successfully, but these errors were encountered: