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. cellSelection 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.

<div id="dataGridCellSelection"></div>

new coreui.DataGrid(document.getElementById('dataGridCellSelection'), {
  columns: [
    { key: 'quarter', label: 'Quarter' },
    { key: 'emea', label: 'EMEA' },
    { key: 'amer', label: 'AMER' },
    { key: 'apac', label: 'APAC' }
  ],
  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
    }
  ],
  cellSelection: true,
  sorting: false,
  virtualization: false
})

Interactions

cellSelection implies cellNavigation: 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 cellCopy.coreui.data-grid 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.