# 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. > Live demo: Selection + copy/paste - https://svgrid.com/demos/04-selection-copy-paste/ ## 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": ```svelte /> ``` Or surgically, per cell, render the value in a `` whose `user-select` overrides the grid's: ```ts { field: 'email', cell: (ctx) => renderSnippet(SelectableEmail, { value: String(ctx.getValue()) }), } ``` ```svelte {#snippet SelectableEmail(p: { value: string })} {p.value} {/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 ```svelte 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](https://svgrid.com/docs/help/cells/paste-find-structure/#the-grids-clipboard-hooks). ## 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. > Live demo: Selection API + events - https://svgrid.com/demos/90-selection-api/ ### 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. > Live demo: Range selection (Excel-style) - https://svgrid.com/demos/118-range-selection/ ## See also - [Selection demo](https://svgrid.com/demos/04-selection-copy-paste/) - [Custom cells](https://svgrid.com/docs/help/cells/cell-components/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/cells/cell-text-selection/ . All docs: https://svgrid.com/llms.txt