Dash DataTable mark- and copyable

Dash Python
1

Is there a setting to DataTable that would allow it to be selectable in such a way that one can mark and copy the text from single or even multiple cells as text.

2

@luggie

editable=True

https://dash.plotly.com/datatable/reference

3

thanks for your help but that’s not what I was looking for. I’d like to have a function that sort of like shows the table as a completely static text like this:

header1 | header2
------------Âą------------
content1 | content2

that one can simply mark and copy to have the text ‘header1 header2 content1 content2’ in clipboard

4

I don’t know :woozy_face:

But I’m sure that @AnnMarieW will give you a right answer.

5

Hi @luggie

I’m not sure if this is the “right answer”, but thanks for the vote of confidence @Eduardo :slight_smile:

The following seems to work pretty well. It uses pandas .to_clipboard()

import dash
import dash_table
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd

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

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Button("copy", id="copy"),
        dash_table.DataTable(
            id="table",
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict("records"),
            cell_selectable=True,
        ),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("output", "children"),
    Input("copy", "n_clicks"),
    State("table", "start_cell"),
    State("table", "end_cell"),
    State("table", "derived_virtual_data"),
)
def copy_to_clipboard(n, start, end, data):
    if start is None:
        return dash.no_update
    dff = pd.DataFrame(data)
    copy_cells = dff.loc[
        start["row"] : end["row"], start["column_id"] : end["column_id"]
    ]
    copy_cells.to_clipboard(excel=False, index=False)


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

hehe sneaky little workaround but it perfectly serves my requirements. Thanks heaps!

For anyone also trying to do the same I think it is worth mentioning, that to_clipboard omits all **kwargs to to_csv with which you e.x. avoid column names being copied with header=False

Also in your example, you forgot to

import dash_html_components as html

7

oops on the html - thanks

There are a bunch of options in the pandas .to_clipboard which makes it easy to copy to excel too.

In other news, I just did a pull request to add a Clipboard component! See it here

1 Like
8

It’s a demonstration that is better to know where to find the answer rather than knowing the answer :smiley:

@AnnMarieW know everything about dash data tables. :grinning:

9

Haha - not exactly, but I seem to learn new things about DataTable with every project :blush:

10

does this solution work in dash 1.20.0?

11

Hi @lanchab

The short answer is yes. and no.

I just ran the code with 1.20 and is still works, however, I learned while working on the pull request for the new dcc.Clipboard component that my “sneaky little workaround” (as @luggie called it) that used pandas.to_cliboard() works locally but will fail in production – because it will copy to the server’s clipboard rather than the client’s. :woman_facepalming:

Good news is that the new Clipboard component will be in the next release and will solve that problem. :confetti_ball:

12

Thanks!
Do you happen to know when that release is coming?

13

I’m not sure exactly when, but it should be “soon” according to this post announcing plotly.py 5.0.0 from a few days ago.

What about Dash?

Plotly.py is always backwards-compatible with Dash , with the caveat that the version of Plotly.js being used in an app must be greater than or equal to the version of Plotly.js used in Plotly.py in order to exploit all the latest features.

Version 5.0 of Plotly.py is based on version 2.1 of Plotly.js, whereas the latest version of Dash is 1.20.0, which is based on Plotly.js 1.58.4. This means that new rendering features like the icicle charts, bar patterns and legend ranks will not be usable in Dash until the next release of Dash, or unless a 2.1 JS bundle is placed in the app’s assets directory . The next version of Dash will have Plotly.js 2.1 built-in and is expected in the coming days.