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.

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>
  )
}