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

Name	Age	Department	Salary	Email
Alice Johnson	25	Engineering	$50,000	alice@example.com
Bob Smith	26	Marketing	$53,500	bob@example.com
Carol Lee	27	Sales	$57,000	carol@example.com
David Kim	28	Finance	$60,500	david@example.com
Eve Torres	29	Operations	$64,000	eve@example.com
Frank Wu	30	Engineering	$67,500	frank@example.com
Grace Park	31	Marketing	$71,000	grace@example.com
Henry Adams	32	Sales	$74,500	henry@example.com
Irene Costa	33	Finance	$78,000	irene@example.com
Jack Rivera	34	Operations	$81,500	jack@example.com

Showing 1 to 10 of 25 items

Rows102550100

Framework-Specific Styling

The live demo above shows React Radix UI styling (lightweight default). To see how this feature looks in your framework's design system, click the framework buttons above the demo to open online demo:

• React — Radix UI styling
• Angular — Angular Material styling
• Vue — Vuetify styling
• JS — Vanilla JS default theme

Each framework renders OGrid with its native components, so the look and feel matches your design system.

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>
• Material UI (MUI v7): from '@alaarab/ogrid-react-material' — wrap in <ThemeProvider>

Angular

import { Component } from '@angular/core';
import { OGridComponent } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
  gridProps = {
    columns,
    data: items,
    getRowId: (item: any) => item.id,
    cellSelection: true,
  };
}

Switching UI libraries

Same component API across Angular packages. To switch, just change the import:

• Radix (CDK): from '@alaarab/ogrid-angular-radix' (default, lightweight)
• Angular Material: from '@alaarab/ogrid-angular-material'
• PrimeNG: from '@alaarab/ogrid-angular-primeng'

All components are standalone — no NgModule required.

Vue

<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';

const gridProps = {
  columns,
  data: items,
  getRowId: (item) => item.id,
  cellSelection: true,
};
</script>

<template>
  <OGrid :gridProps="gridProps" />
</template>

Switching UI libraries

Same component API across Vue packages. To switch, just change the import:

• Radix (Headless UI): from '@alaarab/ogrid-vue-radix' (default, lightweight)
• Vuetify: from '@alaarab/ogrid-vue-vuetify' — wrap in <v-app> for theming
• PrimeVue: from '@alaarab/ogrid-vue-primevue'

Vanilla JS

import { OGrid } from '@alaarab/ogrid-js';
import '@alaarab/ogrid-js/styles';

const grid = new OGrid(document.getElementById('grid'), {
  columns: columns,
  data: items,
  getRowId: (item) => item.id,
  cellSelection: true,
});

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 mouse move -- only on mouse up. This keeps the grid responsive even with thousands of cells.

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