🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Virtualization= True, and style_data_conditional filter_query causes error

Hi Dash Team,

I have stumbled upon what I think is a Datatable virtualization bug, which took me a while to work out, but I have isolated it to the below simplified code.

For a Datatable, If you have virtualization=True, as well as using Style_data_conditional with filter_query on, if you click on any cell on the table, and use the keypad and scroll down to the last row, and click down on the keypad one more time, a “Cannot read property “id” of undefined” shows up, and halts the program. The style_data_conditional works without crashing if Virtualization = False

This also occurs if you mouse click the last row.

It seemed very similar to this Dash Table with row_selectable="multi" does not respond to data or columns callbacks · Issue #436 · plotly/dash-table · GitHub , but it was not quite the same problem.

Let me know if you see the same thing.

Also, I still need to use filter_query, if you do spot this as an error, any idea as to how I can achieve the same filter_query conditional formatting without breaking the app?

Regards
Marcus

import dash
import dash_table
import dash_html_components as html

app = dash.Dash(__name__)

params = [“id”,“col1”,“col2”,“col3”]

table = dash_table.DataTable(
id=‘table’,
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’: ‘{id} = 2’
},
‘backgroundColor’: ‘#D1EEEE’,
‘color’: ‘black’}
],
)

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

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

1 Like

Hi Dash Team,

Wondering if anyone has checked in on the above mentioned bug, Virtualization + style_data_conditional, and has found the same error? Please see below the code with appropriate markdown for indentation.

import dash
import dash_table
import dash_html_components as html

app = dash.Dash(name)

params = [“id”,“col1”,“col2”,“col3”]

table = dash_table.DataTable(

 id=‘table’,
 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’: ‘{id} = 2’
  },
 ‘backgroundColor’: ‘#D1EEEE’,
 ‘color’: ‘black’}
 ],
)

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

if name == ‘main’:
 app.run_server(debug=True)

Hi @mcsewhoy I ran the code and didn’t get an error. If you set virtulization=False does the error go away? What version of Dash you are using?

Hi @AnnMarieW ,

Firstly, thanks for taking a look into this, I really appreciate it.

I am using
dash 1.20.0,
dash_table 4.11.3,
dash_html_components 1.1.3

I have rerun the code with virtulization=False, and the table works perfectly fine, I can scroll all the way to the bottom of the table and no error is thrown. But when =True, scrolling down the bottom back and forward throws up the error still. It happens with this minimized reproducible code, and also my full dash program.

It also happens when I use Google Chrome browser, and Microsoft Edge browser.

Still not sure why?

Thanks
Marcus

Hi again @AnnMarieW ,

I noticed that dash 1.21.0 was out, so I updated to that, with Dash table updating to 4.12.0 and dash_html_components going to 1.1.4,

But the error still persists.

So I guess it does not relate to dash versions either. I am running python 3.9.4. fwiw.

Regards
Marcus

Hi @mcsewhoy Sorry, I didn’t read your original post carefully, and yes, when I scroll to the bottom, I can reproduce the error.

It’s definitely a bug and it’s been reported in Github issue#933. I added your example there too and feel free to add any information I might have missed. The error started with dash v1.12.0 and dash-table v4.7.0 Prior versions work fine.

Thanks for reporting and for the great minimal working example.

1 Like

Hi @AnnMarieW ,

Thanks for hunting down the correct Github issue and taking the time to look into this.

I’ll keep an eye out on that issue, and see if/when it is resolved so I can turn highlighting back on.

Cheers
Marcus

1 Like