Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xwk opened this issue Aug 23, 2024 · 1 comment
Labels
bug something broken dash-data-table related to DataTable component P3 not needed for current cycle

Comments

@xwk
Copy link

xwk commented Aug 23, 2024

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

@gvwilson gvwilson changed the title [BUG] Dashtable case-insensitive filter causes exception when the column contains null value Dashtable case-insensitive filter causes exception when the column contains null value Aug 26, 2024
@gvwilson gvwilson added bug something broken dash-data-table related to DataTable component P3 not needed for current cycle labels Aug 26, 2024
@cjproud
Copy link

cjproud commented Sep 4, 2024

Bump, seeing this as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken dash-data-table related to DataTable component P3 not needed for current cycle
Projects
None yet
Development

No branches or pull requests

3 participants