# Moving DataTable Export Button and changing text

**URL:** <https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115>\
**Category:** Dash Python\
**Created:** [May 8, 2020, 5:01pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115 "2020-05-08T17:01:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gustavo\_Machado](https://avatars.discourse-cdn.com/v4/letter/g/439d5e/32.png) [@Gustavo\_Machado](https://community.plotly.com/u/Gustavo_Machado)\
**Post date:** [May 8, 2020, 5:01pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/1 "2020-05-08T17:01:53Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Higgcz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/higgcz/32/11734_2.png) [@Higgcz](https://community.plotly.com/u/Higgcz)\
**Post date:** [September 4, 2020, 3:27pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/2 "2020-09-04T15:27:03Z")

</div>

Hi,

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

### main.py:

```auto
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(
    "https://raw.githubusercontent.com/plotly/datasets/master/solar.csv"
)
app = dash.Dash( __name__ )
app.layout = html.Div([
    html.Button("Custom export", id="export_table"),
    dash_table.DataTable(
        id="table_to_export",
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict("records"),
        export_format="xlsx",
        export_headers="display",
        ),
    ])

app.clientside_callback(
    """
    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__":
    app.run_server()

```

### assets/custom.css:

```auto
#table_to_export button.export {
    display: none;
}

```

---

<div class="post-metadata">

**Author:** ![aosantos980](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@aosantos980](https://community.plotly.com/u/aosantos980)\
**Post date:** [February 12, 2021, 4:59pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/3 "2021-02-12T16:59:00Z")

</div>

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”

---

<div class="post-metadata">

**Author:** ![Higgcz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/higgcz/32/11734_2.png) [@Higgcz](https://community.plotly.com/u/Higgcz)\
**Post date:** [February 15, 2021, 7:34pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/4 "2021-02-15T19:34:35Z")

</div>

Hi,

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

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

```

Let me know if it helps.

---

<div class="post-metadata">

**Author:** ![aosantos980](https://avatars.discourse-cdn.com/v4/letter/a/ecae2f/32.png) [@aosantos980](https://community.plotly.com/u/aosantos980)\
**Post date:** [March 5, 2021, 9:00pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/5 "2021-03-05T21:00:09Z")

</div>

Thanks a lot ! it worked

---

<div class="post-metadata">

**Author:** ![aeltanawy](https://avatars.discourse-cdn.com/v4/letter/a/3ec8ea/32.png) [@aeltanawy](https://community.plotly.com/u/aeltanawy)\
**Post date:** [August 14, 2023, 5:55pm UTC](https://community.plotly.com/t/moving-datatable-export-button-and-changing-text/39115/6 "2023-08-14T17:55:11Z")

</div>

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

```auto
/* 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;
}

```