Spreadsheet Selection

OGrid provides Excel-like cell selection out of the box. Click a cell to make it active, drag or Shift+click to select a range. The active cell gets a green border, and selected ranges are highlighted with a green background.

Live Demo

Click a cell, then drag or Shift+click to select a range

Live

UI styling

The live demo above shows Radix UI styling (lightweight default). The same feature renders through the Fluent UI package with its native components.

Quick Example

React

import { OGrid } from '@alaarab/ogrid-react-radix';

function App() {
  return (
    <OGrid
      columns={columns}
      data={items}
      getRowId={(item) => item.id}
      cellSelection  // default: true
    />
  );
}

Switching UI libraries

The OGrid component has the same props across all React UI packages. To switch, just change the import:

• Radix (lightweight, default): from '@alaarab/ogrid-react-radix'
• Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' - wrap in <FluentProvider>

How It Works

Cell selection is enabled by default (cellSelection={true}). When active:

• Click a cell to make it the active cell (green border).
• Shift+Click another cell to select a rectangular range from the active cell to the clicked cell.
• Click and drag across cells to select a range.
• Ctrl+A selects all cells in the grid.
• Arrow keys move the active cell. Shift+Arrow extends the selection range.

Cell Selection vs Row Selection

Cell selection (this page) selects individual cells using click/drag. The Ctrl+A keyboard shortcut selects all cells in the grid for copy/paste/fill operations.

This is separate from row selection (Row Selection), which selects entire rows using checkboxes. Row selection's header checkbox selects all rows at once.

You can use both features together -- cell selection and row selection are independent.

The selection range is represented by ISelectionRange:

interface ISelectionRange {
  startRow: number;   // row index of the anchor cell
  startCol: number;   // column index of the anchor cell
  endRow: number;     // row index of the end cell
  endCol: number;     // column index of the end cell
}

Performance

Drag selection is optimized with requestAnimationFrame and DOM attribute toggling. During a drag, React state is not updated on every pointer move - only on pointer up. This keeps the grid responsive even with thousands of cells. All drag interactions use the Pointer Events API, so cell selection works with mouse, touch, and stylus input.

Disabling Cell Selection

Pass cellSelection={false} to disable all spreadsheet-style selection. This also disables the fill handle, clipboard integration, and context menu cell operations:

<OGrid
  columns={columns}
  data={items}
  getRowId={(item) => item.id}
  cellSelection={false}
/>

Selection Styling

Selection colors use CSS custom properties for easy theming:

--ogrid-selection: #217346;          /* Excel green, used for active cell border */
--ogrid-selection-bg: rgba(33, 115, 70, 0.08);  /* range background */

Props

Prop	Type	Default	Description
cellSelection	boolean	true	Enable or disable spreadsheet-style cell selection.

Keyboard Shortcuts

Key	Action
Click	Select a single cell
Shift+Click	Extend selection to a range
Click+Drag	Select a range by dragging
Arrow keys	Move active cell
Shift+Arrow	Extend selection range
Ctrl+A	Select all cells (for copy/paste/fill operations)

Related

• Editing & Clipboard -- edit, copy/paste, and fill cells
• Row Selection -- select entire rows instead of cells