ogrid

OGrid is a headless data grid library built with a pure TypeScript core and framework-specific adapters for React, Angular, Vue, and vanilla JavaScript. It provides enterprise-grade features such as spreadsheet selection, clipboard operations, and undo/redo at zero cost, with a significantly smaller bundle size compared to commercial alternatives.

Key Features

• Multi-Framework Support — One core with separate UI packages for React, Angular, Vue, and vanilla JS, supporting popular design systems like Radix UI, Fluent UI, Material UI, Vuetify, and PrimeNG.
• Enterprise Features — Includes spreadsheet cell selection, multi-cell copy/paste, fill handle, undo/redo, context menu, status bar, and sidebar, often requiring paid licenses in other grids.
• Performance Optimizations — Features row and column virtualization, web worker support for sorting/filtering, CSS containment, and a small bundle size (44-61 KB gzipped).
• Advanced Data Handling — Supports server-side data sources, client or server-side pagination, sorting, filtering, and column state persistence.
• Rich Editing & UI — Provides inline cell editing with various editors, Excel-style keyboard navigation, column grouping/pinning, toolbar, and CSV export.

Philosophy

OGrid is designed around a headless architecture, separating core grid logic from UI rendering to ensure consistency across frameworks while maintaining a minimal footprint and full TypeScript strictness.