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