[BUG] DataTable javascript error with row_selectable and filter_action

[jchang10]

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                      2.0.0
dash-bootstrap-components 1.0.0

• if frontend related, tell us your Browser, Version and OS

  • OS: [e.g. iOS] Windows
  • Browser [e.g. chrome, safari]: Chrome 96.0x, Edge 96.0x, Firefox 90.0 All report same Javascript error
  • Version [e.g. 22]

Describe the bug

DataTable with row_selectable="single or multi" and filter_action="native" seems to cause the JS error. This especially happens when data=[] and colums=[] or empty values.

Expected behavior

JS Error should not occur

Screenshots

This is the simplest example.

import dash
import dash_bootstrap_components as dbc
from dash import html
from dash.html import Div, Span
from dash_bootstrap_components import Row, Col
from dash import dcc
from dash import dash_table


layout = \
    Div([

        dash_table.DataTable(id='tasks-table',
            row_selectable='single',
            tooltip_duration=None,
            page_size=10,
            filter_action='native',
        ),

    ])

app = dash.Dash(__name__)

app.layout = layout

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=8000)

[shakri0]

Hai

[aneeshdua]

@chriddyp Can I pick this up? (Wanted to start contributing to dash as I love using it in my professional work)

[alexcjohnson]

@aneeshdua absolutely! If you run into any trouble getting set up or finding the relevant pieces of code, the best might be to ping me on the forum https://community.plotly.com/u/alexcjohnson

[aneeshdua]

@jchang10 @alexcjohnson I am not able to reproduce the bug (with the same code). Here are the details of my environment:

• replace the result of pip list | grep dash below:

dash                            2.7.1
dash-bootstrap-components       1.3.0
dash-core-components            2.0.0
dash-dangerously-set-inner-html 0.0.2
dash-flow-example               0.0.5
dash-html-components            2.0.0
dash-table                      5.0.0

• if frontend related, tell us your Browser, Version and OS

OS: [e.g. iOS] Windows
Browser [e.g. chrome, safari]: Chrome 108.0x, Edge 108.0x, Firefox 108.0x

I am using newer versions of dash (2.7.1) as compared to the one in which the bug occurred (2.0.0). It could be possible that the bug got fixed over the updates.

[alexcjohnson]

Yes, looks like you're right - if I run the app above with Dash v2.0.0 I see the JS error:

Cannot read properties of undefined (reading '0')

But there's no error in Dash 2.7.1

Thanks for investigating @aneeshdua!