plotly / dash-table

OBSOLETE: now part of https://github.com/plotly/dash
https://dash.plotly.com
MIT License
420 stars 74 forks source link

Case-insensitive filter causes "Cannot read property 'toString' of null" exception when the column contains null value #934

Open xwk opened 2 years ago

xwk commented 2 years ago

If a column in the table contains null value at some rows and you try to do a case insensitive filtering like "ine foo', a javascript exception "Cannot read property 'toString' of null" exception" will occur. Apparently it is caused by the line "lhs.toString().toUpperCase()" of fnEval() method in relational.ts failed to check whether lhs (i.e. the cell value) is null or not.

A sample app to reproduce the problem.

import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict

import dash

app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', [None, 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', None, 'Miami', 'NYC'])
]))

app.layout = html.Div([
    dash_table.DataTable(
        id='table',
        data=df.to_dict('records'),
        columns=[
            {'id': 'climate', 'name': 'climate'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city'},
        ],
        filter_action="native",
    ),
    html.Div(id='table-dropdown-container')
])

if __name__ == '__main__':
    app.run_server(debug=True, port=8051)

Run the app, in the 'city' column header of the table, type in 'ine foo' and hit enter, which should reproduce the problem.

Environment:

xwk commented 2 years ago

Created a PR https://github.com/plotly/dash-table/pull/935/files to fix this issue