Clipboard

Clipboard support uses native browser copy, cut, and paste events.

Copy

Copy, cut, and paste use the native browser clipboard events, so no clipboard-write permission prompt appears for copy or cut. Selecting a range and pressing Ctrl/Cmd+C writes two formats to the system clipboard:

• text/plain — tab-separated values (TSV), one row per line. A cell that contains a tab, newline, or quote is quoted, with the quote doubled internally, matching the TSV quoting of Excel and Sheets.
• text/html — an HTML <table> with the raw value of each cell stashed in data-* attributes. So a paste back into gridcn recovers the exact typed values, not only their display text, while a paste into a real spreadsheet app still gets a normal table.

Paste

Pasting parses HTML first, when the clipboard has a text/html payload, for example when you paste from another gridcn instance, Excel, Sheets, or Numbers. It falls back to a quoted-TSV parser for plain-text sources. The quoted-TSV parser is a small state machine, not a naive split("\t"), and it correctly handles quoted cells that contain tabs, newlines, and embedded quotes.

Paste semantics:

• Anchored expand — pasting an N×M block starting at the active cell overwrites that N×M region.
• Single-row tiling down a selection — pasting one row into a taller selected range repeats it down every row.
• Pasted text runs through the fromText of each target cell type, then through validate if present. An invalid cell in the pasted block is rejected the same way as a manual edit.
• One paste produces one onDataChange call with a single ops batch, regardless of how many cells it touched.

Escape hatches

Three DataGridProvider props let you intercept the pipeline without forking it.

import type { ColumnDef } from "@/components/data-grid/data-grid";

// Module scope (or useCallback) so identity stays stable across renders.
function processCellForClipboard(value: unknown, { row, column }: { row: Row; column: ColumnDef<Row, unknown> }) {
  // override what gets copied for this cell; falls back to the cell type's toText
  return String(value);
}

function processCellFromClipboard(text: string, { row, column }: { row: Row; column: ColumnDef<Row, unknown> }) {
  // override how pasted text becomes a value; falls back to the cell type's fromText
  return text.trim();
}

function processPaste(cells: string[][]) {
  // runs on the whole parsed paste grid before it's applied; return false to veto entirely
  return cells;
}

<DataGridProvider
  processCellForClipboard={processCellForClipboard}
  processCellFromClipboard={processCellFromClipboard}
  processPaste={processPaste}
  {...grid}
  columns={columns}
/>

Context menu paste

Known limitations