adazzle
Column auto size not working on Firefox
Describe the bug
Auto size on Firefox does not work unless 'size' is defined
On Chrome column size is defined by cell content On Firefox column size is defined by Grid
Chrome
Firefox
react-data-grid uses auto as the default width. This looks like a bug in FF and not in react-data-grid.
@amanmahajan7 even if it is a browser bug, any ideas how to work around this? We're currently witnessing the same behavior. I've tried setting min-width: fit-content on the gridcell and column header and that actually seems to fix things on safari and firefox, but then it breaks on chrome.
Update:
Seemingly got this to work by setting min-width: min-content; on gridcell and columheader:
{
[role='gridcell'] {
min-width: min-content;
}
[role='columnheader'] {
min-width: min-content;
}
}
YMMV - I haven't tested this throughly, and it likely has the effect of disallowing a column from ever overflowing, which maybe won't work for all use cases. But for our specific use case of requiring that cell content never overflows it seems to work.
You can try using <DataGrid defaultColumnOptions={{ width: ''max-content' }} ...