Getting dash core components to work on dash.datatable

@oldkingthor wrote:

I actually have two problems.
1.) I cannot seem to be able to sorting to work on my datatable. I want users to be able to sort data in my table if they click the up and down arrow in each column
2.) I have 2 dropdown menus. I want to filter the contents in my datatable according to the options selected in the dropdown menu. So for example if someone selects male under the gender dropdown I only want to show data pertaining to males in my datatable.

This is the code I have written:

path_five = 'https://raw.githubusercontent.com/EmmS21/SpringboardCapstoneBoxingPredictionWebApp/master/boxingdata/punchingstats.csv'
punch_stats = pd.read_csv(path_five)
app.layout = html.Div(children=[
    html.H1(children="Emmanuel's boxing dashboard", style={
        'textAlign': 'left',
        'color':colors['text'],
        'height': '10'
    }),
 dcc.Dropdown(
        id='weight_class',
        options=[{'label': i, 'value': i} for i in data['division'].unique()],
        multi=True
    ),
    dcc.Dropdown(
        id='gender',
        options=[{'label': i, 'value':i} for i in fight_outcomes['sex'].unique()],
        multi=True
    ),
 html.Div([
        dash_table.DataTable(
            id='punchstats',
            columns=[{'name': i, 'id': i} for i in punch_stats.columns],
            data = punch_stats.to_dict('records'),
            # data=[{}],
            page_current=0,
            page_size=2,
            page_action='custom',
            sort_action='custom',
            sort_mode='multi',
            style_table={'overflowX':'scroll',
                         'maxHeight':'300px'},
            style_header={'backgroundColor':'rgb(30, 30, 30)'},
            style_cell={'backgroundColor':'rgb(50,50,50)',
                        'color':'white'},
            sort_by=[]),
    ])
])
@app.callback(
    dash.dependencies.Output('punchstats','data'),
    [dash.dependencies.Input('punchstats','page_current'),
     dash.dependencies.Input('punchstats','page_size'),
     dash.dependencies.Input('punchstats','sort_by'),
     dash.dependencies.Input('weight_class','value'),
     dash.dependencies.Input('gender','value')])
def update_punchstats(page_current,page_size,sort_by,weight_class,gender):
    if weight_class is None or weight_class == []:
        weight_class == WEIGHT_CLASS
    if gender is None or gender == []:
        gender == GENDER
    punchstatsdf = [(punch_stats['division'].isin(weight_class))]
    punchstatsdf = [(punchstatsdf['sex'].isin(gender))]
    print(sort_by)
    if len(sort_by):
        sorted_df = punchstatsdf.sort_values(
            [cols['column_id'] for cols in sort_by],
            ascending=[
                cols['direction'] == 'asc'
                for col in sort_by
            ],
            inplace=False
        )
    else:
        sorted_df = punchstatsdf
    return sorted_df.iloc[page_current*page_size:(page_current+ 1)*page_size].to_dict('records')

The problem is the dropdown menu doesn’t work on the datatable (they work on other tables and graphs I have), nor does the sort by action

Posts: 3

Participants: 2

Read full topic