tooltip_conditional filter cause "TypeError: Can not read property of undefined" exception when client side pagination is enabled #917
Description
When client side pagination 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.
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict
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)
Test environment:
- python==3.8.10
- dash==1.20.0
- dash-table==4.11.3
Run the program and try to navigate to the second page, you will see the error prompt by developer tool.
I did a bit debugging with Chrome developer tool. The exception is at this line.
More specifically, on the first time when this line is executed after navigating to the second page, it has row = 3, virtualized.offset.rows=0 and virtualized.data array containing only one row (i.e. the only row in the second page), which makes virtualized.data[row - virtualized.offset.rows] to access beyond the array tail and hence the exception.
I suspect the line should be changed to something like virtualized.data[row - virtualized.indicies[0] - virtualized.offset.rows], but I'm not familiar with the code base enough to tell whether this is a proper fix.