[BUG] Virtualized table breaks when clicking further down than initial view if filter query conditional data style is present

[OliverCrowe]

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)`

[AnnMarieW]

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.

import dash_table
import dash_html_components as html

app = dash.Dash(__name__)

params = ["id", "col1", "col2", "col3"]

table = dash_table.DataTable(
    columns=[{"name": i, "id": i} for i in params],
    data=[{param: i for param in params} for i in range(1, 20)],
    virtualization=True,
    style_data_conditional=[
        {
            "if": {"filter_query": "{col1} = 12"},
            "backgroundColor": "#D1EEEE",
            "color": "black",
        }
    ],
)

app.layout = html.Div([table])

if __name__ == "__main__":
    app.run_server(debug=True)

[daniel-smit-haw]

Dash version: 1.21.0
Dash-Table version: 4.12.0

Same issue in Firefox 91.0.2

[emilmajkowski]

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]

Native paging throws the same error "Cannot read properties of undefined"