How to create a filterable Dash datatable where the data comes from an uploader

Dash Python
1

I am attempting to create a datatable that can be filtered. The source of the data is pulled in after clicking the button, and this is what I am having trouble working around.

In my actual app, the data that populates the datatable is from an uploader, and substituting this for the button below produces the same error: Cannot read properties of undefined (reading '0')

If I comment out filter_action="native", it works fine.

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)