# Getting dash core components to work on dash.datatable

**URL:** <https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304>\
**Category:** Dash Python\
**Created:** [December 7, 2019, 10:57pm UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304 "2019-12-07T22:57:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![oldkingthor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oldkingthor/32/8713_2.png) [@oldkingthor](https://community.plotly.com/u/oldkingthor)\
**Post date:** [December 7, 2019, 10:57pm UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304/1 "2019-12-07T22:57:56Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [December 8, 2019, 3:17am UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304/2 "2019-12-08T03:17:17Z")

</div>

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](https://dash.plot.ly/datatable/interactivity) and [https://dash.plot.ly/datatable/reference/](https://dash.plot.ly/datatable/reference/)).

---

<div class="post-metadata">

**Author:** ![oldkingthor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oldkingthor/32/8713_2.png) [@oldkingthor](https://community.plotly.com/u/oldkingthor)\
**Post date:** [December 8, 2019, 5:32am UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304/3 "2019-12-08T05:32:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![oldkingthor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oldkingthor/32/8713_2.png) [@oldkingthor](https://community.plotly.com/u/oldkingthor)\
**Post date:** [December 12, 2019, 1:35pm UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304/4 "2019-12-12T13:35:53Z")

</div>

Just to add a bit more context. I am trying to follow the tutorial offered here -\> [https://dash.plot.ly/datatable/callbacks](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

---

<div class="post-metadata">

**Author:** ![oldkingthor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/oldkingthor/32/8713_2.png) [@oldkingthor](https://community.plotly.com/u/oldkingthor)\
**Post date:** [December 12, 2019, 2:20pm UTC](https://community.plotly.com/t/getting-dash-core-components-to-work-on-dash-datatable/32304/5 "2019-12-12T14:20:57Z")

</div>

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

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

```

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

```auto
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=[]),
    ])

```