Repository navigation
[BUG] Virtualized table breaks when clicking further down than initial view if filter query conditional data style is present #933
Description
Dash version: 1.21.0
Dash-Table version: 4.12.0
Browser: Both Chrome and (new) Edge were tested
When a table has virtualization enabled, and some conditional data styling which uses filter_query, scrolling the table down outside the starting view and clicking on a cell causes the console error: TypeError: Cannot read property XXXX of undefined. In the example below, XXXX = Country, and changing the filter_query column to another value changes this error to that value. Both virtualization without the filter_query styling, and the styling without virtualization work as expected without this error.
This error causes the entire table to stop responding, any filtering or sorting options will not work until the page is refreshed, and no more cells can be selected.
Example: This code is taken from the documentation on virtualization https://dash.plotly.com/datatable/virtualization
The filter_query styling is all that has been changed.
import dash
import dash_table
import pandas as pd
app = dash.Dash(__name__)
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/Emissions%20Data.csv').reset_index()
df['Emission'] = df['Emission'].map(lambda x: '{0:.2f}'.format(x))
app.layout = dash_table.DataTable(
id='table-virtualization',
data=df.to_dict('records'),
columns=[
{'name': i, 'id': i} for i in df.columns
],
fixed_rows={ 'headers': True, 'data': 0 },
style_cell={
'whiteSpace': 'normal'
},
style_data_conditional=[
{'if': {'column_id': 'index'},
'width': '50px'},
{'if': {'column_id': 'Year'},
'width': '50px'},
{'if': {'column_id': 'Country'},
'width': '100px'},
{'if': {'column_id': 'Continent'},
'width': '70px'},
{'if': {'column_id': 'Emission'},
'width': '75px'},
{'if': {'filter_query': '{Country} contains "A"'},
'backgroundColor': 'red'}
],
virtualization=True,
page_action='none'
)
if __name__ == '__main__':
app.run_server(debug=True)`
Activity
AnnMarieW commentedon Aug 20, 2021
Just to confirm, I can also reproduce the error.
This came up recently on the forum as well and was reported by @mcsewhoy https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176
It looks like this issue started with Dash v 1.12.0 and dash-table v4.7.0 Prior versions work fine.
Here is another MWE for reference: You will get the error if you click on a cell at or near the bottom of the table.
daniel-smit-haw commentedon Sep 1, 2021
Dash version: 1.21.0
Dash-Table version: 4.12.0
Same issue in Firefox 91.0.2
emilmajkowski commentedon Nov 17, 2021
Hello,
It seems like the issue with "Cannot read properties of undefined (reading '')" when virtualization = True also happens for
dash-table 5.0.0
dash 2.0.0
Could you please provide a fix? Without virtualization dash-table does not really help for analysing big sets of data...
emilmajkowski commentedon Nov 17, 2021
Native paging throws the same error "Cannot read properties of undefined"