Getting dash core components to work on dash.datatable

Dash Python
1

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

2

Hi @oldkingthor what is going wrong with the dropdowns? If you want some help debugging, please make your code standalone, that is using dummy data which you create in the script so that we can execute your app from the code you paste here.

Regarding the sorting behaviour, you need to set sort_action='native' in the table, custom means that you will define your own callback to specify how sorting should be done. (see https://dash.plot.ly/datatable/interactivity and https://dash.plot.ly/datatable/reference/).

3

@Emmanuelle updated my question to make the code standalone and to elaborate on the issue I am having re: the dropdown menus

4

Just to add a bit more context. I am trying to follow the tutorial offered here -> https://dash.plot.ly/datatable/callbacks for ’ Backend Paging with Multi Column Sorting’

The difference is that I want users to be able to filter the data shown based on the dropdown selections they make. So for example filter to only show males or females

5

I have also tried returning the datatable from my callback function, but when I run this code I cannot view my datatable at all.

I started off by created a div which would contain the datatable

html.Div(id='punch-stats')

and then defining my callback function that would my datatable based on selections made on my dropdown menus

type or pas@app.callback(
    dash.dependencies.Output('punch-stats','children'),
    [dash.dependencies.Input('weight_class','value'),
     dash.dependencies.Input('gender','value')])
def update_punchstats(weight_class,gender):
    if weight_class is None or weight_class == []:
        weight_class == WEIGHT_CLASS
    if gender is None or gender == []:
        gender == GENDER
    punchstats = [(punch_stats['division'].isin(weight_class))]
    punchstats = [(punchstats['sex'].isin(gender))]
    return html.Div([
        dash_table.DataTable(
            id='punchstats',
            columns=[{'name': i, 'id': i} for i in sorted(punch_stats.columns)],
            # data = punch_stats.to_dict('records'),
            data = punchstats.to_dict('records'),
            page_current=0,
            page_size=5,
            page_action='native',
            sort_action='native',
            column_selectable="single",
            row_selectable="single",
            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=[]),
    ])