Show all data after clearing all select (dropdown) value

Dash Python
1

I’m trying to use dmc.Select to return dag.AgGrid but I’m facing with a problem that after clearing all value of dmc.Select dag.AgGrid became blank. My goal is if cleared all the value from dcc.Select, it will return all the data to dag.AgGrid. Below is my sample code:

import pandas as pd
import numpy as np
import dash
from datetime import datetime as dt
import plotly.express as px
from dash import Input, Output, State, dcc, html
import dash_mantine_components as dmc
import dash_ag_grid as dag

url = 'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
df = pd.read_csv(url)

app = dash.Dash(__name__)


########################################################################################################################
app.layout = dmc.MantineProvider([
        html.Div([
            dmc.Grid([
                dmc.Col([
                    dmc.Select(id='dropdown_1',
                                    description='continent',
                                    data = [{'label':x, 'value':x} for x in df['continent'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.Select(id='dropdown_2',
                                    description='country',
                                    data = [{'label':x, 'value':x} for x in df['country'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.Button('Submit', color='gray', id='btn')
                ], span='auto'),
            ], align='center'),
            html.Hr(),
            dmc.Grid([
                dmc.Col([
                    dmc.LoadingOverlay([html.Div(id='table_container')], loaderProps={'variant':"dots"})
                ], span='auto')
            ], align='center')
        ])
], id='themeHolder',
    theme={'colorScheme': 'light'},
    withNormalizeCSS=True,
    withGlobalStyles=True,
    withCSSVariables=True)

@app.callback(Output('table_container', 'children'),
              Input('btn', 'n_clicks'),
              State('dropdown_1', 'value'), 
              State('dropdown_2', 'value'), prevent_initial_call=True)

def update_table(n_clicks, dropdown_1, dropdown_2):
    if n_clicks > 0:
        data = df.copy()
        if dropdown_1 != []:
            data = data[data['continent'] == dropdown_1]
        if dropdown_2 != []:
            data = data[data['country'] == dropdown_2]        
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        
        return html.Div([dag.AgGrid(
            id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    else:
        data = df.copy()
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        return html.Div([dag.AgGrid(
        id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    
if __name__ == '__main__':
    app.run_server(debug=False, port=1200)

With dmc.MultiSelect it worked as my expectation, but I don’t want to select multiple choice. Below is code with dmc.MultiSelect:

import pandas as pd
import numpy as np
import dash
from datetime import datetime as dt
import plotly.express as px
from dash import Input, Output, State, dcc, html
import dash_mantine_components as dmc
import dash_ag_grid as dag

url = 'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
df = pd.read_csv(url)

app = dash.Dash(__name__)


########################################################################################################################
app.layout = dmc.MantineProvider([
        html.Div([
            dmc.Grid([
                dmc.Col([
                    dmc.MultiSelect(id='dropdown_1',
                                    description='continent',
                                    data = [{'label':x, 'value':x} for x in df['continent'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.MultiSelect(id='dropdown_2',
                                    description='country',
                                    data = [{'label':x, 'value':x} for x in df['country'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.Button('Submit', color='gray', id='btn')
                ], span='auto'),
            ], align='center'),
            html.Hr(),
            dmc.Grid([
                dmc.Col([
                    dmc.LoadingOverlay([html.Div(id='table_container')], loaderProps={'variant':"dots"})
                ], span='auto')
            ], align='center')
        ])
], id='themeHolder',
    theme={'colorScheme': 'light'},
    withNormalizeCSS=True,
    withGlobalStyles=True,
    withCSSVariables=True)

@app.callback(Output('table_container', 'children'),
              Input('btn', 'n_clicks'),
              State('dropdown_1', 'value'), 
              State('dropdown_2', 'value'), prevent_initial_call=True)

def update_table(n_clicks, dropdown_1, dropdown_2):
    if n_clicks > 0:
        data = df.copy()
        if dropdown_1 != []:
            data = data[data['continent'].isin(dropdown_1)]
        if dropdown_2 != []:
            data = data[data['country'].isin(dropdown_2)]        
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        
        return html.Div([dag.AgGrid(
            id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    else:
        data = df.copy()
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        return html.Div([dag.AgGrid(
        id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    
if __name__ == '__main__':
    app.run_server(debug=False, port=1200)

Please give me suggestions. Thank you.

2

Hello @hoatran,

I think you should only be doing it as:

if list:
    df = filtered
1 Like
3

Hi @jinnyzor I’m not sure to understand you suggestion. Can you give me more detail?

4

Try like this:


import pandas as pd
import numpy as np
import dash
from datetime import datetime as dt
import plotly.express as px
from dash import Input, Output, State, dcc, html
import dash_mantine_components as dmc
import dash_ag_grid as dag

url = 'https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv'
df = pd.read_csv(url)

app = dash.Dash(__name__)


########################################################################################################################
app.layout = dmc.MantineProvider([
        html.Div([
            dmc.Grid([
                dmc.Col([
                    dmc.MultiSelect(id='dropdown_1',
                                    description='continent',
                                    data = [{'label':x, 'value':x} for x in df['continent'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.MultiSelect(id='dropdown_2',
                                    description='country',
                                    data = [{'label':x, 'value':x} for x in df['country'].unique()],
                                    placeholder = 'Please select continent',
                                    value = [], clearable=True)
                ], span='auto'),
                dmc.Col([
                    dmc.Button('Submit', color='gray', id='btn')
                ], span='auto'),
            ], align='center'),
            html.Hr(),
            dmc.Grid([
                dmc.Col([
                    dmc.LoadingOverlay([html.Div(id='table_container')], loaderProps={'variant':"dots"})
                ], span='auto')
            ], align='center')
        ])
], id='themeHolder',
    theme={'colorScheme': 'light'},
    withNormalizeCSS=True,
    withGlobalStyles=True,
    withCSSVariables=True)

@app.callback(Output('table_container', 'children'),
              Input('btn', 'n_clicks'),
              State('dropdown_1', 'value'), 
              State('dropdown_2', 'value'), prevent_initial_call=True)

def update_table(n_clicks, dropdown_1, dropdown_2):
    if n_clicks > 0:
        data = df.copy()
        if dropdown_1:
            data = data[data['continent'].isin(dropdown_1)]
        if dropdown_2:
            data = data[data['country'].isin(dropdown_2)]        
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        
        return html.Div([dag.AgGrid(
            id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    else:
        data = df.copy()
        df3 = pd.pivot_table(data, values='gdpPercap', index=['year','country'], aggfunc = np.sum).reset_index()
        return html.Div([dag.AgGrid(
        id='table_container_1311', 
            columnDefs=[{'field':x, 'label': x} for x in df3.columns],
            rowData=df3.to_dict(orient='records'),
            defaultColDef={"resizable": True,
                       "sortable": True,
                       "filter": True,
                       'wrapHeaderText': True,
                       'autoHeaderHeight': True},
        dashGridOptions={"pagination": True, "paginationPageSize": 14, 'domLayout': "autoHeight"},
        columnSize='autoSize',
        csvExportParams={'fileName': 'data_' + '.csv'},
        className='ag-theme-alpine',
        style={'height': 'auto'})])
    
    
if __name__ == '__main__':
    app.run_server(debug=False, port=1200)
2 Likes
5

Thank you for that, I will notice that.

1 Like