Showing Tables in Dash

Hi, A newbie in Dash here, So I was trying to work on an app which takes user input and returns a dataframe in form of a table:
My UI kind of looks like this:

The table will appear in the Recommendations card body.

Below is the callback I created:

@app.callback(
[Output('view','children')],
[Input('dd_players','value'),
Input('feet_dd','value'),
Input('slider_age','value'),
Input('league_dd','value'),
Input('position_dd','value'),
Input('age_value','value'),
Input('radio', 'value')]

)
def getRecommendations(radio, dd_players, league_dd, feet_dd, position_dd, age_value,slider_age):
        
        if radio == 'Outfield Players':
            df, player_ID, engine = outfield_data
            df_res = df.iloc[:, [1, 3, 5, 6, 11, -1]].copy()
            
        else:
            df, player_ID, engine = gk_data
            df_res = df.iloc[:, [1, 3, 5, 6, 11]].copy()

        metric = engine[dd_players]
        df_res['Player'] = list(player_ID.keys())
        df_res.insert(1, 'Similarity', metric)
        df_res = df_res.sort_values(by=['Similarity'], ascending=False)
        metric = [str(num) + ' %' for num in df_res['Similarity']]
        df_res['Similarity'] = metric
        df_res = df_res.iloc[1:, :]

        
        if position_dd == 'Same position' and radio == 'Outfield Players':
            q_pos = list(df[df['Player']== dd_players.split(' (')[0]].Pos)[0]
            df_res = df_res[df_res['Pos']==q_pos]


        if league_dd=='All':
            pass
        else:
            df_res = df_res[df_res['Comp']==league]

        
       
        df_res = df_res[(df_res['Age'] >= age_value[0]) & (df_res['Age'] <= age_value[1])]
        

        if feet_dd=='All' or radio == 'GoalKeepers':
            pass
        elif feet_dd=='Automatic':
            query_foot = df['Foot'][player_ID[dd_players]]
            df_res = df_res[df_res['Foot']==query_foot]
        elif feet_dd=='Left':
            df_res = df_res[df_res['Foot']=='left']
        else:
            df_res = df_res[df_res['Foot']=='right']
        
        
        df_res = df_res.iloc[:slider_age, :].reset_index(drop=True)
        df_res.index = df_res.index + 1
        if len(df)==2040:
            mp90 = [str(round(num, 1)) for num in df_res['90s']]
            df_res['90s'] = mp90
        df_res.rename(columns={'Pos':'Position', 'Comp':'League'}, inplace=True)
        #return df_res
        return [dash_table.DataTable(
                    df_res.to_dict('records'), [{"name": i, "id": i} for i in df_res.columns], id = 'dataplayers') 
                    ]

My Input cards look like this:

## Tab 3 Cards
choose_type = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Player Type'),
                html.Br(),
                dcc.RadioItems(
                        id = 'radio',
                        options=['Outfield Players', 'GoalKeepers'],
                        value='Outfield Players',
                        inline=True
                        ),
   
            ]
        ),
    ],
    body=True,
    className="controls_players",
)

player_select = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Select a Player'),
                html.Br(),
                dbc.Col(
                    dcc.Dropdown(
                    id = 'dd_players',
                    options = [],
                    value = players[0])

                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)
foot_select = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Select Dominant Foot'),
                html.Br(),
                dbc.Col(
                    dcc.Dropdown(feet,value = feet[0],id = 'feet_dd')

                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)

n_results = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Number of results'),
                html.Br(),
                dbc.Col(
                    dcc.Slider(5, 10, 1, value=5, marks=None,
                     tooltip={"placement": "bottom", "always_visible": True},id = 'slider_results')
                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)
league = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Select League'),
                html.Br(),
                dbc.Col(
                    dcc.Dropdown(['All', 'Premier League', 'La Liga', 'Serie A', 'Bundesliga', 'Ligue 1'],'All',id='league_dd')

                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)

positions = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Comparison with'),
                html.Br(),
                dbc.Col(
                    dcc.Dropdown(['All positions', 'Same position'],value = 'All positions',id='position_dd')

                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)

age = dbc.Card(
    [
        dbc.FormGroup(
            [
                html.Label('Age Bracket'),
                html.Br(),
                dbc.Col(
                    dcc.RangeSlider(18, 40, 1, value=[18, 25],marks = None, tooltip={"placement": "bottom", "always_visible": True},
                                     id='age_value')
                   ),
                
            ]
        ),
    ],
    body=True,
    className="controls_players",
)

the engine file is a dictionary which has player information in the format :

{'Patrick van Aanholt (Crystal Palace)': array([100.  ,  54.87,  50.69, ...,  55.81,  33.49,  12.61]),
 'Yunis Abdelhamid (Reims)': array([ 56.64, 100.  ,  52.89, ...,  75.07,  17.28,   2.  ]),
 'Mehdi Abeid (Nantes)': array([ 52.62,  52.87, 100.  , ...,  66.67,  32.76,  21.18]),}

The error I keep getting is :

Traceback (most recent call last):
line 1398, in getRecommendations
metric = engine[dd_players]
KeyError: β€˜All’

Can someone tell me what I am doing wrong ?

Hello @Arsalan107,

This actually isnt a Dash issue, but an issue with what you are trying to do with your data.

But, I do think that your variables are misaligned in the function call. I am guessing this is the order the variables need to be in:

@app.callback(
[Output('view','children')],
[Input('dd_players','value'),
Input('feet_dd','value'),
Input('slider_age','value'),
Input('league_dd','value'),
Input('position_dd','value'),
Input('age_value','value'),
Input('radio', 'value')]

)
def getRecommendations(dd_players, feet_dd, slider_age, league_dd, position_dd, age_value, radio):