Dynamic update dbc Table

Dash Python
1

:wave: Hello, I´m new here but I have been reading topics for a time.
I’m trying to create a dash app with a datatable that have to been updating data every 5 seconds… So I’m making this code for connect to SQl Server, fetch some data and show data in a table, I’m using dbc.Table for this.

When I Run the app the server start… But I have this error:

Property “data” was used with component ID:

  • “raw_data”*
    in one of the Output items of a callback.
    This ID is assigned to a dash_bootstrap_components.Table component
    in the layout, which does not support this property.
    This ID was used in the callback(s) for Output(s):
  • raw_data.data*

This is my code, Sorry, it´s too large.

import dash
import dash_core_components as dcc
import dash_html_components as html
from random import random
import plotly
import plotly.express as px
import pandas as pd
import numpy as np
from datetime import datetime
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
pd.set_option('display.max_rows',None)
import pyodbc 
import dash_table
global data

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.MINTY, 'https://use.fontawesome.com/releases/v5.9.0/css/all.css'])

server = '10.20.*.*' 
database = 'H*****' 
username = '**' 
password = '**' 
conn = pyodbc.connect('DRIVER={SQL Server};SERVER='+server+';DATABASE='+database+';UID='+username+';PWD='+ password)

def connectSQLServer(conn):
    connSQLServer = conn
    return connSQLServer

df = pd.read_sql('''
                        #query
                ''',conn)
     
data = df.apply(lambda x: x.str.strip() 
                        if x.dtype == "object" else x)  # Trim whitespaces

count_row = data.shape[0]

datatable = dbc.Table.from_dataframe(data, id='raw_data',
                             striped=True, bordered=True, hover=True)

badge = dbc.Button(
    ["Total:", dbc.Badge(count_row, color="secondary", className="ml-1")],
    color="primary",style={'position':'absolute'}
)

navbar = dbc.Navbar(
    [
        html.A(
            dbc.Row(
                [
                    dbc.Col(html.Img(src=app.get_asset_url('logo.png'), height="65px")),
                    dbc.Col(dbc.NavbarBrand("****", className="ml-4", style={
                            'position': 'relative',
                            'left': '50%',
                            'transform': 'translateX(-50%)',
                            }
                            )
                    ),
                ],
                align="center",
                no_gutters=True,
            ),
            href="#",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
    ],
    color="primary",
    dark=True,
)

footer = dbc.Container(
    dbc.Row(
        dbc.Col(
            html.P(
                [
                    html.Span('***', className='mr-2'), 
                    html.A(html.I(className='fas fa-envelope-square mr-1'), href='mailto:<***>@<***>.com'),
                ], 
                className='lead'
            )
        )
    )
)


app.layout = html.Div([navbar,
                       datatable,
                       dcc.Interval(id='interval_component',
                                    interval=5000,
                                    n_intervals=0
                                    ),
                        badge,
                        html.Hr(),
                        footer,
                       ])


@app.callback(Output('raw_data', 'data'), [Input('interval_component', 'n_intervals')])
def update_table(n_intervals):

    dataSQL = []  # set an empty list
    global data
    sql_conn = connectSQLServer(conn)
    cursor = sql_conn.cursor()
    cursor.execute('''
                        #Query
                ''')

    rows = cursor.fetchall()
    for row in rows:
        dataSQL.append(list(row))
        labels = ['Id type', 'id', 'Name', 'Enter date', 'Hour', 'Exit date', 'Description', 'Dx', 'Op']
        data = pd.DataFrame.from_records(dataSQL, columns=labels)
        data = data.to_dict('records')
        return {'data': [data]}


if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port = 8050)
    app.config.suppress_callback_exceptions = True # see https://dash.plot.ly/urls

I´m also need ideas for avoid to declare my query 2 times… :sweat_smile: I’m newbie…
Thanks in advance.

2

I think you are confusing bootstrap tables with Dash DataTable. Bootstrap tables do not have data properties, hence the error. Here is a link to doc.Table. Scroll all the way to the bottom to see the available properties.

1 Like