# The callback does not update the dash table

**URL:** <https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779>\
**Category:** Dash Python\
**Created:** [June 4, 2022, 7:27pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779 "2022-06-04T19:27:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Katerina](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Katerina](https://community.plotly.com/u/Katerina)\
**Post date:** [June 4, 2022, 7:27pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/1 "2022-06-04T19:27:59Z")

</div>

Hello.  
Please help me figure out the dash table callback. The callback doesn’t work for me. I’m new to dash

```auto
''' Filtering the data '''
@app.callback(
    Output('filtered_data', 'data'),
    [Input('submit_val', 'n_clicks')],
    [State('dt_selector', 'start_date'),
    State('dt_selector', 'end_date')]
)
def filter_data(n, start_date, end_date):
    start_date = datetime.strptime(start_date, '%Y-%m-%d')
    end_date = datetime.strptime(end_date, '%Y-%m-%d')
    
    my_data = df.query(Date>= @start_date and Date <= @end_date')
    return my_data.to_json(date_format='iso', orient='split',
                          default_handler=str)

@app.callback(
    Output('Table1', 'children'),
    [Input('submit_val', 'n_clicks'),
    Input('filtered_data', 'data'),]
)
def update_table(n, data):
    d=pd.read_json(data, orient='split')
    d['Date'] = pd.to_datetime(d['Date'], format = '%Y-%m-%d').dt.strftime('%Y-%m-%d')
    if len(d)==0:
        return html.Div('Please select more options')

# Here I am creating a pivot table, however, even just changing the parameters on the input table does not give any change

    return html.Div([
                dash_table.DataTable(
                id='Table1',
                data=d.to_dict('records'),
                columns=[{"name": i, "id": i} for i in d.columns],
                filter_action='native',    
                column_selectable="multi",
                editable=True)
        ])

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [June 6, 2022, 2:47am UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/2 "2022-06-06T02:47:42Z")

</div>

> [@Katerina](#):
>
> filtered\_data

hi @Katerina  
Welcome to the Dash community.

What does the `filtered_data` id belong to? what component?

---

<div class="post-metadata">

**Author:** ![Katerina](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Katerina](https://community.plotly.com/u/Katerina)\
**Post date:** [June 6, 2022, 1:26pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/3 "2022-06-06T13:26:37Z")

</div>

Hello.

```auto
dcc.Store(id='filtered_data', storage_type='session')

```

It even seems to me that output works. I work in Jupiter Dash with browser output. So, when you press the button, nothing happens. If you restart the cell, the selected dates are displayed, although they return to their original appearance in the selector. And the page in the browser writes “Update…” endlessly

Button

```auto
dbc.Col(dbc.Button('OK', id='submit_val', n_clicks=0)

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [June 7, 2022, 1:59pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/4 "2022-06-07T13:59:58Z")

</div>

Hi @Katerina  
The problem is that the first and second callback pretty much get triggered at the same time because they have the same button input triggering it `Input('submit_val', 'n_clicks')`. That’s why when I run the full code you gave me on PyCharm, I get an error message:

> Invalid file path or buffer object type: \<class ‘NoneType’\>

One way to get around that is to remove the button as an input from the second callback and make the input the radioItems and the stored data like so:

```auto
@app.callback(
    Output('Table_1', 'children'),
    Input('filtered_data', 'data'),
    Input('mode_selector', 'value')
)
def update_table(data, mode):
    [...]

```

Does that make sense?

---

<div class="post-metadata">

**Author:** ![Katerina](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Katerina](https://community.plotly.com/u/Katerina)\
**Post date:** [June 7, 2022, 2:13pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/5 "2022-06-07T14:13:59Z")

</div>

Hello, unfortunately it didn’t help. Only charts are still updated

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [June 7, 2022, 2:15pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/6 "2022-06-07T14:15:47Z")

</div>

can you give me more info please. What’s not working? the table is not showing for you?

---

<div class="post-metadata">

**Author:** ![Katerina](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Katerina](https://community.plotly.com/u/Katerina)\
**Post date:** [June 7, 2022, 2:19pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/7 "2022-06-07T14:19:32Z")

</div>

The table is displayed. But it is not updated. I waited, assuming it would take some time, but nothing happened.  
And, yes, I also sometimes got an error message when loading the table, which was solved by reloading the code cell. Now there is no such problem.

And this part doesn’t work out either

```auto
    Input('mode_selector', 'value')

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [June 7, 2022, 2:39pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/8 "2022-06-07T14:39:45Z")

</div>

I see. That’s because you have duplicate IDs called Table\_1. The same ID is in the DataTable as well as the Div. Remove the ID from the DataTable and it will work.

```auto
data = dash_table.DataTable(
    # id='Table_1',
    [...]
)       

```

---

<div class="post-metadata">

**Author:** ![Katerina](https://avatars.discourse-cdn.com/v4/letter/k/e9c0ed/32.png) [@Katerina](https://community.plotly.com/u/Katerina)\
**Post date:** [June 7, 2022, 2:43pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/9 "2022-06-07T14:43:04Z")

</div>

It works!!! I am very grateful to you, thank you for not leaving in a difficult question for me

---

<div class="post-metadata">

**Author:** ![cmikey14](https://avatars.discourse-cdn.com/v4/letter/c/77aa72/32.png) [@cmikey14](https://community.plotly.com/u/cmikey14)\
**Post date:** [July 30, 2024, 5:06pm UTC](https://community.plotly.com/t/the-callback-does-not-update-the-dash-table/64779/10 "2024-07-30T17:06:55Z")

</div>

But then how does the pivot table know which data to use?