[BUG] Confusing Copy Selection Implementation in DataTable

[ForsakenRei]

Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context Python: 3.11.6 Dash: 2.14.1 App host: Oracle Linux 9 User OS: Windows 10 Browser: Chrome Version: 119

Describe the bug

When copy from datatable cells, no matter what is selected, context menu copy or Ctrl C will always copy the whole cell instead of what is selected. Though Chrome can capture what is selected and shows in the "Search in Google for xxx" but copy will give you the full content of that cell.

BTW I found by default the selection highlight is transparent so you cannot see what is selected. Here's a minimum example to reproduce the bug(or feature?). app.py

import dash
import pandas as pd
from dash import html
from dash.dash_table import DataTable

url = "https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv"
df = pd.read_csv(url, nrows=10)
columns = [{"name": col, "id": col,} for col in df.columns]

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        DataTable(
            columns=columns,
            data=df.to_dict("records"),
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8050)

and style.css in assets folder otherwise you cannot see what is selected.

.unfocused.selectable::selection {
    background-color: lightblue !important;
}

Expected behavior

When there is selected part of the cell content, such as some text/number, copy should only copy the selected portion?

Screenshots

If you hit copy or Ctrl C, then paste or Ctrl V, you will get Debt resulted from identity theft (plus a line break) instead of resulted from identity.

[Coding-with-Adam]

Thanks for reporting this, @ForsakenRei I was able to replicate the issue with your code and css. I can see the advantage of being able to copy only part of the cell. Unfortunately, I don't think this is possible with the Dash DataTable. However, if you are able to switch to Dash Ag Grid, you would be able to copy only parts of the cell.

To activate the text selection feature in Dash Ag Grid, you would need to add this line of code: dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True}.

Here's the full code:

from dash import Dash, html
import dash_ag_grid as dag
import pandas as pd

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

app = Dash(__name__)

columnDefs = [
    { 'field': 'country' },
    { 'field': 'pop', 'headerName': 'Population'},
    { 'field': 'lifeExp', 'headerName': 'Life Expectancy'},
]

grid = dag.AgGrid(
    id="getting-started-headers",
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
    dashGridOptions={"enableCellTextSelection": True, "ensureDomOrder": True},
)

app.layout = html.Div([grid])

if __name__ == "__main__":
    app.run(debug=True)

[ForsakenRei]

Thanks, I assume if copy selection is not archivable in DataTabe(at least in current stage), the transparent selection highlight is a decision to reduce confusion of related behaviors. Really hard to say it's a bug or feature lol. Will there be any possibility that this copy behavior will change in the future for DataTable?

BWT AG-Grid looks really cool and modern. Though glance through the doc I realized one of the features in my current app, multi-selection filter is a paid feature, I guess I can still somehow implement it but just not the native way...

[AnnMarieW]

multi-selection filter is a paid feature

The Set Filter in AG Grid is a paid feature, but DataTable does not have that feature. All the DataTable filters should be available in AG Grid community.

If you would like to post an example on the Dash Community Forum I could help you upgrade from DataTable to Dash AgGrid :slightly_smiling_face:

[ForsakenRei]

multi-selection filter is a paid feature

The Set Filter in AG Grid is a paid feature, but DataTable does not have that feature. All the DataTable filters should be available in AG Grid community.

If you would like to post an example on the Dash Community Forum I could help you upgrade from DataTable to Dash AgGrid 🙂

Yeah I tried AgGrid and it looks really good. In my app I implemented some dropdown multi-select filters with DataTable, which I assume should work with AgGrid as well. Though my OCD will probably drive me nuts if the filter and tables looks quite different when sitting side by side lol.

Anyway if I need help I will definitely post in Dash community, thanks!