Description
Thank you so much for helping improve the quality of Dash!
We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.
Describe your context
I am working on displaying a table that is in sync with a database:
def get_layout(**kwargs):
df = get_data_rows() # this queries the database for some data
data = df.to_dict("records")
table = dash_table.DataTable(
filter_action="native",
sort_mode="multi",
id=f'my-table',
columns=[
{"name": i, "id": i} for i in df.columns],
data=data,
fixed_rows={'headers': True, 'data': 0},
)
return html.Div(
id='table-wrapper',
children=[
lo_table,
dcc.Interval(
id='table-update', interval=update_interval),
dcc.Store(id='table-update-first-row-id'), # this is to store the latest id
dcc.Store(id='table-update-new-rows'), # this is to store the new entries
],
)
app.clientside_callback(
ClientsideFunction(
namespace='my_namespace',
function_name='array_first_id'
),
Output('table-update-first-row-id', 'data'),
[Input('my-table', 'data')]
)
app.clientside_callback(
ClientsideFunction(
namespace='my_namespace',
function_name='array_prepend_to'
),
Output('my-table', 'data'),
[Input('table-update-new-rows', 'data')],
[State('my-table', 'data')]
)
@app.callback(
Output('table-update-new-rows', 'data'),
[
Input('table-update', 'n_intervals')], [
State('table-update-first-row-id', 'data'),
])
def refresh_table(n_intervals, first_row_id):
df = get_new_entries_since_id(first_row_id)
return df.to_dict("records")
// clientside.js
if (!window.dash_clientside) {window.dash_clientside = {};}
window.dash_clientside.my_namespace = {
array_prepend_to: function(a, b) {
console.log(a)
console.log(b)
b.unshift(...a);
return b;
},
array_first_id: function(a) {
if (a) {
return a[0]['id'];
}
return null;
}
}
- replace the result of
pip list | grep dashbelow
dash 1.6.0
dash-bootstrap-components 0.7.2
dash-core-components 1.5.0
dash-html-components 1.0.1
dash-renderer 1.2.0
dash-table 4.5.0
-
if frontend related, tell us your Browser, Version and OS
- OS: [e.g. macOS 10.15.1]
- Browser [e.g. Safari]
- Version [e.g. 13.0.3]
Describe the bug
The table does not update although the 'my-table.data' array is shown to be updated in the console.
Expected behavior
As soon as the clientside function array_prepend_to finished executing, the my-table is redrawn to reflect the change.
Screenshots
This is the first few entries of the table after initialization:
This is the content of table-update-new-rows.data and my-table.data, printed from with the array_prepend_to function:
These arrays have 0 and 1000 entries after the table is initialized, and any new item added to the table-update-new-rows through the interval event callback will trigger the array_prepend_to callback which supposedly updates my-table.data. As shown in the log, when I add 4 new entries to the database, the interval callback picks up the 4 entries successfully, and the clientside function triggers correctly, for a moment there are 4 and 1000 entries in the arrays. The next time these get printed, there are 0 and 1004 entries, which means that my-table.data have 1004 entries now. However, the table view does not update as expected. (A "manual" refresh can be manually done by me applying some row filter through the naive filtering and clearing it.)
The above shows the content of a and b after I add 4 new entries to the database. But the table view stays the same as before without refreshing itself automatically.