Can not read properties of undefined ...
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 24.4k
- Forks
- 2.3k
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 13
Description
Using virtualization=True and style_data_conditional throws an error of 'can not read properties of undefined column_name'. Here is an MWE to test with, scroll down a bit on the table and then select a cell in the last column. I created a topic on the community forum and the results were it seems to be a bug. Community Topic.
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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the Python MWE and reproduce the error by scrolling the virtualized DataTable and selecting a cell in the last column. Inspect the table's active_cell handling and the updateIT callback, which reads column_id. Done means the interaction no longer reports an undefined column_name error and the callback still returns the selected column.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100