Home > ApexGrid Docs > Docs > Range Selection (Enterprise)

Range Selection (Enterprise)

apex-grid-enterprise supports spreadsheet-style cell range selection: click-drag or shift-click to select a rectangular block of cells, read live statistics over it, and copy it to the clipboard.

Enabling range selection

Range selection is on by default. Turn it off with the property or attribute:

grid.rangeSelection = false;
// or in markup: <apex-grid-enterprise range-selection="false">

Drag to select a rectangular block; holding the pointer at the top or bottom edge of the grid body during a drag auto-scrolls the viewport and keeps extending the selection to the newly revealed rows, so a range is no longer capped at the visible page.

Selecting from the keyboard

Range selection was pointer-only until enterprise 0.7.0. It now has a full keyboard path, which was the highest item left on the 2026-07 accessibility audit's backlog.

Keys	Action
`Shift` + arrow keys	Grow or shrink the range by one cell, moving the focus corner
`Shift` + `Home` / `End`	Extend to the start or end of the row
`Ctrl`/`Cmd` + `Shift` + arrows, `Home` or `End`	Extend to the grid's edge in that direction

The anchor stays put throughout: only the focus corner moves, so shrinking a range back down behaves the way it does in a spreadsheet. In RTL the left and right arrows map onto previous and next column by inline order, as they do everywhere else in the grid.

Reading the selection

Method	Returns	Description
`getSelectionBounds()`	`RangeBounds \| null`	The active range's `{ top, bottom, left, right }`, or `null`
`getSelectionRanges()`	`RangeBounds[]`	All ranges (multiple with additive selection)
`getSelectionStats()`	`RangeStats`	Live aggregates over the selected cells
`getSelectionTSV()`	`string`	The selection as tab-separated values

RangeBounds is { top, bottom, left, right } (row/column indices). RangeStats:

Field	Description
`count`	Number of selected cells
`numericCount`	How many hold numeric values
`sum`	Sum of numeric values
`average`	Mean of numeric values
`min` / `max`	Smallest / largest numeric value

const stats = grid.getSelectionStats();
console.log(`${stats.count} cells, sum ${stats.sum}, avg ${stats.average}`);

Clipboard

Method	Description
`copySelection()`	Copy the selection to the clipboard (returns `Promise<boolean>`)
`pasteText(text)`	Paste TSV/CSV text into the grid at the selection
`clearRangeSelection()`	Clear the current range selection

await grid.copySelection();          // → clipboard as TSV
grid.pasteText('10\t20\n30\t40');    // paste a 2×2 block

Reacting to selection changes

The apex-range-changed event fires as the selection changes, carrying bounds, all ranges, and live stats:

import { RANGE_CHANGED_EVENT } from 'apex-grid-enterprise';

grid.addEventListener(RANGE_CHANGED_EVENT, (e) => {
  const { bounds, ranges, stats } = e.detail;
  if (bounds) {
    document.querySelector('#sum').textContent = `Sum: ${stats.sum}`;
  }
});

Live stats with the status bar

For a zero-code readout of the selection aggregates, drop an <apex-grid-status-bar> next to the grid — it shows count/sum/average/min/max for the current selection automatically.

Charting a range

createRangeChart() renders a chart from the current selection. See Integrated Charts.

React example

import { useEffect, useRef, useState } from 'react'
import 'apex-grid-enterprise/define'
import { RANGE_CHANGED_EVENT } from 'apex-grid-enterprise'

export default function RangeGrid() {
  const ref = useRef<any>(null)
  const [sum, setSum] = useState(0)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    const onRange = (e: any) => setSum(e.detail.stats.sum)
    grid.addEventListener(RANGE_CHANGED_EVENT, onRange)
    return () => grid.removeEventListener(RANGE_CHANGED_EVENT, onRange)
  }, [])

  return (
    <div>
      <p>Selection sum: {sum}</p>
      <apex-grid-enterprise ref={ref} style={{ height: 480 }} />
    </div>
  )
}