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.
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.
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...
)