# Virtualization= True, and style\_data\_conditional filter\_query causes error

**URL:** <https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176>\
**Category:** Dash Python\
**Created:** [July 31, 2021, 5:40am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176 "2021-07-31T05:40:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcsewhoy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mcsewhoy/32/6972_2.png) [@mcsewhoy](https://community.plotly.com/u/mcsewhoy)\
**Post date:** [July 31, 2021, 5:40am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/1 "2021-07-31T05:40:01Z")

</div>

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](https://github.com/plotly/dash-table/issues/436) , 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

 ![Virtualization](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/c/c0e36e2daaba36f28f90f548da9aa8be4269d831.jpeg)

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)

---

<div class="post-metadata">

**Author:** ![mcsewhoy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mcsewhoy/32/6972_2.png) [@mcsewhoy](https://community.plotly.com/u/mcsewhoy)\
**Post date:** [August 18, 2021, 8:48am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/2 "2021-08-18T08:48:13Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 18, 2021, 3:08pm UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/3 "2021-08-18T15:08:45Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mcsewhoy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mcsewhoy/32/6972_2.png) [@mcsewhoy](https://community.plotly.com/u/mcsewhoy)\
**Post date:** [August 20, 2021, 6:58am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/4 "2021-08-20T06:58:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mcsewhoy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mcsewhoy/32/6972_2.png) [@mcsewhoy](https://community.plotly.com/u/mcsewhoy)\
**Post date:** [August 20, 2021, 7:09am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/5 "2021-08-20T07:09:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 20, 2021, 2:22pm UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/6 "2021-08-20T14:22:53Z")

</div>

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](https://github.com/plotly/dash-table/issues/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.

---

<div class="post-metadata">

**Author:** ![mcsewhoy](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mcsewhoy/32/6972_2.png) [@mcsewhoy](https://community.plotly.com/u/mcsewhoy)\
**Post date:** [August 24, 2021, 6:59am UTC](https://community.plotly.com/t/virtualization-true-and-style-data-conditional-filter-query-causes-error/55176/7 "2021-08-24T06:59:50Z")

</div>

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