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

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, 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>

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 every row on the current page at once; selections on other pages are kept.

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 rows on the current page. Selections on other pages are kept.
• Hold Shift and click a checkbox to select (or clear) the range from the last clicked row, in the order rows are shown. The last clicked row is remembered by row id, so the range still starts there after a sort or filter; if that row is no longer on the current page, the click toggles just the one row. Shift+Space toggles the active row and sets the starting row too.
• From the keyboard, the checkboxes are reached through their cells: they are not tab stops (the grid has one, the active cell). Press ← from the first data column to move to the row's checkbox cell, Space to toggle the row, and Shift+Space to select the range from the last toggled row. ↑ and ↓ move between checkbox cells, → returns to the data. The header checkbox is a regular tab stop with the other header controls.

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, from a click or the API. Event contains selectedRowIds and selectedItems: the row objects for every selected id, including rows on other pages or hidden by a filter (server-side: loaded rows, plus rows seen when they were selected).

API Methods

Method	Signature	Description
getSelectedRows	() => RowId[]	Returns currently selected row IDs.
setSelectedRows	(rowIds: RowId[]) => void	Sets selected rows programmatically and fires onSelectionChange (in controlled mode, apply it to selectedRows there).
selectAll	() => void	Selects every row that passes the current filters, across all pages (server-side: loaded records, including all loaded windows).
deselectAll	() => void	Deselects all rows.

Related

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