Copying to the Clipboard

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.

Copying Selected Rows

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.

Using Column State with the Clipboard

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.

Regular Text Selection

If you want to use the browser’s regular text selection, which allows copying within cells, add the following to dashGridOptions:

    dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True},
    # other props...