Vue Data Grid Cell Selection

People who work with tabular data reach for a spreadsheet’s muscle memory: drag across a block of numbers, hit Ctrl+C, paste it somewhere else. cell-selection gives the grid that, on top of the same active-cell substrate keyboard navigation already provides.

Cell selection

Select the way you would in a spreadsheet — click a cell, drag across a block, shift-click a far corner, or hold Shift and press an arrow. Ctrl/Cmd+A selects everything, and Ctrl/Cmd+C copies the range: try it and paste into a spreadsheet.

<script setup lang="ts">
import { CDataGrid } from '@coreui/vue-data-grid'

const columns = [
  { key: 'quarter', label: 'Quarter' },
  { key: 'emea', label: 'EMEA' },
  { key: 'amer', label: 'AMER' },
  { key: 'apac', label: 'APAC' }
]

const items = [
  { quarter: 'Q1', emea: 128400, amer: 214900, apac: 96300 },
  { quarter: 'Q2', emea: 141200, amer: 208700, apac: 104800 },
  { quarter: 'Q3', emea: 152900, amer: 226400, apac: 118200 },
  { quarter: 'Q4', emea: 167300, amer: 241800, apac: 129600 }
]
</script>

<template>
  <CDataGrid
    :columns="columns"
    :items="items"
    :sorting="false"
    :virtualization="false"
    cell-selection
  />
</template>

Interactions

cell-selection implies cell-navigation: the active cell is the grid’s single focus owner, and the selection anchors on it rather than tracking a second one.

The clipboard format

The copy is tab-separated — the format spreadsheets read back as columns. Rows are separated by newlines, and disjoint rectangles by a blank line. A value containing a tab, a newline or a quote is quoted the way TSV consumers expect.

Cells copy as they are displayed: a column’s formatter runs first, so a formatted date pastes as the date on screen rather than its underlying value.

Each copy fires @cell-copy with the exact text written, so you can mirror it somewhere else or count it.

The grid uses the async clipboard API and falls back to a hidden textarea where that is unavailable or denied — both work because the copy runs inside the key press that asked for it.

Options

Bundle cost

Cell selection is the largest single feature in the grid: cellSelectionFeature adds about 4 KB gzipped to the TanStack core. A grid that does not need it can drop that by naming a smaller feature set — which is exactly what the lite build does.