dash icon indicating copy to clipboard operation
dash copied to clipboard

Dashtable tooltip_conditional filter cause exception when client side pagination is enabled

Open xwk opened this issue 6 months ago • 0 comments

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

xwk avatar Aug 23 '24 06:08 xwk