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;

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

You can adjust the button styling in CSS using the button and its parent class names:

/* place the button at the top-right of the table */
.dash-table-container .dash-spreadsheet-menu button {
  position: absolute;
  right: 20px;
  top: 0;
  padding: 10px;

/* add trailing text */
.dash-table-container .dash-spreadsheet-menu button:after {
  content: ' CSV';

/* some effects on hovering */
.dash-table-container .dash-spreadsheet-menu button:hover {
  color: red;
  font-size: large;