DataTable error when combined with dcc.Tabs

I’m getting an error when creating a DataTable in an app that uses tabs. I found a similar issue that was popping up when it was still dash_table_experiments and was able to get a solution to this problem from this community post. That said, I wasn’t certain if this is still a bug or not as it looked like this was resolved when dash_table got released and I haven’t been able to see any other issues come up for this.

You can reproduce with this minimal example:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd


app = dash.Dash(__name__)

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app.layout = html.Div([
    dcc.Tabs(
        id='tabs',
        children=[
            dcc.Tab(
                label='Tab one',
                children=[
                    dash_table.DataTable(
                    id='table',
                    columns=[{"name": i, "id": i} for i in df.columns],
                    data=df.to_dict("rows"),
                )

                ]
                
            ),
            dcc.Tab(
                label='Tab two',
                children=[
                    html.H1('This is tab two')  
                ]
            )
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True)

My fix was to create a dummy datatable on the second tab like so:

 dcc.Tab(
                label='Tab two',
                children=[
                    html.H1('This is tab two')  
                    html.Div(
                        dash_table.DataTable(data=[{}], columns=[]),
                        style={'display': 'none'})
                ]

Here are the console error messages I’m getting

Error on FF v66:

NotFoundError: Node was not found [e-mail]:12

Error on Chrome v73:

[e-mail]?v=0.21.0&m=1552054944:12 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Environment

dash                 0.40.0
dash-core-components 0.45.0
dash-html-components 0.15.0
dash-renderer        0.21.0
dash-table           3.6.0

[kevinfaust0308]

i get a different issue with me. i have a datatable in one tab and when i try to switch to another tab, i get the following error “An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like: …”

[jing0703]

The same error when returning list of dictionary: Error: An object was provided as children instead of a component, string, or number (or list of those). Check the children property that looks something like: { “Assets”: 90099071, “Internal Assets”: 0, “Revenue”: 1604313975, “Share Class Exception”: “Y” } at hu (dash_renderer.v1_6_0m1598285657.min.js:20) at a.value (dash_renderer.v1_6_0m1598285657.min.js:20) at a.value (dash_renderer.v1_6_0m1598285657.min.js:20) at Ie (react-dom@16.v1_6_0m1598285657.13.0.min.js:104) at rh (react-dom@16.v1_6_0m1598285657.13.0.min.js:103) at zj (react-dom@16.v1_6_0m1598285657.13.0.min.js:228) at Th (react-dom@16.v1_6_0m1598285657.13.0.min.js:152) at tj (react-dom@16.v1_6_0m1598285657.13.0.min.js:152) at Te (react-dom@16.v1_6_0m1598285657.13.0.min.js:146) at react-dom@16.v1_6_0m1598285657.13.0.min.js:61