Bugs in Clipboard example

[AnnMarieW]

trafficstars

It's great to see the Clipboard icon added to the code snippets in the docs! :confetti_ball:

It's also nice to see the new documentation for Clipboard, however the last example has bugs:

• The prop name has been changed from text to content
• Styling the icon as a button without a stylesheet doesn't look good.
• As of Dash 2.0, the data props now return data sorted by column name. This means you can't use the start_cell and end_cell props to filter the dataframe without first changing the order of the columns back to how it appears in the table. Since the purpose of this example is just to show how to copy to the clipboard in a callback, then I think this simpler example would be better:

from dash import Dash, dcc, html, Input, Output, State, dash_table
import pandas as pd

app = Dash(__name__)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")

app.layout = html.Div(
    [
        dcc.Clipboard(id="table_copy", style={"fontSize":20}),
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
        )
    ]
)


@app.callback(
    Output("table_copy", "content"),
    Input("table_copy", "n_clicks"),
    State("table", "data"),
)
def custom_copy(_, data):
    dff = pd.DataFrame(data)
    # See options for .to_csv() or .to_excel() or .to_string() in the  pandas documentation
    return dff.to_csv(index=False)  # includes headers

if __name__ == "__main__":
    app.run_server(debug=True)

Here is the Before and After:

---