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.

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)

Copy selected

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.

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)

Copy Selected

Regular Text Selection

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)