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.
- 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.
- 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-radix | Angular CDK | Lightweight Angular apps, custom design systems |
@alaarab/ogrid-angular-material | Angular Material v21 | Angular + Material Design |
@alaarab/ogrid-angular-primeng | PrimeNG v21 | Angular + PrimeNG ecosystem |
@alaarab/ogrid-vue-radix | Radix primitives (Vue) | Lightweight Vue apps, custom design systems |
@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 within that framework family.
Why This Matters
- Shared core, broad portability. A core fix often benefits every package, while wrapper-specific UI behavior is verified in the browser matrix and documented per package.
- Zero lock-in. Migrate between React, Angular, and Vue without rewriting business logic.
- Shared core, aligned behavior. Most behavior is implemented once in core, with package-specific docs and tests calling out the remaining differences.
- 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-radix |  | Angular CDK implementation (lightweight) |
@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-radix |  | Radix Vue implementation (lightweight) |
@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, 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 all 10 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 for your framework
- Quick Start -- build a grid with React, Angular, or Vue