Table is broken when 'display: none'

[jungpaeng]

Describe the bug

If display: none is processed and released, the layout of the table is broken.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/toast-grid-test-forked-dbbkt6?file=/src/App.js
2. Click on 'Toggle' Button
3. See error

Expected behavior

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 110

[jungpaeng]

Using content-visibility hidden works fine, but is this for the best?

[ryukato]

I also have same issue with initializing the grid on an element, which is not display (display: none;).

Note

I need to use bootstrap tab, and basically one tab is on, but the other is off(display:none;)

So I initialize the grid first, and then hide the element like below.

const grid = new tui.Grid({
...
});

// hide element using jQuery
$('#tab2').hide();