Datatable add list of data in real time

Dash Python
1

Hello,

I’m working in a DataTable with Dash, where I refresh a callback function every 1 sec and return data for Data table row.
I would like to add data into the datatable from Kafka not from a static csv.

I have this piece of code for testing the return data format:

COLS = ['Time', 'Price', 'Vol']

app.layout = html.Div([
    dcc.Interval(
        id='refresh',
        interval=1*1000,  # in milliseconds
        n_intervals=0
    ),
    dt.DataTable(
        id='adding-rows-table',
        columns=[{'name': c, 'id': c} for c in COLS],
        data=[]
    )
])

@app.callback(Output('adding-rows-table', 'data'),
              [Input('refresh', 'n_intervals')])
def update_output():
    rows = [datetime.now(), 2, 34]
    return html.Pre(
        json.dumps(rows, indent=2)
    )

but when I run the server I received this error:
Warning: Each child in a list should have a unique “key” prop.
Check the render method of FrontEndErrorContainer. See https://fb.me/react-warning-keys for more information.

I tried using dataframes and csv files, but the error is the same.

What can I do and how I can return the correct data format wihout using csvs?.

Many thanks and regards,
Alba S

2

hi, I have a very similar problem and do not know, how to solve it. I return data via simple API GET request. I get the same error as you, but in the browser console. So my solution works, but with red warning in the console, which is not ideal.

Code:

from typing import Any, Dict, List

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_table

from dash.dependencies import Input, Output

from src.api import get_all_countries_data

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

cell_style_cond: List[Any] = [{"if": {"column_id": "country"}, "textAlign": "left"}]

data_style_cond: List[Any] = [

    {"if": {"row_index": "odd"}, "backgroundColor": "rgb(248, 248, 248)",},

    {

        "if": {"filter_query": '{country} eq "Czechia"'},

        "backgroundColor": "#3D9970",

        "color": "white",

    },

]

cell_style: List[Any] = {"textAlign": "center"}

header_style: Dict[str, str] = {

    "backgroundColor": "rgb(230, 230, 230)",

    "fontWeight": "bold",

    "textAlign": "center",

}

app: Any = dash.Dash(__name__, external_stylesheets=external_stylesheets)

def get_data_table() -> Any:

    data: Any = get_all_countries_data()

    return dash_table.DataTable(

        id="table",

        columns=[{"name": i, "id": i} for i in data.columns],

        data=data.to_dict("records"),

        filter_action="native",

        sort_action="native",

        column_selectable="multi",

        style_cell=cell_style,

        style_cell_conditional=cell_style_cond,

        style_data_conditional=data_style_cond,

        style_header=header_style,

    )

app.layout = html.Div(

    id="mainWrapper",

    children=[

        html.Div(id="tableWrapper", children=[get_data_table()],),

        html.Div(

            id="helperWrapper",

            children=[

                dcc.Interval(

                    id="interval-component", interval=(10 * 60 * 1000), n_intervals=0

                )

            ],

        ),

    ],

)

@app.callback(

    Output("tableWrapper", "children"), [Input("interval-component", "n_intervals")]

)

def update_data(n: int) -> Any:

    return get_data_table()

Error in the browser console:

react-dom@16.v1_2_2m1584426988.8.6.js:500 Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in th (created by t)
    in tr (created by t)
    in tbody (created by t)
    in table (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by t)
    in t (created by t)
    in Suspense (created by t)
    in t (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by Connect(UnconnectedComponentErrorBoundary))
    in Connect(UnconnectedComponentErrorBoundary) (created by TreeContainer)
    in TreeContainer (created by Connect(TreeContainer))
    in Connect(TreeContainer) (created by TreeContainer)
    in div (created by u)
    in u (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by Connect(UnconnectedComponentErrorBoundary))
    in Connect(UnconnectedComponentErrorBoundary) (created by TreeContainer)
    in TreeContainer (created by Connect(TreeContainer))
    in Connect(TreeContainer) (created by TreeContainer)
    in div (created by u)
    in u (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by Connect(UnconnectedComponentErrorBoundary))
    in Connect(UnconnectedComponentErrorBoundary) (created by TreeContainer)
    in TreeContainer (created by Connect(TreeContainer))
    in Connect(TreeContainer) (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by Connect(UnconnectedGlobalErrorContainer))
    in Connect(UnconnectedGlobalErrorContainer) (created by UnconnectedContainer)
    in UnconnectedContainer (created by Connect(UnconnectedContainer))
    in Connect(UnconnectedContainer) (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by Connect(UnconnectedAppContainer))
    in Connect(UnconnectedAppContainer) (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

Any help or advice would be greatly appreciated.

Cheers

Radek

3

Update:

And of course, few minutes, after I sent my post, I figured it out:

DataTable will be created and inserted into the layout by the callback itself first time the app starts and then is refreshed once the interval passes.

So the app.layout must look like this:

app.layout = html.Div(

    id="mainWrapper",

    children=[

        html.Div(id="tableWrapper", children=[],),

        html.Div(

            id="helperWrapper",

            children=[

                dcc.Interval(

                    id="interval-component", interval=(60 * 10 * 1000), n_intervals=0

                )

            ],

        ),

    ],

)