plotly / plotly/dash

Dashtable tooltip_conditional filter cause exception when client side pagination is enabled

Open
#2,961 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug dash-data-table P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

dash                 2.17.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0
- OS: Ubuntu 22.04
- Browser: Chrome
- Version: 127.0.6533.119

Describe the bug

When client side pagination of dashtable is enabled, the tooltip_conditional filter will cause "TypeError: Can not read property of undefined" exception when try to navigate to next page. It is fine on the first page though.

A sample example to reproduce the problem.

from dash import html
from dash import dash_table
import pandas as pd
from collections import OrderedDict

import dash

app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        data=df.to_dict('records'),
        columns=[
            {'id': 'climate', 'name': 'climate'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city'},
        ],
        page_size=3,
        tooltip_conditional=[
            {
                'if': {
                    'filter_query': '{climate} = "Sunny"',
                },
                'value': 'it is sunny'
            }
        ]
    ),
    html.Div(id='table-dropdown-container')
])


if __name__ == '__main__':
    app.run_server(debug=True, dev_tools_hot_reload=False, port=8051)

Run the program, navigate to the second page of the table and hover mouse over a row, you will see the error prompt by developer tool.

I have raised the same issue when dash-table was in its own repo and suggested some PR. Please find that issue here https://github.com/plotly/dash-table/issues/917

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the provided Python reproduction with client-side pagination and tooltip_conditional enabled, then inspect the browser exception when moving to page two and hovering a row. Compare the behavior with the earlier dash-table issue 917. Done means the second page renders and tooltip hover no longer raises the reported TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.