✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Moving DataTable Export Button and changing text

My DataTable has a export button but I want to position it elsewhere.
Is there a way to move the DataTable Export Button through CSS, style or even move it to another div?

I would also like to change its label.

Thanks and cheers!


I was dealing with exactly the same problem and I came up with a simple solution, it is sort of hacky, but it works well.

The idea is:

  • Hide the default Export button using CSS
  • Create custom Export button
  • Create JS callback that calls click() on the default Export button


import os
import pandas as pd
import dash_table
import dash
import dash_html_components as html
from dash.dependencies import Input, Output

df = pd.read_csv(
app = dash.Dash(__name__)
app.layout = html.Div([
    html.Button("Custom export", id="export_table"),
        columns=[{"name": i, "id": i} for i in df.columns],

    function(n_clicks) {
        if (n_clicks > 0)
            document.querySelector("#table_to_export button.export").click()
        return ""
    Output("export_table", "data-dummy"),
    [Input("export_table", "n_clicks")]

if __name__ == "__main__":


#table_to_export button.export {
    display: none;
1 Like

Hi @Higgcz ,

I’m trying to do the same as you, but I’m receving an error from the Output
Output(“export_table”, “data-dummy”)

“Cannot read property ‘data-dummy’ of undefined”


I’ve tested my example again and I cannot see the error. Maybe you could try to define the field data-dummy beforehand:

html.Button("Custom export", id="export_table", **{"data-dummy": ""}), 

Let me know if it helps.

1 Like

Thanks a lot ! it worked

1 Like