Problem with Dash DataTable Pagination
Author: ak4-shCreated Dec 1, 2022Updated Sep 16, 2026
LabelsbugP3
I've run into a bug with Dash datatables, where tables with pagination that have tooltips keep generating errors if you hover over them. The DataTable becomes non responsive after the errors are thrown, and doesn't work until you refresh the app.
Made a simple dash app to reproduce the error. To trigger the issue navigate the table until you find the highlighted cell and hover over the table. The dash app code is:
from datetime import date
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
from dash.dependencies import Input, Output
import pandas as pd
import dash
df = pd.read_csv(
"https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv"
)[["country", "pop", "continent", "lifeExp"]]
print("Columns: ", df.columns)
app = dash.Dash(__name__)
app.layout = html.Div([
dash_table.DataTable(
id='datatable-row-ids',
columns=[
{'name': i, 'id': i, 'deletable': True} for i in df.columns
# omit the id column
if i != 'id'
],
data=df.to_dict('records'),
editable=True,
filter_action="native",
sort_action="native",
sort_mode='multi',
row_selectable='multi',
row_deletable=True,
selected_rows=[],
page_action='native',
page_current= 0,
page_size= 10,
style_data_conditional = [
{
'if': {'row_index': 'odd'},
'backgroundColor': '#F4F5F7'
},
{
'if': {
'filter_query': '{country} = "India"',
'column_id': 'continent',
},
'backgroundColor': '#FEFAF3',
'color': '#E29F08',
}
],
tooltip_conditional = [
{
'if': {
'filter_query': '{country} = "India"',
'column_id': 'continent',
},
'type': 'markdown',
'value': 'Country: India',
}
]
),
html.Div(id='datatable-row-ids-container')
])
if __name__ == "__main__":
app.run_server(debug=True)My environment is as follows:
dash 1.21.0
dash-bootstrap-components 0.13.0
dash-core-components 1.17.1
dash-html-components 1.1.4
dash-table 4.12.0The error thrown in debug is:
This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
resolve@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:175548
3446/hs/</<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:178094
3446/hs/<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:178228
3446/e/<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:174615
3446/Af</u</<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:280023
3446/Af</u<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:280035
3446/wc<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:207524
1294/i/<@http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.v4_12_0m1668077809.js:1:23324
t@http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.v4_12_0m1668077809.js:1:21684
3446/Af</c<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:279873
3446/Af<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:280363
5117/o/<@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:632
value@http://127.0.0.1:8050/_dash-component-suites/dash_table/async-table.js:2:305876
finishClassComponent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:17295:33
updateClassComponent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:17245:46
beginWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:18755:18
beginWork$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:23314:16
performUnitOfWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:22292:14
workLoopSync@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:22265:24
performSyncWorkOnRoot@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:21891:11
flushSyncCallbackQueueImpl/<@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:11224:26
unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:2685:14
runWithPriority$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:11174:12
flushSyncCallbackQueueImpl@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:11219:26
flushSyncCallbackQueue@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:11207:5
batchedEventUpdates$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:22012:9
batchedEventUpdates@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:792:14
dispatchEventForLegacyPluginEventSystem@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:3691:26
attemptToDispatchEvent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:4390:46
dispatchEvent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:4312:43
unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:2685:14
dispatchUserBlockingUpdate@http://127.0.0.1:8050/_dash-component-suites/dash/deps/[email protected]_21_0m1668077809.14.0.js:4295:20
Screenshots
Source: plotly/dash