How to make a datatable display which is dropdown driven in Plotly Dash app?

Viewed 27

I am trying to display the contents of a csv file in the form of a table in dash app. The file whose content is to be displayed will be selected by the user from a the dropdown. The dropdown is getting the files from a location which is again user given. Below is my code:-

import dash
from dash import dcc, Input, Output, html, dash_table
import plotly.express as px
import pandas as pd
import os
#import plotly
import plotly.graph_objects as go


# ======================== Dash App
app = dash.Dash(__name__)

# ======================== Getting input of directory and Latest filename
PATH = str(input("Enter Full file path"))  # Use your path

# Fetch all files in path
fileNames = os.listdir( PATH )

# Filter file name list for files ending with .csv
fileNames = [file for file in fileNames if '.csv' in file]

print(fileNames)



# ======================== App Layout

app.layout = html.Div([
       html.H1('Table Content', style={'text-align': 'center', 'background-color': '#ede9e8'}),
       html.Div([
            dcc.Dropdown(id='DropDown_FileName',
                options=[
                         {'label': i, 'value': i} for i in fileNames
                        ],
               # value=fileNames,
                placeholder='Select a File',
                multi=False,
                clearable=False
                ),
            ]),

       
        html.Div([
            dash_table.DataTable(id='tblData'),
        ]),
                      ])


@app.callback(
    [Output('tblData', 'data')],
    [Input('DropDown_FileName', 'value')]
)


def update_figure(DropDown_FileName):
    # ======================== Reading Selected csv file

        analytics = pd.read_csv( PATH + DropDown_FileName )
        analytics['Comb_wgt']=analytics.Samples*analytics.Average
        print(analytics)


    # ======================== Plotly Table

        tblData = dash_table.DataTable(
            data=analytics.to_dict('records'),
            columns=[{"name": i, "id": i} for i in (analytics.columns)],
            )

        return (tblData)




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

Using the above code, I am able to get the data on console(shared below), but the data table is not getting displayed. The main issue, I suppose is how I am calling the table component in the aap layout. I am using pycharm as IDE with all latest version of modules. Can someone please look into this. Thanks in advance.

DataTable(data=[{'A': 'Value', 'B': Value, 'C': Value, 'C': Value}, {'A': 'Value', 'B': Value, 'C': Value, 'D': Value}, .... so on.

1 Answers

I have tried this and got the desired table, a bit of change in your code would be to have a DIV element instead of a dash_table.DataTable. Then the return of your callback will be the table. I am assuming your analytics variable is a pandas data frame which is my same format.

import dash
from dash import dcc, Input, Output, html, dash_table
import plotly.express as px
import pandas as pd
import os
#import plotly
import plotly.graph_objects as go


# ======================== Dash App
app = dash.Dash(__name__)

# ======================== Getting input of directory and Latest filename
PATH = str(input("Enter Full file path"))  # Use your path

# Fetch all files in path
fileNames = os.listdir( PATH )

# Filter file name list for files ending with .csv
fileNames = [file for file in fileNames if '.csv' in file]

print(fileNames)



# ======================== App Layout

app.layout = html.Div([
       html.H1('Table Content', style={'text-align': 'center', 'background-color': '#ede9e8'}),
       html.Div([
            dcc.Dropdown(id='DropDown_FileName',
                options=[
                         {'label': i, 'value': i} for i in fileNames
                        ],
               # value=fileNames,
                placeholder='Select a File',
                multi=False,
                clearable=False
                ),
            ]),

       
        html.Div([
            id='tblData',
        ]),
                      ])


@app.callback(
    [Output('tblData', 'children')],
    [Input('DropDown_FileName', 'value')]
)


def update_figure(DropDown_FileName):
    # ======================== Reading Selected csv file

        analytics = pd.read_csv( PATH + DropDown_FileName )
        analytics['Comb_wgt']=analytics.Samples*analytics.Average
        print(analytics)


        return (dash_table.DataTable(
            data=analytics.to_dict('records'),
            columns=[{"name": i, "id": i} for i in (analytics.columns)],   
))




if __name__ == '__main__':
        app.run_server()
Related