Overview
OGrid is a lightweight, open-source React data grid library that delivers spreadsheet-grade features without the enterprise paywall. It ships React UI implementations for Radix and Fluent UI, all powered by a shared TypeScript core.
Note: Angular, Vue, vanilla JS, and Material UI adapters were available through earlier 2.9.x versions and remain on npm at those versions. New development is React-first (Radix / Fluent). See the project README's "Frozen adapters" section if you have an existing install on one of the frozen variants.
Why OGrid?
Most production-grade React data grids fall into one of two camps: free but limited, or feature-rich but locked behind expensive licenses. OGrid bridges that gap.
- Free and MIT-licensed. Every feature is included. No enterprise tier, no feature gating.
- 25+ built-in features. Sorting, filtering, pagination, cell editing, clipboard, undo/redo, fill handle, row selection, cell range selection, column pinning, column groups, CSV export, context menu, keyboard navigation, cell references, virtual scrolling, status bar, sidebar, and more.
- Two React UI flavors. Pick Radix or Fluent — switch later with a one-line import change.
- TypeScript-first. Full strict-mode TypeScript with exported types for every prop, event, and API method.
- Lightweight. The Radix package has no heavy framework dependency. Fluent uses
@fluentui/react-componentsas a peer dependency.
Architecture
OGrid is built on a 3-layer architecture: a pure TypeScript core, a React adapter layer, and thin UI shells. No duplicated logic, no drift.
Core Layer - @alaarab/ogrid-core
Pure TypeScript with zero dependencies. Provides the type system (IOGridProps, IColumnDef, IOGridApi, FilterValue, etc.) and shared algorithms (getCellValue, buildHeaderRows, parseValue, normalizeSelectionRange, etc.) consumed by the React adapter.
React Adapter - @alaarab/ogrid-react
Translates Core's algorithms into idiomatic React hooks.
| Domain | Hooks |
|---|---|
| Orchestration | useOGrid · useDataGridState |
| Cell Editing | useCellEditing · useInlineCellEditorState · useRichSelectState |
| Selection | useCellSelection · useRowSelection · useActiveCell |
| Navigation | useKeyboardNavigation (arrow keys, Tab, Enter, Ctrl+Arrow) |
| Clipboard | useClipboard · useFillHandle · useUndoRedo |
| Layout | useColumnResize · useSideBarState · useColumnChooserState |
| Filtering | useColumnHeaderFilterState · useFilterOptions |
UI Layer - Pick Your Design System
Each UI package is a thin shell (~1,500 lines) that calls the same core logic and renders into native components:
| Package | Built on | Best for |
|---|---|---|
@alaarab/ogrid-react-radix | Radix primitives | Lightweight apps, custom design systems |
@alaarab/ogrid-react-fluent | Fluent UI v9 | Microsoft 365, SharePoint, Teams apps |
Both packages export the same OGrid component with the same props. Switching design systems is a one-line import change - your column definitions, event handlers, data sources, and API calls stay identical.
Why This Matters
- Shared core, aligned behavior. Most behavior is implemented once in core, with package-specific docs and tests calling out the remaining differences.
- Zero lock-in. Migrate between React UI flavors without rewriting business logic.
- Small surface area. No duplicated state logic to drift out of sync.
Packages
| Package | npm | Description |
|---|---|---|
@alaarab/ogrid-core |  | Pure TS types, algorithms, utilities (zero deps) |
| React | ||
@alaarab/ogrid-react |  | React hooks, headless components, utilities |
@alaarab/ogrid-react-radix |  | Radix UI implementation (default, lightweight) |
@alaarab/ogrid-react-fluent |  | Fluent UI v9 implementation |
Feature Highlights
| Feature | Description |
|---|---|
| Sorting | Single-column sort with ascending/descending toggle |
| Filtering | Text, multi-select, and people filters per column |
| Pagination | Client-side or server-side with configurable page sizes |
| Cell Editing | Inline text, select, checkbox, and rich select editors |
| Cell Selection | Spreadsheet-style range selection with drag support |
| Clipboard | Copy/paste with multi-cell support (Ctrl+C / Ctrl+V) |
| Fill Handle | Drag to fill cells (like Excel) |
| Undo/Redo | Full undo/redo stack for cell edits |
| Row Selection | Single or multiple row selection with checkbox column |
| Column Pinning | Pin columns to left or right edge |
| Column Groups | Multi-row grouped column headers |
| Column Chooser | Show/hide columns with a dropdown |
| Context Menu | Right-click menu with copy, paste, undo, and export |
| CSV Export | One-click export to CSV |
| Keyboard Navigation | Arrow keys, Tab, Enter, Page Down/Up, Ctrl+Home/End |
| Cell References | Excel-style column letters (A, B, C...), row numbers, name box |
| Status Bar | Row count, filtered count, selected count, and aggregations |
| Sidebar | Column visibility and filter panels in a collapsible sidebar |
| Server-Side Data | IDataSource interface for server-side pagination and filtering |
| Grid API | Imperative IOGridApi ref for programmatic control |
| Column Resize | Drag column borders to resize |
| Virtual Scrolling | Row and column virtualization for 10K+ row datasets |
| Web Worker Sort | Background-thread sorting for 50K+ rows |
| Theming | Inherits your framework's theme automatically |
Coming from AG Grid?
OGrid is designed as a drop-in replacement for AG Grid with a simpler, more React-idiomatic API. If you are migrating from AG Grid, see the Migration Guide.
Browser verification
OGrid's browser checks now have an explicit contract:
- A fast smoke suite runs on every push through the main CI workflow
- The broader Playwright matrix runs across the active React example apps only when you dispatch it manually
See the Browser Support Matrix for the current coverage map and commands.
Next Steps
- Installation -- install OGrid
- Quick Start -- build a React grid in 5 minutes