如何创建数据源来自上传组件的可筛选Dash DataTable

实现点击触发后异步加载数据的Dash DataTable时，只要开启filter_action="native"原生筛选，就会抛出报错：

Cannot read properties of undefined (reading '0')

• 把触发按钮替换为uploader上传组件作为数据加载触发源时，会出现完全相同的报错
• 注释掉filter_action="native"配置后程序可正常运行

复现代码如下：

from dash import dash, dash_table, html
from dash.dependencies import Input, Output
import pandas as pd
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__, prevent_initial_callbacks=True)

app.layout = html.Div([
    html.Button('start', id='button'),
    dash_table.DataTable(
        id='datatable',
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        row_deletable=True,
        page_action="native",
        page_current= 0,
        page_size= 10,
    )
])

@app.callback(
    Output('datatable', 'data'),
    Output('datatable', 'columns'),
    Input('button', 'n_clicks'),
)
def generate_upload_file(n_clicks):  
    if n_clicks:
        df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
        data_dict = df.to_dict('records')
        headers_list = list(df.columns.values)
        headers_dict = ([{'id': _, 'name': _} for _ in headers_list])
        return data_dict, headers_dict
    else: raise PreventUpdate

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

DataTable开启原生筛选功能后，组件初始化阶段就会读取列配置生成筛选输入框，初始化组件时没有给data和columns属性设置默认值，这两个属性初始为undefined，组件读取列配置的第一个元素时就会触发上述类型错误，和触发数据加载的是按钮还是上传组件没有关系。

初始化DataTable时显式给data和columns传入空数组作为默认值即可，不需要移除原生筛选配置，修复后组件初始化代码如下：

dash_table.DataTable(
    id='datatable',
    data=[],  # 新增默认空值
    columns=[], # 新增默认空值
    filter_action="native",
    sort_action="native",
    sort_mode="multi",
    row_deletable=True,
    page_action="native",
    page_current= 0,
    page_size= 10,
)

替换原有DataTable初始化代码后，点击按钮/上传文件触发数据加载时，筛选、排序等原生功能都可正常运行，不会再抛出报错。

内容的提问来源于stack exchange，提问作者ah2Bwise