[data grid] Add new rows on paste

[jamiedruce]

Summary

It would be great if pasting data into DataGrid could add additional rows if the length of copied data exceeds the selected rows.

So if I copied 5 rows, and selected the last row in a DataGrid, it would replace the selected row with the first row of copied data, and then add an additional 4 rows to complete the full clipboard import.

Obviously this wont be for everyone, so ideally would be enabled with a flag

Examples

No response

Motivation

Our use case typically involves adding a number of rows at a time, which may come from external sources.

Currently, If someone wanted to paste in 10 new rows, they would need to first add ten new blank lines, and then paste in the data.

Search keywords: datagrid
Order ID: 76116

[michelengelen]

That's indeed an interesting use case.
I guess you can do this via a combination of splitClipboardPastedText (Format of the clipboard data) and onClipboardPasteStart

The order of execution is

1. splitClipboardPastedText
2. onClipboardPasteStart
3. onClipboardPasteEnd (probably not needed in this case)

So with the first you can split the text into arrays, then in the second step you can add rows programmatically and fill them with the data.

I do think we could keep this as a feature request though so the implementation does not have to be that complex. A prop like addRowsForExcessPastedData or something similar.

Thoughts @joserodolfofreitas @mui/xgrid ?

[ikitommi]

I would really like to have this too. Or an example on how to do it if it's possible already.

[michelengelen]

There could be a workaround similar to what we did in #15114

it could look something like this: Codesandbox demo

const handleBeforeClipboardPaste: DataGridPremiumProps['onBeforeClipboardPasteStart'] = ({
  data,
}) => {
  console.log(data.length);
  if (data.length === 0) {
    console.log('no data to paste');
    return Promise.resolve();
  }
  const selectedRowsCount = apiRef.current.getSelectedRows().size;
  // you need to have a function that will take the data from the clipboard and create a row object
  const newRows = parseDataIntoRows(data);
  const rowsToAdd = newRows.slice(selectedRowsCount);
  apiRef.current.updateRows(rowsToAdd);
  // we need to reject, because otherwise we will also override the selected rows with the values in the clipboard
  return Promise.resolve();
};

Please consider this a workaround and needs adjustment to fit your use case