Editable column in dash data table does not suppport paste option

Hi Everyone, I made a dashboard for taking feedback about data point from client. I have populated the data through dash data table and added an editable column to recieve feedback. There are multiple records for which the client want to provide the same feedback. Unfortunately he has to type the same thing again and again as Ctrl V (paste) is not working. The text are being able to be copied to clipboard but pasting into that editable column is not supported.Is there any workaround for this? Any help/guidance please

Hi @anuj_tiwari and welcome to the dash community :slight_smile:

hmm, that sounds odd. The copy and paste seems to work fine on both Firefox and Chrome when I tried it with the first example on this page: Editable DataTable | Dash for Python Documentation | Plotly

Can you make a reproducible example?

Hi @AnnMarieW, Thank you for the reply. Please find below an example code where I am not able to Ctrl+V(paste) in the ‘feedback’ column and the browser is Chrome.

import dash #(version 1.9.1) pip3 install dash==1.9.1
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table-dropdown',
        data=df.to_dict('records'),     #the contents of the table
        columns=[
            {'id': 'feedback', 'name': 'feedback', 'presentation':'input','editable': True},
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown','editable': True},
            {'id': 'temperature', 'name': 'temperature','editable': True},
            {'id': 'city', 'name': 'city', 'presentation': 'dropdown','editable': True},
        ],

        dropdown={                      #dictionary of keys that represent column IDs,
            'climate': {                #its values are 'options' and 'clearable'
                'options': [            #'options' represents all rows' data under that column
                    {'label': i, 'value': i}
                    for i in df['climate'].unique()
                ],

                'clearable':True
            },
            'city': {
                'options':[
                    {'label': 'NYC', 'value': 'NYC'},
                    {'label': 'Miami', 'value': 'Miami'},
                    {'label': 'Montreal', 'value': 'Montreal'}
                ],

                'clearable':False
            }
        }
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True,use_reloader=False)

@anuj_tiwari

Thanks for the example, that was really helpful.

You’re right - if you set "editable": True on the column level only, then the copy and paste doesn’t work. (This looks like a bug)

However if you set editable=True for the table, then it works fine, so this can be a workaround. Since all your columns are editable, then it’s actually a little easier to do it this way.

ersion 1.9.1) pip3 install dash==1.9.1
import dash_html_components as html
import dash_table
import pandas as pd
from collections import OrderedDict


app = dash.Dash(__name__)

df = pd.DataFrame(OrderedDict([
    ('climate', ['Sunny', 'Snowy', 'Sunny', 'Rainy']),
    ('temperature', [13, 43, 50, 30]),
    ('city', ['NYC', 'Montreal', 'Miami', 'NYC'])
]))


app.layout = html.Div([
    dash_table.DataTable(
        id='table-dropdown',
        data=df.to_dict('records'),     #the contents of the table
        columns=[
            {'id': 'feedback', 'name': 'feedback', 'presentation':'input'},
            {'id': 'climate', 'name': 'climate', 'presentation': 'dropdown'},
            {'id': 'temperature', 'name': 'temperature'},
            {'id': 'city', 'name': 'city', 'presentation': 'dropdown'},
        ],
        editable=True,

        dropdown={                      #dictionary of keys that represent column IDs,
            'climate': {                #its values are 'options' and 'clearable'
                'options': [            #'options' represents all rows' data under that column
                    {'label': i, 'value': i}
                    for i in df['climate'].unique()
                ],

                'clearable':True
            },
            'city': {
                'options':[
                    {'label': 'NYC', 'value': 'NYC'},
                    {'label': 'Miami', 'value': 'Miami'},
                    {'label': 'Montreal', 'value': 'Montreal'}
                ],

                'clearable':False
            }
        }
    ),
])

if __name__ == '__main__':
    app.run_server(debug=True)

@AnnMarieW I am sorry for confusion, All the columns are not editable.Anyone can edit the entry that way. Only the ‘Feedback’ column needs to be editable. Any workaround for that please?

Yes - make the whole table editable like in the example I provided, then set "editable": False for each of the columns (except Feedback)

works like a charm. Thank you so much!

1 Like

@AnnMarieW There is one more issue I am facing here. The dropdown still does not support copy paste i.e by setting editable = ‘true’ for climate(which is a dropdown), it should allow me to copy the content say ‘Sunny’ and paste it into ‘Snowy’ through CTRL+C and CTRL+V

@AnnMarieW can you please help/advise?

@anuj_tiwari sorry, I don’t think I can be much help. It’s either not supported or might be a bug, and I can’t think of a workaround. :thinking:

@AnnMarieW There is one more concern with this workaround. Whenever I manually select a part of text in a single cell of DataTable, and try to copy it to clipboard (by using ctrl+c), the whole content of that cell is copied. How can we achieve to copy just a selected part of a cell content?