Overview
OGrid is a lightweight, open-source data grid library that delivers spreadsheet-grade features without the enterprise paywall. It ships with React, Angular, and Vue adapters -- each with multiple UI library implementations -- plus a vanilla JS package, all powered by a shared TypeScript core.
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.
- 20+ 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, status bar, and more.
- Multiple frameworks. React, Angular, and Vue adapters with UI library choices for each -- switch later with zero logic changes.
- 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 and Material packages use their respective component libraries as peer dependencies.
Architecture
OGrid is built on a 3-layer architecture: a pure TypeScript core, framework adapter layers (React hooks, Angular services, Vue composables), 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.) used by both the React and JS packages.
Framework Adapter Layers
Each framework adapter translates Core's algorithms into idiomatic framework patterns — React hooks, Angular services with signals, or Vue composables with refs.
React — @alaarab/ogrid-react
| 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 |
Angular — @alaarab/ogrid-angular
Angular v21 services using signals (signal(), computed(), effect()). Standalone components with inline templates. Zone-less by default.
| Service | Equivalent |
|---|---|
OGridService | useOGrid — pagination, sorting, filtering, visibility, editing |
DataGridStateService | useDataGridState — layout, selection, editing, interaction |
Vue — @alaarab/ogrid-vue
Vue 3 Composition API composables using ref(), computed(), watch().
| Composable | Equivalent |
|---|---|
useOGrid | Pagination, sorting, filtering, column visibility |
useDataGridState | Layout, cell selection, editing, clipboard, keyboard nav |
| 20+ feature composables | useCellEditing, useCellSelection, useClipboard, etc. |
UI Layer — Pick Your Framework
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 |
@alaarab/ogrid-react-material | MUI v7 | Material Design apps, dashboards |
@alaarab/ogrid-angular-material | Angular Material v21 | Angular + Material Design |
@alaarab/ogrid-angular-primeng | PrimeNG v21 | Angular + PrimeNG ecosystem |
@alaarab/ogrid-vue-vuetify | Vuetify 3 | Vue + Material Design |
@alaarab/ogrid-vue-primevue | PrimeVue 4 | Vue + PrimeVue ecosystem |
All packages within a framework export the same OGrid component with the same props. Switching UI libraries is a one-line import change — your column definitions, event handlers, data sources, and API calls stay identical.
Why This Matters
- Write once, render anywhere. A bug fix or feature in core lands across all frameworks instantly.
- Zero lock-in. Migrate between React, Angular, and Vue without rewriting business logic.
- Guaranteed parity. Shared core ensures all packages behave identically.
- 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 |
@alaarab/ogrid-react-material |  | Material UI v7 implementation |
| Angular | ||
@alaarab/ogrid-angular |  | Angular v21 services with signals |
@alaarab/ogrid-angular-material |  | Angular Material v21 implementation |
@alaarab/ogrid-angular-primeng |  | PrimeNG v21 implementation |
| Vue | ||
@alaarab/ogrid-vue |  | Vue 3 composables with Composition API |
@alaarab/ogrid-vue-vuetify |  | Vuetify 3 implementation |
@alaarab/ogrid-vue-primevue |  | PrimeVue 4 implementation |
| Other | ||
@alaarab/ogrid-js |  | Vanilla JS data grid (no framework) |
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, Escape for full keyboard control |
| Status Bar | Row count, filtered count, selected count, and aggregations |
| 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 |
| 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.
Next Steps
- Installation -- install OGrid for your framework
- Quick Start -- build a grid with React, Angular, or Vue