You can use the <code>dcc.Clipboard<code> component or use the browser’s text selection to save data from the grid to the browser’s clipboard.
To copy to the browser clipboard using a dcc.Clipboard
component, use the component’s content
property as an Output
on a callback and return the data to be copied.
In the following example, when you select a row and then select the “Copy Selected” button, the callback runs. Within the callback, we get the state of the currently selectedRows
, create a dataframe based on it, format the data as a string, and output that to the clipboard.
You could also format the data in other ways, for example, with to_markdown
, to_csv
or to_excel
. See the pandas docs for more information. Note - do not use the pandas to_clipboard
function because it copies to the server’s clipboard and will fail in production.
import pandas as pd
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, callback
import plotly.express as px
df = px.data.gapminder()
app = Dash(__name__)
columnDefs = [
{
"headerName": "Country",
"field": "country",
"checkboxSelection": True,
"headerCheckboxSelection": True,
},
{"headerName": "Continent", "field": "continent"},
{"headerName": "Year", "field": "year"},
{"headerName": "Life Expectancy", "field": "lifeExp"},
]
app.layout = html.Div(
[
html.Span("Copy selected "),
dcc.Clipboard(id="clipboard", style={"display": "inline-block"}),
dag.AgGrid(
id="clipboard-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"resizable": True, "sortable": True, "filter": True},
dashGridOptions={"rowSelection": "multiple"},
),
dcc.Textarea(
placeholder="Copy rows from the grid above and paste here to see the clipboard contents",
id="clipboard-output",
style={"width": "100%", "height": 200},
),
],
style={"margin": 20},
)
@callback(
Output("clipboard", "content"),
Input("clipboard", "n_clicks"),
State("clipboard-grid", "selectedRows"),
)
def selected(n, selected):
if selected is None:
return "No selections"
dff = pd.DataFrame(selected)
dff = dff[["country", "continent", "year", "lifeExp"]]
return dff.to_string()
if __name__ == "__main__":
app.run(debug=True)
In the following example, we also use the column’s state when formatting the clipboard data. Try changing the column order (by clicking on a column heading and dragging it to a new position), then select some rows and click the “Copy Selected” button. Paste your selection into the Textarea
below the grid and you’ll see the columns in the pasted data are in the same order as in the grid.
import pandas as pd
import dash_ag_grid as dag
from dash import Dash, html, dcc, Input, Output, State, no_update, callback
import plotly.express as px
df = px.data.gapminder()
app = Dash(__name__)
columnDefs = [
{
"headerName": "Country",
"field": "country",
"checkboxSelection": True,
"headerCheckboxSelection": True,
},
{"headerName": "Continent", "field": "continent"},
{"headerName": "Year", "field": "year"},
{"headerName": "Life Expectancy", "field": "lifeExp"},
]
app.layout = html.Div(
[
html.Span("Copy Selected "),
dcc.Clipboard(id="clipboard-state", style={"display": "inline-block"}),
dag.AgGrid(
id="clipboard-state-grid",
columnDefs=columnDefs,
rowData=df.to_dict("records"),
columnSize="sizeToFit",
defaultColDef={"resizable": True, "sortable": True, "filter": True},
dashGridOptions={"rowSelection": "multiple"},
),
dcc.Textarea(
placeholder="Copy rows from the grid above and paste here to see the clipboard contents",
id="clipboard-state-output",
style={"width": "100%", "height": 200},
),
],
style={"margin": 20},
)
@callback(
Output("clipboard-state", "content"),
Input("clipboard-state", "n_clicks"),
Input("clipboard-state-grid", "columnState"),
State("clipboard-state-grid", "selectedRows"),
prevent_initial_call=True,
)
def selected(n, col_state, selected):
if selected is None:
return "No selections"
if col_state is None:
return no_update
dff = pd.DataFrame(selected)
# get current column order in grid
columns = [row["colId"] for row in col_state]
dff = dff[columns]
return dff.to_string()
if __name__ == "__main__":
app.run(debug=True)
If you want to use the browser’s regular text selection, which allows copying within cells, add the following to dashGridOptions
:
dag.AgGrid(
dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True},
# other props...
)
import dash_ag_grid as dag
from dash import Dash, html, dcc
import pandas as pd
df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/solar.csv")
app = Dash(__name__)
grid = dag.AgGrid(
id="clipboard-example-3",
rowData=df.to_dict("records"),
columnDefs=[{"field": i} for i in df.columns],
columnSize="sizeToFit",
defaultColDef={"minWidth": 125},
dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True},
)
textarea = dcc.Textarea(
placeholder="Copy from the grid above and paste here to see the clipboard contents",
style={"width": "100%", "height": 200},
)
app.layout = html.Div(
[grid, textarea],
style={"margin": 20},
)
if __name__ == "__main__":
app.run(debug=True)