Add new rows (expand table) on Paste

[amiregelz]

trafficstars

Currently, I need to add new rows and only then I can paste into them. Is there any way to add new rows automatically on Paste?

[jassmith]

There is an open API question to be had here. Currently you can do this via listening to the onPaste event and seeing that it goes out of bounds and adding the new rows to your data source.

This could be made slightly easier by having the data grid call onRowAppended and then onCellEdited for each now row with the pasted values. This would definitely need to be opt in behavior as large paste buffers would have hugely damaging impacts.

[fakob]

... Currently you can do this via listening to the onPaste event and seeing that it goes out of bounds and adding the new rows to your data source.

I was trying to solve this based on your comment.

• I am listening to the onPaste event
• I am calculating the rows I have to extend my data source with
• I am extending my data source, but as my datasource is a prop, I use setState which is asynchronous. Therefore, the source is not yet extended when returning true from the onPaste callback.

Is there a way to re-trigger onPaste after the datasource has been extended? Otherwise I would have to return false and write a custom paste/merge function which will definitely not be as sophisticated as yours.

[amiregelz]

@jassmith Any chance this can be added?

[amiregelz]

@jassmith Bumping :)

[jassmith]

So this is actually a lot harder than I first anticipated. The problem is pretty much that while I can emit the "hey add these rows" events, things get pretty hairy after that point because its going to quickly want to tell you to write to data. Logically then I think the new onRowsAppended callback would need to be an all in one type thing. It would in effect tell you "hey there are new rows, no you cant control where they go, and here is the data in them."

I hate this because it doesn't use the existing callbacks and just puts more work on authors to get the behavior they want. We cant use the existing onRowAppended callback because the implementor cant place the row at not the end in this case.

Im stuck...

[50kudos]

I found this works, perf sounds ok (pasting 20k rows takes about 3 secs) . Would love to eliminate unnecessary re-renders if this logic can be tweaked/implemented internally.

const gridRef = useRef<DataEditorRef>(null);
const [maxRow, setMaxRow] = useState<number>(data.length || 30);

<DataEditor
  ref={gridRef}
  onCellsEdited={saveRowsData}
  rows={maxRow}
  onPaste={([colidx, rowidx], values) => {
    if (rowidx + values.length - 1 > maxRow) {
      setMaxRow(rowidx + values.length + 1);
      gridRef.current?.emit("paste");
      return false;
    } else return true;
  }}
  ...