Copying the contents of vscode-data-grid doesn't preserve the row and column formatting of the data

[jeffb-sfdc]

Describe the bug

Copying the contents of vscode-data-grid doesn't preserve the row and column formatting of the data. We're displaying data in our extension using vscode-data-grid. When a user selects and then copies the contents of the grid, the formatting and order is not preserved. On the other hand, if divs & spans are used, the formatting remains.

To reproduce

1. Start with the vscode-webview-ui-toolkit-samples project (https://github.com/microsoft/vscode-webview-ui-toolkit-samples)
2. Modify main.js (webview-ui/main.js), so the contents of the cells display which row and column they are:

  // line 37
  // Define data grid with custom titles
  const basicDataGridList = document.querySelectorAll(".basic-grid");
  for (const basicDataGrid of basicDataGridList) {
    basicDataGrid.rowsData = [
      {
        columnKey1: "Cell Data (row1, col1)",
        columnKey2: "Cell Data (row1, col2)",
        columnKey3: "Cell Data (row1, col3)",
        columnKey4: "Cell Data (row1, col4)",
      },
      {
        columnKey1: "Cell Data (row2, col1)",
        columnKey2: "Cell Data (row2, col2)",
        columnKey3: "Cell Data (row2, col3)",
        columnKey4: "Cell Data (row2, col4)",
      },
      {
        columnKey1: "Cell Data (row3, col1)",
        columnKey2: "Cell Data (row3, col2)",
        columnKey3: "Cell Data (row3, col3)",
        columnKey4: "Cell Data (row3, col4)",
      },
    ];

3. Modify data-grid.ts (src/panels/demos/data-grid.ts) and add a table comprising of divs and spans:

    // line 14
    <section class="component-example">
      <p>Divs and Spans</p>
      <div class="table">
        <div class="row">
          <span class="col1">A Custom Header Title</span>
          <span class="col2">Custom Title</span>
          <span class="col3">Title Is Custom=</span>
          <span class="col4">Another Custom Title</span>
        </div>

        <div class="row">
          <span class="col1">Cell Data (row1, col1)</span>
          <span class="col2">Cell Data (row1, col2)</span>
          <span class="col3">Cell Data (row1, col3)</span>
          <span class="col4">Cell Data (row1, col4)</span>
        </div>

        <div class="row">
          <span class="col1">Cell Data (row2, col1)</span>
          <span class="col2">Cell Data (row2, col2)</span>
          <span class="col3">Cell Data (row2, col3)</span>
          <span class="col4">Cell Data (row2, col4)</span>
        </div>

        <div class="row">
          <span class="col1">Cell Data (row3, col1)</span>
          <span class="col2">Cell Data (row3, col2)</span>
          <span class="col3">Cell Data (row3, col3)</span>
          <span class="col4">Cell Data (row3, col4)</span>
        </div>
      </div>
    </section>

4. Modify style.css (webview-ui/style.css) and add the following styles. They aren't needed, but it helps with visualizing the rows and columns.

.col1 {
  width: 200px;
  display: inline-flex;
}

.col2 {
  width: 200px;
  display: inline-flex;
}

.col3 {
  width: 150px;
  display: inline-flex;
}

.col4 {
  width: 150px;
  display: inline-flex;
}

5. Run the sample
6. Open the command palette and select "Component Gallery: Show"
7. Scroll to the "Data Grid" section, go to the "With Custom Tiles" grid, then select the text that's within the grid:
8. Copy the text, then paste into a text editor: result:

A Custom Header Title
Custom Title
Title Is Custom
Another Custom Title
Cell Data (row1, col1)
Cell Data (row1, col2)
Cell Data (row1, col3)
Cell Data (row1, col4)
Cell Data (row2, col1)
Cell Data (row2, col2)
Cell Data (row2, col3)
Cell Data (row2, col4)
Cell Data (row3, col1)
Cell Data (row3, col2)
Cell Data (row3, col3)
Cell Data (row3, col4)

On the other hand... 9. Select the text of the grid that was composited from divs and spans: 10. Copy the text, then paste into a text editor: result:

A Custom Header Title Custom Title Title Is Custom Another Custom Title
Cell Data (row1, col1) Cell Data (row1, col2) Cell Data (row1, col3) Cell Data (row1, col4)
Cell Data (row2, col1) Cell Data (row2, col2) Cell Data (row2, col3) Cell Data (row2, col4)
Cell Data (row3, col1) Cell Data (row3, col2) Cell Data (row3, col3) Cell Data (row3, col4)

Expected behavior

When copying/pasting the text of the vscode-data-grid, I expected the results to be formatted like the output of the divs & spans, keeping the row & column formatting.

If this is a bug on my part, please let me know what I am doing wrong and post a fix, so that copying the contents of a vscode-data-grid preserves the row & column formatting.

[daviddossett]

Thanks for letting us know, @jeffb-sfdc. Hawk is on vacation for another week or two so responses may be delayed.

In general, I agree that it would be nice to have the formatting preserved.

[hawkticehurst]

Hey @jeffb-sfdc! As David said, I was on vacation for the last few weeks so thanks for being patient!

I'm also in agreement that preserving formatting when copy-pasting data grid content would be desirable behavior to have.

In the case of changing the underlying HTML template/core behavior of our components, we rely on an upstream dependency for our base unstyled components from another Microsoft project called FAST so we might have to bubble this issue up to them in order to resolve it.

With that said, I know that FAST is changing its programming model pretty significantly in the nearish (?) future so that we (on the toolkit team) will eventually have full control over these details. So to quickly tag in @chrisdholt, do you have any updates on the current timelines for FAST shifting and if it would be better to open an issue in FAST requesting this behavior in the data grid now, or if we should wait for these new changes in FAST cause they're coming sooner versus later?

[jeffb-sfdc]

Thanks for the update! I hope you are able to update the grid control so copy/paste keeps the formatting.