Dash Table with row_selectable="multi" does not respond to data or columns callbacks

DataTable with row_selectable=“multi” does not respond to any columns or data callbacks.

Debug shows Javascript error:

TypeError: Cannot read property '0' of undefined

    at e.getWeight (http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:65588)

    at http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:98263

    at http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:275516

    at http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:12:10031

    at Object.t [as a] (http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:1:1711)

    at e.value (http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:98224)

    at http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:96967

    at e.memoizedCreateEdges (http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:1:2020)

    at e.value (http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:99012)

    at http://127.0.0.1:8050/_dash-component-suites/dash_table/bundle.js?v=3.7.0&m=1557928877:18:115236

Example:

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    dash_table.DataTable(
        id='table',
        row_selectable="multi"
    ),
    html.Div(id='dummy_input')
])

@app.callback(Output('table', 'columns'), [Input('dummy_input', 'children')])
def update_columns(dummy):
    return [{"name": i, "id": i} for i in df.columns]
    
@app.callback(Output('table', 'data'), [Input('dummy_input', 'children')])
def update_data(dummy):
    return df.to_dict('records')

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

[montovaneli]

@rp2532 that is because you are returning empty lists when you don’t have uploaded data. Try this:

import dash
import dash_core_components as dcc 
import dash_html_components as html 
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import dash_table
from plotly.subplots import make_subplots

import os
import numpy as np 
import pandas as pd
import io
import base64

# Empty DataFrame to start the DataTable (workaround for bug in DataTable - https://github.com/plotly/dash-table/issues/436#issuecomment-615924723)
start_table_df = pd.DataFrame(columns=[''])

# Create dash app
app = dash.Dash(__name__)

### LAYOUT ###
# App Layout
app.layout = html.Div([
    html.H3("Post Covid-19 Tool"),

    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=False
    ),

    html.Div([
        dash_table.DataTable(
            data=start_table_df.to_dict('records'), 
            columns = [{'id': c, 'name': c} for c in start_table_df.columns],
            id='emp-table',
            #page_size = 14,
            #sort_action='native',
            filter_action='native',
            row_selectable='single',
            #row_deletable=True,
            #editable=True
        ),
    ])
])

# file upload function
def parse_contents(contents, filename):

    content_type, content_string = contents.split(',')

    decoded = base64.b64decode(content_string)

    try:

        if 'csv' in filename:
            # Assume that the user uploaded a CSV file
            df = pd.read_csv(io.StringIO(decoded.decode('utf-8')))

        elif 'xls' in filename:
            # Assume that the user uploaded an excel file
            df = pd.read_excel(io.BytesIO(decoded))

    except Exception as e:
        print(e)
        return None

    return df

### CALLBACKS ###
# Callback: Return Datatable
@app.callback([Output('emp-table', 'data'),
               Output('emp-table', 'columns')],
              [Input('upload-data', 'contents')],
              [State('upload-data', 'filename')])
def render_table(contents, filename):

    if contents and filename:

        df_geo = parse_contents(contents, filename)

        columns = [{"name": i, "id": i} for i in df_geo.columns]

        data = df_geo.to_dict('records')

        # Debug
        print(df_geo.head())

        return data, columns

    else:

        return start_table_df.to_dict('records'), [{'id': '', 'name': ''}]


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

[rp2532]

@montovaneli Confirming, that indeed works!