Cannot read properties of undefined

I am having issues using virtualization on the DataTable component. After the table is rendered and I scroll a few lines down, then click a cell, the table instantly goes to the top and I get the following errors in the Chrome inspector window:

TypeError: Cannot read properties of undefined (reading ‘Order_Qty’)
at Object.resolve (expression.ts:14:20)
at relational.ts:9:35
at Object.evaluate (relational.ts:18:33)
at t.evaluate (index.ts:34:34)
at Object.matchesFilter (index.ts:27:71)
at index.ts:65:11
at r (_filter.js:7:9)
at filter.js:48:3
at _dispatchable.js:44:15
at _curry2.js:20:18

I have tried numerous different versions of Dash and Dash-Table and anything over the below breaks ever time.

dash==1.20.0
dash-table==4.4.0

Does anyone else notice this issue?

I have seen numerous bug reports and other topics about this, but none are resolved. Any assistance would be greatly appreciated.

Hi @Croll12 ,
It would be helpful for others to help you if you could attach the MRE and the link to the bug reports you said.

Thanks for the response. I was afraid you would ask for that so I was trying to create a simple example in the mean time. This appears to be related to the style_data_conditional part on the DataTable. If I remove the styling, everything works as expected. Does anyone see a workaround here (aside from removing the styling)?

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
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 = html.Div([html.Div([], id='test'), dash_table.DataTable(
    id='table',
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        page_action="none",
		fixed_rows={'headers': True, 'data': 0},
		#sort_action='native',
		export_format="xlsx",
		export_headers="display",
		export_columns='all',
		#filter_action='native',		
        virtualization=True,
		style_data_conditional=[{
					'if': {
						'filter_query': '{Emission} > 0',
						'column_id': 'Emission'
					},
					'color': 'green'
				},
				{
					'if': {
						'filter_query': '{Emission} < 0',
						'column_id': 'Emission'
					},
					'color': 'red'
				}]
)
])


@app.callback(Output('test', 'children'), [Input('table', 'active_cell')])
def updateIT(ac):
	if ac:
		return ac['column_id']
	else:
		return ''
	
	
if __name__ == '__main__':
	app.run_server(debug=True)

Are you or anyone seeing the same results?

Has anyone else faced this issue? Am I stuck on these versions?

Hey @Croll12 ,

I copy/pasted your code and it works fine on my laptop.

Did you verify there weren’t errors in the chrome inspector tool?

Can you share what versions of dash and dash-table you are using?

No matter what versions I try, I get the same outcome.

dash version: 2.5.1
dash_table version: 5.1.3

I was able to upgrade dash to 2.5.1, but I can not find a version of dash-table > 5.0

I run below code:

import dash
import dash_table
print(dash. __version__)
print(dash_table. __version__)

1111

:thinking: :thinking:

Are you installing from pip?

Yup. I installed from pip.

OK. looks like we are on the same versions now. Even though pip is 2.5.1, doing the prints like you I show the same.

I have added tooltip_conditional to the above code (to match more like mine) and am receiving the same error now. Maybe this was always tooltip related, not styling.

here is the full code with added tooltip_conditional:

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
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 = html.Div([html.Div([], id='test'), dash_table.DataTable(
    id='table',
        data=df.to_dict('records'),
        columns=[{'id': c, 'name': c} for c in df.columns],
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        page_action="none",
		fixed_rows={'headers': True, 'data': 0},
		#sort_action='native',
		export_format="xlsx",
		export_headers="display",
		export_columns='all',
		#filter_action='native',		
        virtualization=True,
		style_data_conditional=[{
					'if': {
						'filter_query': '{Emission} > 0',
						'column_id': 'Emission'
					},
					'color': 'green'
				},
				{
					'if': {
						'filter_query': '{Emission} < 0',
						'column_id': 'Emission'
					},
					'color': 'red'
				}],
		tooltip_conditional=[
			{
				'if': {
					'filter_query': '{Emission} < 0',
						'column_id': 'Emission'
						},
				'value': 'Further review required, calculated demand is 20% lower than the 3 year average units sold'
			},
			{
				'if': {
					'filter_query': '{Emission} > 0',
						'column_id': 'Emission'
						},
				'value': 'Further review required, calculated demand is 20% higher than the 3 year average units sold'
			},
		]
)
])


@app.callback(Output('test', 'children'), [Input('table', 'active_cell')])
def updateIT(ac):
	if ac:
		return ac['column_id']
	else:
		return ''
	
	
if __name__ == '__main__':
	app.run_server(debug=True)

I take that back. Scrolling up and down on the table throws the same error every time, regardless if tooltip_conditional is commented out or not.

I have gone through every flag in the code and commented out each one individually, then tested. Each one gives the same error except virtualization.

Setting virtualization=False (or simply commenting out that line) works, but is terribly slow.

I run your code on a different machine ( dash-> 2.5.1 and dash_table-> 5.1.3)

Still throws no error.

Are you scrolling up and down, then selecting a cell in the last column?

Yes finally I’ve got the error. If I scroll a bit and select a cell in the last column no errors but if I scroll so much and select the last column it throws the error.

Great, any way to fix it?

@AnnMarieW - can you take a look please?

Is this a bug?