[BUG] Maximum call stack size exceeded when using dash_table.DataTable with flex

[hgminh95]

Environment

dash                 2.0.0
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

- OS: Ubuntu 20.04
- Browser: Chrome
- Version 93

Describe the bug

I have a dash page with a dash_table.DataTable component. The layout looks like this

html.Div style={display='flex'}
  html.Div style={flex=2}
    dash_table.DataTable
  html.Div style={flex=1}
    "some other content"

When I load the webpage, the browser hangs. Here is the stacktrace in JS:

error.js:38 RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (<anonymous>)
    at String.replace (<anonymous>)
    at lx.trim ([email protected]_0_0m1632404132.12.1.min.js:1)
    at parseInt ([email protected]_0_0m1632404132.12.1.min.js:1)
    at s.handleResize (index.tsx:292)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)
    at s.handleResize (index.tsx:298)

It only happens when number of rows in page is small and table height does not exceed the 100vh. If number of rows are big, then there is no issue.

I am trying to replicate this with a minimal example. Will update here later.

Expected behavior

Above error should not happen.

[jacquelinegarrahan]

I have also encountered this issue with dash-table 5.0.0.

[bohnpessatti]

I've faced I similar issue when simply trying to set style = {'display': 'none'} for a html.Div that contained a dash_table, it's almost like the presence of the table disabled a proper parent div display configuration. For my particular problem, setting style_header: {'display': 'none'} for the dash_table solved it.

[mepearson]

Did anyone figure out the solution to this?

I am hitting this when I try to put content into tabs. If the dash_tables are rendered directly on the main page, everything is fine. But if I separate the tables and put them into tabs, I get this error and the table in the 1st tab renders but the 2nd does not.

[DnL888]

I had a similar issue. I set a dbc.Card with style = {'display': 'none'} as default and have a button to show the multiple dash_table elements inside it, changing the card style to style = {'display': 'block'}. The workaround I found for this was to use style = {'visibility': 'hidden'} and style = {'visibility': 'visible'}. Using this hides the contents of the Card / Div but keep the space on the page reserved for the element. Not really the exact same thing, but it does the job in my case.