Suppose this very simple example of an editable Data Table with 1000 rows and virtualization enabled:
app.layout = html.Div([
dash_table.DataTable(
id='table',
columns=(
[{'id': 'col1', 'name': 'col1', 'editable': False}] +
[{'id': 'col2', 'name': 'col2', 'type': 'numeric'}]
),
data=[
{'col1': i, 'col2': i}
for i in range(1000)
],
style_table={
'height': 240,
'width': 290,
'overflowY': 'auto'
},
style_cell_conditional=[
{'if': {'column_id': 'col1'},
'width': '55%'},
{'if': {'column_id': 'col2'},
'width': '45%'}
],
editable=True,
page_action='none',
virtualization=True
)
]
)
Now if you actually try to edit the table, it is going to break. The first few rows are fine, no problem.
But then suddenly if you try to change a value from like row number 8 on the table does really weird stuff and then breaks with an error or just outright breaks immediately.
I dont even get errors in the console, just an error popup saying something went wrong in Javascript.
Here is a short video of it (sorry for low quality) but given the simple code you can reproduce it easily yourself:
https://i.imgur.com/A2YNqZQ.mp4
As my Data Table is going to have a lot of rows in it I kinda rely on virtualization.
So if anyone has an idea how to fix this I would really appreciate help