Clipboard
Built-in copy/paste, TSV format, and per-column copy/paste overrides.
The grid owns a clipboard controller. Ctrl+C and Ctrl+V work automatically on a focused grid — no wiring required. The programmatic API below lets you trigger the same behavior from a toolbar button or an external trigger.
// Copy whatever the user currently has selected
await api.copySelectedRange();
// Copy an explicit visual-index range (rows 0–4, columns 1–3)
await api.copyRange(0, 4, 1, 3);
// Paste TSV from the system clipboard into the current selection anchor
await api.pasteFromClipboard();Format
Copied data is TSV (tab-separated values) — compatible with Excel and Google Sheets by default. Each cell is
copied as its column's text: its format (or its display's), else the raw value. Pasted text is read back through
each column's parse: column types set both, so a currency, a date or an option copied out of the grid pastes back
as the same value. Text a column cannot read is refused and reported (writeBlocked); the rest of the paste lands.
The text pair
format is how a value reads as text; parse reads text back as a value. Set both for a column of your own:
import type { ColumnDef } from '@witbybit/wit-grid-react';
interface OrderRow {
id: string;
price: number;
}
const columns: ColumnDef<OrderRow>[] = [
{
field: 'price',
header: 'Price',
// Shown and copied: "$149.99"
format: ({ value }) => `$${Number(value).toFixed(2)}`,
// Pasted or typed: "$149.99" or "149.99"; anything else is refused
parse: ({ text }) => {
const amount = Number(text.replace(/^\$/, ''));
return text.trim() === '' ? null : Number.isFinite(amount) ? amount : undefined;
},
},
];A different clipboard format altogether (JSON, HTML) is the copy and paste commands composed
(compose.commands).
Events
import { GridEventName } from '@witbybit/wit-grid-react';
api.on(GridEventName.cellsCopied, ({ payload }) => {
console.log(`Copied ${payload.rowCount}×${payload.colCount} cells`);
});
api.on(GridEventName.cellsPasted, ({ payload }) => {
console.log(`Pasted ${payload.rowCount}×${payload.colCount} cells`);
});See Events for the full generated payload shapes.
Last updated on