[data grid] Implement Clipboard import

[oliviertassinari]

Summary

Copy and paste data between an Excel sheet and a Data Grid.

Benchmark

• https://demos.telerik.com/kendo-ui/grid/copy-to-excel
• https://ag-grid.com/javascript-grid-clipboard/
• https://ej2.syncfusion.com/react/documentation/grid/clipboard/
• https://tabulator.info/docs/5.4/clipboard#paste
• https://shlomiassaf.github.io/ngrid/features/built-in-plugins/clipboard

[simoami]

Bidirectional compatibility with Excel clipboard data is desired. That is copy from Excel, paste in the data grid and vice versa.

[AJMoores]

Would love to see the ability to copy a particular cell or entire column to clipboard.

[oliviertassinari]

We have recently done an iteration in #1929. What we seem we still have to do on what we have already built (ignoring what's we could build next):

• Document the existing implementation in https://material-ui.com/components/data-grid/export/#clipboard
• Reevaluate the feature split. Maybe copy -> Pro, paste -> Premium?
• Copy when the focus is in a cell doesn't do anything. Shouldn't it copy the content of the focused cell?

[Mahdi-Matar96]

Would love to see the ability to copy a particular cell or entire column to clipboard.

[mattyb]

Would love to see copy prioritized over paste.

[sean-peters-au]

We would love this too! Both copy and paste!

[zzZCodeZzz]

Would be real nice

[ohechtl]

I'd love to use this feature, both copy and paste as well!

[samborambo305]

This would be a massive upgrade to data grid

[samborambo305]

@oliviertassinari do you anticipate that this feature will have full copy and paste functionality across multiple selected cells? This would be similar to: https://ag-grid.com/javascript-data-grid/clipboard/ that you mentioned in the benchmark?

[samborambo305]

/ Is there any way to pay to have this implemented sooner?

[mdarifmustafa]

upvote for feature.

[markwindsorr]

Is this going to be released. Anyone can recommend a library that has this feature? Thanks

[dnvMarcLeBlanc]

Any update on this feature?

[exisapra]

updates?

[cherniavskii]

You can check out the preview of the feature in #7389
Feedback is welcome!

[FlorianCassayre]

Hi, will this be included in the community version or the closed-source one?

[cherniavskii]

@FlorianCassayre Clipboard import is a Premium feature and will not be included in the Community plan

[gotexis]

I have a raw solution in case anyone is interested. https://gist.github.com/gotexis/34ed4ba97317303acb233e4cbb035725

[dep]

Quick and dirty "copy table to clipboard" js:

<button id="copyButton">Copy to Clipboard</button>
<script>
  function copyToClipboard(text) {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
  }

  function getTableData() {
    const rows = document.querySelectorAll(".MuiDataGrid-row");
    let data = "";

    rows.forEach((row) => {
      const cells = row.querySelectorAll(".MuiDataGrid-cellContent");
      cells.forEach((cell, index) => {
        data += cell.textContent;
        if (index < cells.length - 1) data += "\t";
      });
      data += "\n";
    });

    return data;
  }

  document.getElementById("copyButton").addEventListener("click", () => {
    const tableData = getTableData();
    copyToClipboard(tableData);
    alert("Data copied to clipboard");
  });
</script>

[oliviertassinari]

The link to the docs for this feature: https://mui.com/x/react-data-grid/clipboard/#clipboard-paste. It was released in v6.4.0 https://github.com/mui/mui-x/releases/tag/v6.4.0

[dep]

Also it might not be immediately obvious, but click/drag/select works, you just need to start within the table, not outside of it.

[dep]

@oliviertassinari It's not explicitly stated in the docs, but is Clipboard Copy a Premium-only feature?

[oliviertassinari]

but is Clipboard Copy a Premium-only feature?

@dep It's open source per https://mui.com/pricing/

However, I agree with you, it's confusing, a new issue #9725

[dep]

I do see that it is indeed a Community / Pro feature, thanks!

Unfortunately when I try to use 6.10.0 of DataGridPro per these instructions, I'm not having any luck being able to drag/select rows to copy:

<DataGridPro
  disableRowSelectionOnClick
  unstable_cellSelection
  ignoreValueFormatterDuringExport
  autoHeight
  rows={data.rows.slice(0, nbRows)}
  {...data}
/>

Desired result:

Actual result:

[dep]

It almost looks like, from here that selecting cells is a premium-only feature:

On the DataGridPremium, you can also enable the ability to select cells with the unstable_cellSelection prop.

[dep]

It looks like cellSelection must fall into the "Range Selection" bucket. Another row for "Cell Selection" might help clarify:

[oliviertassinari]

It looks like cellSelection must fall into the "Range Selection" bucket. Another row for "Cell Selection" might help clarify:

@dep Ah yes, it's the same thing, fixed in mui/material-ui#38029.