Skip to content

Dashtable case-insensitive filter causes exception when the column contains null value #2960

Open
@xwk

Description

@xwk

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.

from dash import html
from dash 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.

I had a PR for fixing this bug for an old version of dash-table at https://github.com/plotly/dash-table/pull/935/files

Environment:

dash                 2.17.1
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

- OS: Ubuntu 22.04
- Browser: Chrome
- Version: 127.0.6533.119

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbugsomething brokendash-data-tablerelated to DataTable component

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions