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.
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-nameattribute withwhite-space: nowrap.white-space: nowrapforces 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 columnsandwhite-space: nowrapcombination work? Or maybe better: the Datatable could add a propauto-widthwhich does it more reliably.