Slickgrid Table folds to the minimum size if option to keep the column size by content value is turn on

[bk201-]

1. Set these options for Slickgrid table:

    autoFitColumnsOnFirstLoad: false, // Was true
    enableAutoSizeColumns: false, // Was true
   
    autosizeColumnsByCellContentOnFirstLoad: true, // Was false
    enableAutoResizeColumnsByCellContent: true, // Was false
   

2. Go to table view. Some content of columns is still not fit to column size
   

3. If click to the table tab again, the table will fold to minimum size
   

[ghiscoding]

hey guys, I'm the maintainer of Slickgrid-React, this issue is probably caused by the fact that SlickGrid doesn't play nice with grid resizing when the div is hidden (display: none). I would say that you probably have 2 options to fix this issue with couple lines of code.

1. call reactGrid?.resizerService.resizeColumnsByCellContent(true); to resize by content when navigating back to the tab
2. or simply don't use display: none but rather visibility: hidden; or opacity: 0
   • but why? Because a div with display none doesn't have any real sizes, all its width become 0 and it doesn't take DOM space and SlickGrid can't do any of its resizing calculation properly when that happens. However using visibility/opacity will still take full height/width, it's just invisible and SlickGrid works correctly with that approach because all column elements have real widths

Both of these 2 approaches have downside (1. won't retain previous size, 2. will always be rendered in the DOM), so just go with what works best for you.

cc @tnaum-ms