Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed columns don't work with css-forced single line cells #345

Open
n14s opened this issue Jan 8, 2024 · 0 comments
Open

Fixed columns don't work with css-forced single line cells #345

n14s opened this issue Jan 8, 2024 · 0 comments

Comments

@n14s
Copy link

n14s commented Jan 8, 2024

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.

image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant