Moving DataTable Export Button and changing text

Dash Python
1

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!

2

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:

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:

#table_to_export button.export {
    display: none;
}
2 Likes
3

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”

4

Hi,

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
5

Thanks a lot ! it worked

1 Like
6

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;
}