Plotly-Dash:- Multiple column filtering in plotly dash after file upload

Question

I would like to implement the multiple column filter in a data frame after uploading a excel or csv file and save the resultant data-frame. Below is the code. I have done the code for uploading the file and able to display it. I need to get filtering options and save the result data. Below is my current code

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

#HTML Layout

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


server = app.server
app.layout = html.Div([           
    html.Div([
   html.Center(
       dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select File')
        ]),
        style={
            'width': '20%',
            'height': '32px',
            'lineHeight': '32px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=True
    )),
    ]),
    html.Div(id='output-data-upload'),
    html.Br(),
    
    html.Br(),
    html.Div([
        html.Center(html.H6(id='my-output'))
        #html.Div(id='my-output'),
    ]),
   
    ]),
    
   
    
])

    
# Function for reading the data

def parse_data(contents, filename):
    content_type, content_string = contents.split(',')

    decoded = base64.b64decode(content_string)
    try:
        if 'csv' in filename:
            # Assume that the user uploaded a CSV or TXT file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')))
        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))
        elif 'txt' or 'tsv' in filename:
            # Assume that the user upl, delimiter = r'\s+'oaded an excel file
            df = pd.read_csv(
                io.StringIO(decoded.decode('utf-8')), delimiter = r'\s+')
    except Exception as e:
        print(e)
        return html.Div([
            'There was an error processing this file.'
        ])

    return df



            
#Call backs 

def generate_table(df_final):
    return dash_table.DataTable(data=df_final.to_dict('rows'),columns=[{'name': i, 'id': i} for i in df_final.columns],editable=True,
                                    virtualization=True,
                                    fixed_rows={'headers': True},
                                    page_current=0,
                                    page_size=5,
                                    style_table={ 'height':'350px','overflowY': 'auto'},
                                    style_cell_conditional=[{'if': {'column_id': c},'textAlign': 'left'} 
                                                           for c in ['Date', 'Region']],style_data_conditional=[{
                                       'if': {'row_index': 'odd'},'backgroundColor': 'rgb(248, 248, 248)'}],
                                    style_header={'backgroundColor': 'rgb(230, 230, 230)','fontFamily':'sans-serif',
                                                  'fontWeight': 'bold',"fontSize":'13px'},
                                    
                                    style_cell={'minWidth': 95, 'maxWidth': 95, 'width': 95}
                                   )

@app.callback(Output('output-data-upload','children'),
              [Input('upload-data', 'contents')],
              [State('upload-data', 'filename')]
    
)


#function for displaying the preview of the input file.

def display_table(contents,filename):
    if contents:
        contents = contents[0]
        filename= filename[0]
        df = parse_data(contents,filename)
        return html.Div([
            html.Center(html.H5('Preview')),
            html.Center(
                html.Div([
               
                    html.Div([
                        generate_table(df_final_1)
                    ])
                    ],style={'width':'85%'}
                )
        )])
    
@app.callback(Output('output-confirm','children'),
              [Input('submit-filter', 'n_clicks')]
    
)

def filter_button(n_clicks):
    if n_clicks:
        return 'Successful'
   
    

#Calling the server    

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

Answer 1

There are many questions lurking under the surface here, and far too much to cover in detail in a single answer. Very generally, what you'll want to do is using the values from the CSV to update something like a dropdown, or multi-dropdown, or other components to allow the user to make the filtering selections. That component (or those components) would then trigger a callback which also includes the data from the CSV, performs the filtering, and outputs it either to the Dash UI, or to whatever form of storage you're using (ex. local file system, SQL database, etc.).