Row Selection

Select entire rows with checkboxes (multiple mode) or radio-button-style selection (single mode). Access selected rows programmatically via the grid API ref.

Live Demo

Click checkboxes to select rows, or use the header checkbox

Live

	Name	Email	Department	Status
	Alice Johnson	alice@example.com	Engineering	Active
	Bob Smith	bob@example.com	Marketing	Draft
	Carol Lee	carol@example.com	Sales	Archived
	David Kim	david@example.com	Finance	Active
	Eve Torres	eve@example.com	Operations	Draft
	Frank Wu	frank@example.com	Engineering	Archived
	Grace Park	grace@example.com	Marketing	Active
	Henry Adams	henry@example.com	Sales	Draft
	Irene Costa	irene@example.com	Finance	Archived
	Jack Rivera	jack@example.com	Operations	Active

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 row selection looks in your framework's design system, click the framework buttons above the demo to open online demo:

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

Each framework renders with its native checkbox components, so the styling matches your design system.

Quick Example

React

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

function App() {
  const gridRef = useRef<IOGridApi<Person>>(null);

  const handleExport = () => {
    const selectedIds = gridRef.current?.getSelectedRows() ?? [];
    console.log('Selected:', selectedIds);
  };

  return (
    <>
      <button onClick={handleExport}>Export Selected</button>
      <OGrid
        ref={gridRef}
        columns={columns}
        data={people}
        getRowId={(item) => item.id}
        rowSelection="multiple"
        onSelectionChange={(event) => {
          console.log(`${event.selectedItems.length} rows selected`);
        }}
      />
    </>
  );
}

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, OGridService } from '@alaarab/ogrid-angular-material';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `
    <button (click)="handleExport()">Export Selected</button>
    <ogrid [props]="gridProps" />
  `
})
export class GridComponent {
  constructor(private gridService: OGridService) {}

  handleExport() {
    const selectedIds = this.gridService.getSelectedRows();
    console.log('Selected:', selectedIds);
  }

  gridProps = {
    columns,
    data: people,
    getRowId: (item: Person) => item.id,
    rowSelection: 'multiple' as const,
    onSelectionChange: (event: any) => {
      console.log(`${event.selectedItems.length} rows selected`);
    },
  };
}

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: people,
  getRowId: (item) => item.id,
  rowSelection: 'multiple',
  onSelectionChange: (event) => {
    console.log(`${event.selectedItems.length} rows selected`);
  },
};
</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: people,
  getRowId: (item) => item.id,
  rowSelection: 'multiple',
});

grid.on('selectionChange', ({ selectedRows }) => {
  console.log(`${selectedRows.length} rows selected`);
});

// Programmatic access
document.getElementById('export-btn').addEventListener('click', () => {
  const selected = grid.api.getSelectedRows();
  console.log('Selected:', selected);
});

How It Works

Set rowSelection on the OGrid component to enable row selection:

Mode	Behavior
'none'	No row selection (default).
'single'	One row at a time. Clicking a row selects it and deselects the previous.
'multiple'	Checkbox column appears. Click checkboxes to toggle. Shift+click for range select. Header checkbox toggles all.

Row Selection vs Cell Selection

Row selection (this page) selects entire rows using checkboxes. The header checkbox selects or deselects all rows at once.

This is separate from cell selection (Spreadsheet Selection), which selects individual cells using click/drag. Cell selection's Ctrl+A shortcut selects all cells in the grid, not rows.

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

Multiple Selection

In 'multiple' mode, a checkbox column is prepended to the grid:

• Click a checkbox to toggle that row.
• Click the header checkbox to select or deselect all visible rows.
• Hold Shift and click a checkbox to select a range of rows from the last clicked row.

Controlled Mode

For full control, pass selectedRows and onSelectionChange:

function App() {
  const [selectedRows, setSelectedRows] = useState<Set<RowId>>(new Set());

  return (
    <OGrid
      columns={columns}
      data={people}
      getRowId={(item) => item.id}
      rowSelection="multiple"
      selectedRows={selectedRows}
      onSelectionChange={(event) => {
        setSelectedRows(new Set(event.selectedRowIds));
      }}
    />
  );
}

Imperative API

Use the grid ref to programmatically control selection:

const gridRef = useRef<IOGridApi<Person>>(null);

// Get selected row IDs
gridRef.current?.getSelectedRows();

// Set selection programmatically
gridRef.current?.setSelectedRows([1, 2, 3]);

// Select all rows (row selection, not cells)
gridRef.current?.selectAll();

// Deselect all rows
gridRef.current?.deselectAll();

Props

Prop	Type	Default	Description
rowSelection	'none' | 'single' | 'multiple'	'none'	Row selection mode.
selectedRows	Set<RowId>	--	Controlled set of selected row IDs.
onSelectionChange	(event: IRowSelectionChangeEvent<T>) => void	--	Called when selection changes. Event contains selectedRowIds and selectedItems.

API Methods

Method	Signature	Description
getSelectedRows	() => RowId[]	Returns currently selected row IDs.
setSelectedRows	(rowIds: RowId[]) => void	Sets selected rows programmatically.
selectAll	() => void	Selects all rows.
deselectAll	() => void	Deselects all rows.

Related

• Spreadsheet Selection -- cell-level selection
• Sorting -- sort rows before selection
• Filtering -- filter rows before selection