Styling datatable export button causes TypeError: Cannot read property 'dummy-data' of undefined

Dash Python
1

Hi, I have read through the forums on how to style the datatable export button. Basically, this solution by @Higgcz seems to be the most convenient but uses javascript python based on what i understand. I can hide the button,

in mypage.py:

export_csv_button = dbc.Button(
    "Export to csv",
    id='mybutton', 
    n_clicks=0, 
)

in index.py:

app.clientside_callback(
    """
    function(n_clicks) {
        if (n_clicks > 0)
            document.querySelector("#datatable button.export").click()
        return ""
    }
    """,
    Output("mybutton", "dummy-data"),
    [Input("mybutton", "n_clicks")]
)

My issues is that sometimes, i come across this error: Cannot read property ‘dummy-data’ of undefined.

For one, i never actually define dummy-data anywhere besides in the output, so this error makes sense. But on the other hand, this solution does work sometimes?? So im really confused. I’m also not sure how the js callbacks really work, is it possible to do a python version of the code?

Based on what i’ve seen regarding this error, it seems that we are querying before the user has clicked on the button? If that’s the case, how do i fix this in js code? Because the solution here is for python callbacks.

Hope this question can be answered soon.

2

Hi @chowder,

I haven’t encountered the same error myself, but one thing that came to my mind is to define the field before we use it in the callback.

# mypage.py
export_csv_button = dbc.Button(
    "Export to csv",
    id='mybutton', 
    n_clicks=0,
    **{"data-dummy": ""}
)

In general, the callback should be called at the beginning before user clicks on the button, which will assign "" to the data-dummy anyway and Dash should recognize arbitrary field called data-*, that’s why I thought I don’t need to define it, but maybe it could be an issue in some versions or some browsers.

Regarding your question about doing the same thing in Python, I’m not sure whether that’s possible, we are basically using the fact that from Javascript we can locate the DOM Element and click on it programmatically on the client side. Basically going around Dash altogether.

Let me know if that helped. Also if you have some way of replicating the error, I’m curious.