Table content is not displaying in dash table but table is displayed

Dash Python
1

the code is give below:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pymysql
import dash_table
import pandas as pd

test1 = dash.Dash(‘name’)
colors = {
‘background’:’#FBD8AB’,
‘text’: ‘#000000’
}

test1.layout = html.Div(style={‘backgroundColor’:‘white’},
children=[html.Div(children =
html.Img(src=’/assets/image.png’,height=‘50’,width=‘100’),
),
html.H1(children=“DNA Uploading”,
style ={‘Align’:‘center’,
#‘border’:‘1px solid’,
‘display’:‘flex’,
‘justifyContent’:‘center’}
),
html.H4(dcc.Input(
id = ‘input-box’,
placeholder=‘Enter a path…’,
style ={‘Align’:‘center’,
‘border’:‘1px solid’,
‘width’:‘40%’,
‘height’:‘30px’
},
type=‘text’,
value=’’),
style=dict(display=‘flex’, justifyContent=‘center’)),
html.Div(html.Button(‘Submit’,id=‘button’,style ={‘Align’:‘center’,‘background’: ‘orange’}),
style={‘display’:‘flex’,
‘justifyContent’:‘center’}),
html.Div(id=‘output’,children=‘Enter the value and press submit’),
html.Div(id = ‘output-table’, style = {‘display’:‘flex’,
‘justifyContent’:‘center’,})
])

@test1.callback(
Output(‘output-table’,‘children’),
[Input(‘button’,‘n_clicks’)],
[State(‘input-box’,‘value’)])
def update_output(contents, value):
mydb= pymysql.connect(
host = “172.16.8.226”,
user = “root”,
passwd="",
database = “test”
)
mycursor= mydb.cursor()
val = (value)
sql = “UPDATE dna SET Input_path =’%s’ , started_status = 1 WHERE id =1”%(val)
try:
mycursor.execute(sql)
mydb.commit()
except:
mydb.rollback()
SQL_Query = pd.read_sql_query (“SELECT file_path, before_count, after_count FROM dna_uploading_count”,mydb)

df = pd.DataFrame(SQL_Query, columns=['file_path','before_count','after_count'])
columns=[{'name':'file_path','id':'1'},
                 {'name':'before_count','id':'1'},
                 {'name':'after_count','id':'1'}]
data=df.to_dict("rows")

return html.Div([
    dash_table.DataTable(
        id='table',
        columns = columns,
        data = data
        
        )
		])

if name == “main”:

test1.run_server(debug=True, host="10.10.92.13", port = 8000)
2

I believe your columns list needs to have id's that match your panda df columns. Code below shows data table…since I dind’t have access to your sql database, I created a dummy df.

Also, please use code blocks when posting code…it’s easier to read.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
# import pymysql
import dash_table
import pandas as pd

colors = {
    'background': '#FBD8AB',
    'text': '#000000'
}

test1 = dash.Dash(__name__)

test1.layout = html.Div(
    id='main',
    style={'backgroundColor': 'white'},
    children=[
        html.H1(
            id='title',
            children='DNA Uploading',
            style={'Align': 'center', 'display': 'flex', 'justifyContent': 'center'}
        ),
        html.H4(dcc.Input(
            id='input-box',
            placeholder='Enter a path…',
            style={'Align': 'center',
                   'border': '1px solid',
                   'width': '40%',
                   'height': '30px'
                   },
            type='text',
            value=''),
            style=dict(display='flex', justifyContent='center')),
        html.Div(html.Button('Submit', id='button', style={'Align': 'center', 'background': 'orange'}),
                 style={'display': 'flex',
                        'justifyContent': 'center'}),
        html.Div(id='output', children='Enter the value and press submit '),
        html.Div(id='output-table', children=[], style={'display': 'flex', 'justifyContent': 'center'})
    ])


@test1.callback(
    output=Output('output-table', 'children'),
    inputs=[Input('button', 'n_clicks')],
    state=[State('input-box', 'value')])
def update_output(contents, value):
    # df = pd.DataFrame(SQL_Query, columns=['file_path', 'before_count', 'after_count'])
    df = pd.DataFrame({'file_path': [2, 4, 8, 0],
                       'before_count': [2, 0, 0, 0],
                       'after_count': [10, 2, 1, 8]})

    return dash_table.DataTable(
        id='table',
        columns=[{'name': 'file_path', 'id': 'file_path'},
                 {'name': 'before_count', 'id': 'before_count'},
                 {'name': 'after_count', 'id': 'after_count'}],
        # columns=[{'name': 'file_path', 'id': '1'},
        #          {'name': 'before_count', 'id': '2'},
        #          {'name': 'after_count', 'id': '3'}],
        data=df.to_dict('rows'),
        style_cell={
            'textAlign': 'center',
            'color': 'black',
            'fontSize': 14,
            'fontFamily': 'sans-serif',
        },
    )


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

Thank you so much it worked :smiley::smiley::smiley: