Ability to move the export button

chriddyp commented 4 years ago

This has been brought up several times in the forum:

The current workaround is to use CSS. From the forum:

css=[{‘selector’:’.export’,‘rule’:‘position:absolute;left:-15px;bottom:-30px’}],

or

.export{
    position: absolute;
    right: 50%;
    font-type: sans-serif;
    [...]
}

Higgcz commented 4 years ago

Hi, I was digging into this issue a bit, but because I didn't have enough time I just came up with a workaround, I'm basically adding new button, hiding the default one and triggering its onclick event using javascript:

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

However, I was wondering, would it be possible to have some property of DataTable that would trigger the Export? That way you would be able to define your own button and place it anywhere you want. Similar to my workaround, but instead of that "hacky" callback, you would define the callback more naturally:

@dash_app.callback(
    Output("table_to_export", "export"),
    Input("export_table", "n_clicks")
    )
def on_export_table(n_clicks):
    return n_clicks > 1

I've seen something similar in Dash Bootstrap Component Library with Toast component and its is_open property.

Everything else I was thinking about was a bit weird and not as flexible as defining custom button, other benefit of this approach is it doesn't need to be button that triggers the callback.

AnnMarieW commented 3 years ago

It would be nice to include the toggle columns button in this project as well. In the meantime, here is a workaround https://community.plotly.com/t/datatable-toggle-columns-button-placement-in-python/46768/2

plotly / dash-table

Ability to move the export button #821

main.py:

assets/custom.css: