copy-paste functionality in an editable DataGrid

[jgunstone]

Problem

ref: https://lumino.readthedocs.io/en/latest/examples/datagrid/index.html

copy and pasting between cells isn't generally supported for DataGrid.

see marked up image:

• for the columns highlighted in green, it is possible to cntrl+c a cell, this successfully copies the cell value, and this can be cntrl+v pasted into another compatible cell.
• for the columns highlighted in red, cntrl+c does not copy the cell value value, and therefore copy pasting is not supported
• for all of the columns, it is not possible to cntrl+c copy a cell and paste it into a range of compatible cells. this is extremely powerful functionality when manually editing grid data.

Proposed Solution

It would be awesome if:

• copy + pasting from one cell to many is supported
• copy + pasting between compatible dtype cells is supported for all dtypes

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[krassowski]

Sounds like a good enhancement idea. If anyone wants to take a stab, the copy function is implemented here:

lumino/packages/datagrid/src/datagrid.ts

Lines 1741 to 1913 in f85aad4

	/**
	* Copy the current selection to the system clipboard.
	*
	* #### Notes
	* The grid must have a data model and a selection model.
	*
	* The behavior can be configured via `DataGrid.copyConfig`.
	*/
	copyToClipboard(): void {
	// Fetch the data model.
	let dataModel = this._dataModel;
	// Bail early if there is no data model.
	if (!dataModel) {
	return;
	}
	// Fetch the selection model.
	let selectionModel = this._selectionModel;
	// Bail early if there is no selection model.
	if (!selectionModel) {
	return;
	}
	// Coerce the selections to an array.
	let selections = Array.from(selectionModel.selections());
	// Bail early if there are no selections.
	if (selections.length === 0) {
	return;
	}
	// Alert that multiple selections cannot be copied.
	if (selections.length > 1) {
	alert('Cannot copy multiple grid selections.');
	return;
	}
	// Fetch the model counts.
	let br = dataModel.rowCount('body');
	let bc = dataModel.columnCount('body');
	// Bail early if there is nothing to copy.
	if (br === 0 || bc === 0) {
	return;
	}
	// Unpack the selection.
	let { r1, c1, r2, c2 } = selections[0];
	// Clamp the selection to the model bounds.
	r1 = Math.max(0, Math.min(r1, br - 1));
	c1 = Math.max(0, Math.min(c1, bc - 1));
	r2 = Math.max(0, Math.min(r2, br - 1));
	c2 = Math.max(0, Math.min(c2, bc - 1));
	// Ensure the limits are well-orderd.
	if (r2 < r1) [r1, r2] = [r2, r1];
	if (c2 < c1) [c1, c2] = [c2, c1];
	// Fetch the header counts.
	let rhc = dataModel.columnCount('row-header');
	let chr = dataModel.rowCount('column-header');
	// Unpack the copy config.
	let separator = this._copyConfig.separator;
	let format = this._copyConfig.format;
	let headers = this._copyConfig.headers;
	let warningThreshold = this._copyConfig.warningThreshold;
	// Compute the number of cells to be copied.
	let rowCount = r2 - r1 + 1;
	let colCount = c2 - c1 + 1;
	switch (headers) {
	case 'none':
	rhc = 0;
	chr = 0;
	break;
	case 'row':
	chr = 0;
	colCount += rhc;
	break;
	case 'column':
	rhc = 0;
	rowCount += chr;
	break;
	case 'all':
	rowCount += chr;
	colCount += rhc;
	break;
	default:
	throw 'unreachable';
	}
	// Compute the total cell count.
	let cellCount = rowCount * colCount;
	// Allow the user to cancel a large copy request.
	if (cellCount > warningThreshold) {
	let msg = `Copying ${cellCount} cells may take a while. Continue?`;
	if (!window.confirm(msg)) {
	return;
	}
	}
	// Set up the format args.
	let args = {
	region: 'body' as DataModel.CellRegion,
	row: 0,
	column: 0,
	value: null as any,
	metadata: {} as DataModel.Metadata
	};
	// Allocate the array of rows.
	let rows = new Array<string[]>(rowCount);
	// Iterate over the rows.
	for (let j = 0; j < rowCount; ++j) {
	// Allocate the array of cells.
	let cells = new Array<string>(colCount);
	// Iterate over the columns.
	for (let i = 0; i < colCount; ++i) {
	// Set up the format variables.
	let region: DataModel.CellRegion;
	let row: number;
	let column: number;
	// Populate the format variables.
	if (j < chr && i < rhc) {
	region = 'corner-header';
	row = j;
	column = i;
	} else if (j < chr) {
	region = 'column-header';
	row = j;
	column = i - rhc + c1;
	} else if (i < rhc) {
	region = 'row-header';
	row = j - chr + r1;
	column = i;
	} else {
	region = 'body';
	row = j - chr + r1;
	column = i - rhc + c1;
	}
	// Populate the format args.
	args.region = region;
	args.row = row;
	args.column = column;
	args.value = dataModel.data(region, row, column);
	args.metadata = dataModel.metadata(region, row, column);
	// Format the cell.
	cells[i] = format(args);
	}
	// Save the row of cells.
	rows[j] = cells;
	}
	// Convert the cells into lines.
	let lines = rows.map(cells => cells.join(separator));
	// Convert the lines into text.
	let text = lines.join('\n');
	// Copy the text to the clipboard.
	ClipboardExt.copyText(text);
	}