Cell text selection

By default the grid has cell-range selection (drag across cells, range highlight, copy as TSV). Standard browser text-selection inside a cell is not the default - clicking-and-dragging across a cell creates a range selection, not a text selection.

Enable browser text selection

If your users need to copy a substring from a single cell (e.g. an email address that's wider than the cell), turn off cell-range selection for that part of the grid. The simplest scope is "everywhere":

<SvGrid
  {data} {columns} features={{}}
  selectionMode="row"            <!-- disables cell-range, keeps row selection -->
/>

Or surgically, per cell, render the value in a <span> whose user-select overrides the grid's:

{
  field: 'email',
  cell: (ctx) => renderSnippet(SelectableEmail, { value: String(ctx.getValue()) }),
}

{#snippet SelectableEmail(p: { value: string })}
  <span style="user-select: text;">{p.value}</span>
{/snippet}

Copy current value

Ctrl/Cmd+C with a cell range selection copies all selected cells as TSV. With a single cell, the value is copied as a TSV scalar (no tab, no newline).

To copy just the displayed text of a single cell without entering range selection, switch to a selectionMode="row" and use the row checkbox column + Ctrl/Cmd+C to copy entire rows.

Multiple ranges (Ctrl/Cmd+drag to add rectangles) all copy together, stacked as separate TSV blocks.

Copy with headers / transform on copy

<SvGrid
  {data} {columns}
  copyHeadersToClipboard          <!-- prepend the column labels to each copied range -->
  processCellForClipboard={({ value, columnId }) =>
    columnId === 'salary' ? String(value).replace(/[$,]/g, '') : value}
/>

processCellForClipboard runs per cell on its way to the clipboard - strip currency symbols, expand codes to labels, redact, etc. clipboardHtml runs once per copy with the rectangles and the assembled text, and returns an HTML table to put on the clipboard beside it, so a spreadsheet pasting the copy gets formats too; onPasteClipboard is its inbound half. Both are described under Paste Special.

Gotchas

• A grid in selectionMode='cell' swallows mouse selection inside cells - drag only creates a rectangle selection, never a browser text selection.
• A grid in selectionMode='both' (default) does too - the cell selection layer takes precedence.

More examples

Selection API + events

Drive cell selection with api.selectCells / api.getSelected; subscribe to changes via onCellSelectionChange. Live SUM/AVG/MIN/MAX panel + event log + copy-as-TSV.

Range selection (Excel-style)

Drag any rectangle of cells, or Ctrl/Cmd+drag to add MORE ranges - all stay highlighted and copy together. Toolbar issues common ranges; live SUM/AVG/MIN/MAX/COUNT status bar; copy as TSV.

The active cell stays where a range started. A drag, a Shift+click or Shift+Arrow grows the range from its far corner and leaves the active cell at the anchor, as in Excel: it is the cell the next keystroke edits and the one a formula bar shows, and it is drawn without the range tint. The next Shift+Arrow continues from the far corner, not from the active cell. A command that extends the selection reads that corner from selectionFocus on its command context.

See also

• Selection demo
• Custom cells