OGE UI

The data grid features that usually sit behind a paid tier — MIT, for Angular and React.
Grouping, Excel/PDF export, cell ranges, master-detail and server-side data in a virtualized grid,
with a tree list, 25+ editors, forms and Pro charts, scheduler, gantt and kanban on the same engine.

Website · Live demos · Docs · All components · Pricing · Benchmarks · Guides · Compare · Changelog · Discussions

Quick start

Angular — standalone, signals, zoneless:

npm install oge-ui

import { Component, signal } from '@angular/core';
import { OgeColumn, OgeGrid } from 'oge-ui';

@Component({
  selector: 'app-orders',
  imports: [OgeGrid, OgeColumn],
  template: `
    <oge-grid [data]="orders()" keyField="id" [filterRow]="true">
      <oge-column field="product" caption="Product" />
      <oge-column field="amount" caption="Amount" dataType="number" />
    </oge-grid>
  `,
})
export class Orders {
  readonly orders = signal([{ id: 1, product: 'Aurora Display', amount: 1249 }]);
}

React — real components over the same engine:

npm install @oge-ui/react

import { OgeGrid } from '@oge-ui/react';
import '@oge-ui/react/styles.css';

const orders = [{ id: 1, product: 'Aurora Display', amount: 1249 }];

export function Orders() {
  return (
    <OgeGrid
      data={orders}
      keyField="id"
      filterRow
      columns={[
        { field: 'product', caption: 'Product' },
        { field: 'amount', caption: 'Amount', dataType: 'number' },
      ]}
    />
  );
}

Prefer a generator? ng add @oge-ui/grid wires providers, themes and an AGENTS.md block for your coding assistant. Full walkthrough: Getting started · Setup.

What's inside

Family	Highlights	Angular	React	License
Data Grid	row + column virtualization into the millions, grouping, editing, Excel-style ranges, master-detail, XLSX/PDF	✅	✅	MIT
Tree List	lazy loading, tri-state selection, recursive summaries, drag & drop	✅	✅	MIT
Inputs & Forms	25+ editors (select, tag, multi-column combo, date, masked, color…), form layout and validation	✅	✅	MIT
Rich Text Editor · Upload	own document model, Word/Docs paste · chunked resumable uploads	✅	✅	MIT
AI	grid assistant · smart paste · AI column · chat — preview + undo, any model, no hosted service	✅	✅	MIT
Buttons · Tabs · Layout · Navigation · Overlay	drawers, menubar, tree view, splitter, modal, toast, tooltip, context menu…	✅	✅	MIT
Pivot Grid	drag-and-drop field layout, totals, calculated fields, Top-N filters, chart binding	✅	✅	Commercial
Charts	dependency-free SVG, 16 series types, zoom & pan, keyboard point inspection	✅	✅	Commercial
Scheduler · Gantt · Kanban	recurrence, timelines · dependencies, critical path, baselines · swimlanes, WIP limits	✅	✅	Commercial
BPMN Editor	from-scratch BPMN 2.0 modeler with its own XML + DI engine	✅	✅	Commercial
Spreadsheet	shows .xlsx workbooks the way Excel does — Excel-measured, read in the browser, no dependency	✅	✅	Commercial

Commercial families are free for evaluation and development — see Licensing.

Why OGE?

• Native to each framework — Angular gets signals end to end (every input, output and piece of state is a signal, full template type checking); React gets real components with props, callbacks and controlled state. Nothing is wrapped: both layers run the same framework-free engines.
• Zoneless by default — no Zone.js, no global change-detection sweeps; components mark exactly what moved.
• Built for serious data — row and column virtualization into the millions, server-side sort/filter/page/group, live push updates, infinite scrolling, Excel-style cell ranges with clipboard paste, fill handle and undo, styled XLSX and Unicode-safe PDF export.
• Accessible by default — WAI-ARIA grid and combobox semantics, full keyboard navigation with a keyboard alternative for every drag gesture, one shared live announcer, forced-colors support, a high-contrast theme, reduced motion and 24 px (44 px on touch) targets, axe-tested docs pages.
• Touch and mobile ready — one pointer-gesture engine (no HTML5 drag and drop) with touch long-press, opt-in adaptive bottom-sheet / full-screen popups (adaptiveMode), visual-viewport and safe-area aware positioning, adaptive grid detail rows and a scheduler agenda fallback.
• Design-token theming — one set of CSS variables drives every component; dark, high-contrast, Tailwind and Bootstrap themes ship in the box.
• Zero runtime dependencies — the only hard dependency between packages is OGE's own framework-free core. Export libraries (exceljs, jspdf) are optional peers: never installed, bundled or executed unless you opt in.

What the MIT grid includes

Everything in this table ships in @oge-ui/grid and @oge-ui/react-grid under the MIT license — no seat fee, no revenue cap, no build-agent fee:

Capability	License
Row and column virtualization	MIT
Row grouping, summaries and aggregation	MIT
Styled Excel (.xlsx) and PDF export	MIT
Cell range selection, clipboard paste, fill handle and undo	MIT
Master-detail rows	MIT
Server-side sort, filter, paging and grouping	MIT
Cell, row, batch, popup and form editing	MIT
AI grid assistant and smart paste (@oge-ui/ai)	MIT

The commercial tier is the seven specialised families (pivot, charts, scheduler, gantt, kanban, BPMN and spreadsheet) at $299 per developer per year — see Pricing. How OGE lines up against other libraries, feature by feature: Compare.

Try it before you install

• Run any demo in the browser — every complete example on ogeui.com has an Open in StackBlitz button that builds a runnable Angular or React project from it.
• Check the numbers — Benchmarks publishes first render, filter, sort and scroll frame times on 100,000 rows for both render layers, with the machine, the commit and the script to reproduce them (npx nx run dev-app:build, then node tools/benchmarks/grid-bench.mjs).
• Coming from another grid? The migration guides map column definitions, events and features to their OGE equivalents.
• Browse four full apps — an ERP, two CRMs and a knowledge base under examples/, each deployed and open source.

AI Coding Assistants & MCP Integration

OGE UI is engineered to be first-class for AI coding assistants:

• Model Context Protocol (MCP): Run npx -y @oge-ui/mcp in Claude Code, Cursor, Copilot, or Windsurf to give your agent 6 native tools for package discovery, component API lookups, and verified code scaffolding.
• Machine-Readable Docs: Full llmstxt.org reference index at /llms.txt and inlined API catalog at /llms-full.txt.

Installation

Everything at once:

npm install oge-ui

…or à la carte — every package is standalone:

npm install @oge-ui/grid        # data grid (+ @oge-ui/core)
npm install @oge-ui/tree-list   # hierarchical grid
npm install @oge-ui/buttons     # buttons, groups, drop-downs, FAB (+ @oge-ui/overlay)
npm install @oge-ui/inputs      # text, masked, number, select, tag, multi-column combo, date, color and choice editors
npm install @oge-ui/tabs        # tab strip and tab panel
npm install @oge-ui/layout      # accordion, splitter, toolbar, chip, carousel, list view, …
npm install @oge-ui/navigation  # tree view + drawer + stepper + menubar + pagination (navigation controls)
npm install @oge-ui/forms       # form layout, groups and validation (+ @oge-ui/inputs)
npm install @oge-ui/upload      # file uploader (+ @oge-ui/layout)
npm install @oge-ui/editor      # rich-text editor (+ @oge-ui/layout, @oge-ui/overlay)
npm install @oge-ui/ai          # AI grid assistant + smart paste, transports for any model (bring your own)
npx -y @oge-ui/mcp             # free MCP server: the suite's docs for Claude Code, Cursor, Copilot…
npm install @oge-ui/locales     # ready-made translations: de, fr, es, it, pt-BR, tr, ja, zh-CN, ar, he
npm install @oge-ui/pivot       # pivot table (commercial — see Licensing)
npm install @oge-ui/bpmn        # BPMN 2.0 editor (commercial — see Licensing)
npm install @oge-ui/scheduler   # scheduler / event calendar (commercial — see Licensing)
npm install @oge-ui/gantt       # gantt chart (commercial — see Licensing)
npm install @oge-ui/kanban      # kanban board (commercial — see Licensing)
npm install @oge-ui/charts      # charts / data visualization (commercial — see Licensing)
npm install @oge-ui/spreadsheet # Excel (.xlsx) viewer (commercial — see Licensing)

React

The same suite, as native React components over the same engine — one install, one stylesheet:

npm install @oge-ui/react            # umbrella: every MIT React family
npm install @oge-ui/react-grid       # or one family at a time …
npm install @oge-ui/react-inputs
npm install @oge-ui/react-scheduler  # commercial families install on their own

import { OgeGrid, OgeTextBox } from '@oge-ui/react';
import '@oge-ui/react/styles.css';

Since 1.1.1 the React layer is at full parity with the Angular suite: every family ships in both, on one shared engine, and the docs site switches every page between them. The few deliberate differences (router-driven demos, idiom mappings such as TemplateRef ↔ render props) are recorded in docs/REACT-PARITY.md.

Packages

Every package — umbrella, MIT families, commercial families and their engines, React layers

All packages are MIT except the seven commercial families — @oge-ui/pivot, @oge-ui/bpmn, @oge-ui/scheduler, @oge-ui/gantt, @oge-ui/kanban, @oge-ui/charts and @oge-ui/spreadsheet — together with their framework-free engines (@oge-ui/<family>-engine, ADR 0003) and their React layers (@oge-ui/react-<family>). Those are commercial (free for evaluation and development) — see Licensing.

Package	Description	npm
oge-ui	Umbrella: one install + one import path for the whole MIT suite	npm
@oge-ui/grid	Virtualized Data Grid: sorting, filtering (incl. Excel-style header menu), grouping, editing, cell ranges + clipboard paste + fill handle + undo, pinned/sticky rows, conditional formats, cell/row spans, master-detail, styled XLSX/PDF export	npm
@oge-ui/tree-list	Hierarchical grid: lazy loading, remote filtering, tri-state selection, drag & drop, total + recursive summaries, CSV/Excel/PDF export	npm
@oge-ui/pivot	Pivot Grid (commercial): rows × columns × measures, totals, calculated fields, Top-N/label/value filters, row-header layouts, chart binding, PDF export, two-axis virtualization	npm
@oge-ui/pivot-engine	Pivot engine (commercial): the framework-free field-layout, header-layout, menu, filter, chooser and keyboard machines both pivot render layers run	npm
@oge-ui/bpmn	BPMN Editor (commercial): from-scratch BPMN 2.0 modeler with its own XML + DI engine, no third-party branding	npm
@oge-ui/bpmn-engine	BPMN engine (commercial): the framework-free model, XML/JSON/SVG, routing, rules, command stack and editor core both BPMN editors run	npm
@oge-ui/scheduler	Scheduler (commercial): day/week/month event calendar, all-day strip, drag & resize with Escape-cancel, appointment popup + form	npm
@oge-ui/scheduler-engine	Scheduler engine (commercial): the framework-free core both scheduler render layers run — layout kernels, RRULE expansion, gesture math, keyboard maps, the CRUD/recurrence core and the message catalog	npm
@oge-ui/gantt	Gantt (commercial): task tree + timeline, dependencies, critical path, baselines, drag editing, undo/redo	npm
@oge-ui/gantt-engine	Gantt engine (commercial): the framework-free kernel and controller both Gantt render layers run — installed automatically, rarely imported directly	npm
@oge-ui/kanban	Kanban (commercial): columns + swimlanes, WIP limits, per-column virtualization, drag & drop with Escape-cancel, keyboard card moving, built-in dialog and menu	npm
@oge-ui/kanban-engine	Kanban engine (commercial): the framework-free board model, drag/keyboard machines, move pipeline and editor model both Kanban render layers run	npm
@oge-ui/spreadsheet	Spreadsheet (commercial): shows .xlsx workbooks the way Excel does — Excel-measured column widths, row heights, fonts, number formats, borders, fills, conditional formats, frozen panes, merges, pictures, notes and links, with Excel's selection, keyboard map, find, copy and status bar; macros are kept and never run	npm
@oge-ui/spreadsheet-engine	Spreadsheet engine (commercial): the dependency-free xlsx reader, workbook model, Excel number formats, Excel-measured layout and paint model, and the viewer controller both spreadsheet render layers run — DOM-free, it runs in Web Workers and Node	npm
@oge-ui/charts	Charts (commercial): line/spline/area/bar/stacked/scatter/range/candlestick + pie/doughnut on a dependency-free SVG kernel — zoom & pan, crosshair, tooltips, legend	npm
@oge-ui/charts-engine	Framework-free charts engine (commercial) both chart render layers run: scales, series layout, path builders, pie/radar geometry, the cartesian/pie/polar/range-selector view models, keyboard maps, gestures, messages and the image exporter	npm
@oge-ui/buttons	Buttons, groups & drop-down/split buttons: async actions, click guards, hold-to-confirm; FAB & speed dial (/fab)	npm
@oge-ui/inputs	Form editors: text + masked text, number, select / tree select / tag / autocomplete / multi-column combo box (remote load-on-scroll), date / time / range with presets, color box / gradient / palette, checkbox / check box group / switch / radio / toggle group	npm
@oge-ui/overlay	Anchored popups, menus, tooltips, context menus, modal dialogs, action sheets and toasts	npm
@oge-ui/tabs	Tabs & TabPanel: lazy render, closable tabs with async guards, overflow, drag reorder	npm
@oge-ui/layout	Accordion, Splitter & Toolbar: expansion panels, resizable / collapsible panes, APG command bar; avatar, badge, chip, alert, timeline, app bar; carousel, list view, data view, tile layout	npm
@oge-ui/navigation	TreeView: flat or nested data, tri-state checkboxes, search, lazy load, virtual scroll, DnD; Drawer: overlay/push/side with modality derived from mode; Stepper: linear wizard with one ARIA semantic in both orientations; Menubar: APG menubar with nested submenus and a container-width hamburger; Pagination: adaptive page navigator with page-size selector and info label	npm
@oge-ui/forms	Form layout: responsive columns, fieldset groups, validation rules (incl. compare), conditional visibleWhen / requiredWhen / disabledWhen, server errors, validation summary	npm
@oge-ui/upload	File Upload: drag & drop with directory and paste, restrictions with on-row reasons, previews, chunked resumable transfer with pause/resume/retry	npm
@oge-ui/editor	Rich Text Editor: own document model (no execCommand), headings, lists, links, images, colours, undo, markdown shortcuts, Word / Docs paste cleanup, strict allowlist sanitizer, Trusted Types policy oge-ui#editor
@oge-ui/ai	AI components for any model: the grid assistant (plain language → validated sort, filter, grouping, search and column changes with preview, apply and undo) and transports for your own backend, OpenAI-compatible servers and Anthropic — no hosted service, no row data sent	npm
@oge-ui/mcp	Free MCP server for coding assistants (Claude Code, Cursor, Copilot…): the suite's machine-readable docs for Angular and React, bundled, offline and version-exact — list_packages, get_package_docs, search_docs, get_setup	npm
@oge-ui/server	Server side of the grid for Node: checks requests against a field allowlist and answers them with parameterized SQL for PostgreSQL, MySQL / MariaDB, SQLite and SQL Server (filter contract, search, sort, paging, groups, summaries). The .NET twin is Oge.Data for any IQueryable / EF Core	npm
@oge-ui/locales	Ready-made translations of every message catalog (MIT and commercial families) in ten languages — one typed pack and entry point per language, ICU plurals, RTL metadata; provideOgeLocale() / <OgeLocaleProvider>	npm
@oge-ui/core	Framework-free data engine: data sources, filtering, pivot math, virtualization, CSV formula guard, state-snapshot sanitizers, themes	npm
@oge-ui/behavior	Framework-free interaction & a11y layer shared by every render layer: popup positioning, focus trap, the shared overlay Escape stack, scroll lock, the pointer-gesture engine, the live announcer, the mask engine, sanitizeUrl, plus the input/tabs/layout/navigation/grid decision engines both layers run on	npm
@oge-ui/react	React. The whole React suite behind one install and one stylesheet — the umbrella over every package below	npm
@oge-ui/react-buttons	React. Buttons, groups & toggle groups + FAB & speed dial — the same press machine and stylesheet as the Angular package	npm
@oge-ui/react-inputs	React. The full editor set on one field chrome: text, masked text, textarea, number, the drop-down editors with virtual scrolling and remote paging, multi-column combo box, toggles and choice groups, sliders, color box / gradient / palette, calendar and the date editors	npm
@oge-ui/react-tabs	React. Tab strip and tab panel: APG activation, overflow menu, closable tabs with async guards, drag reordering and lazy panels	npm
@oge-ui/react-layout	React. Layout containers and loading visuals — card, accordion, splitter, toolbar, progress bar, load indicator, skeleton, avatar, badge, chip, alert, timeline, app bar, carousel, list view, data view and tile layout	npm
@oge-ui/react-navigation	React. Navigation and wayfinding — virtualized tree view, drawer, stepper, menubar, breadcrumb and pagination	npm
@oge-ui/react-overlay	React. Overlay surfaces: viewport-aware anchored popups, WAI-ARIA menus, tooltips, context menu, modal dialog with async guards and drag/resize, action sheet, stacked toasts — the same machines and stylesheet as the Angular overlay	npm
@oge-ui/react-forms	React. Form layout over the editors: nested layout array of items, groups and tabbed/accordion/wizard sections, responsive columns, declarative validation rules and the validation summary	npm
@oge-ui/react-upload	React. File upload: drag & drop with directory and paste, restrictions with on-row reasons, previews, chunked resumable transfer, external drop zones and triggers — the same upload engine as the Angular package	npm
@oge-ui/react-editor	React. Rich Text Editor on the same editor machine and stylesheet: controlled / uncontrolled value, ref handle, APG toolbar, sanitized HTML
@oge-ui/react-charts	React. Charts (commercial): the sixteen cartesian series types, pie/doughnut, radar/polar and the range selector — zoom & pan, crosshair, tooltips, legend, keyboard inspection, PNG/SVG export — on the same charts engine as the Angular package	npm
@oge-ui/react-grid	React. Data grid on the shared grid engine: sorting, filter row + search, paging, row/column virtualization, windowed remote loading, selection, keyboard navigation, grouping with summaries and deferred groups, master-detail, row render props, row drag, pinned/resizable/reorderable columns, persistence, editing (cell/row/batch/popup/form), cell ranges + clipboard + fill + undo, pinned/sticky rows, conditional formats, header filters (incl. Excel-style menu), filter builder, column chooser, CSV/Excel/PDF	npm
@oge-ui/react-kanban	React. Kanban (commercial): columns + swimlanes, WIP limits, per-column virtualization, drag & drop with Escape-cancel, Ctrl+Arrow keyboard card moving, built-in dialog, menu and toolbar — the same engine and stylesheet as the Angular package	npm
@oge-ui/react-spreadsheet	React. Spreadsheet (commercial): shows .xlsx workbooks the way Excel does, with Excel's selection, keyboard map, find, copy and status bar — the same engine and stylesheet as the Angular package	npm
@oge-ui/react-tree-list	React. Tree list on the shared tree engine: flat or nested data, lazy per-expansion loading, ancestor-preserving filtering, recursive tri-state selection, paging, virtualization, editing, drag & drop reparenting, treegrid keyboard, persistence, summaries, CSV/Excel/PDF	npm
@oge-ui/react-bpmn	React (commercial, not in the MIT umbrella). BPMN 2.0 editor: palette, context pad, properties panel, minimap, undo/redo, XML/JSON/SVG import & export — the same engine and stylesheet as the Angular editor	npm
@oge-ui/react-scheduler	React. Scheduler (commercial): day/week/work-week/month/agenda/timeline/year views, drag & resize with Escape-cancel, recurrence with occurrence-vs-series editing, resources, reminders, popup + form editor — the same engine and stylesheet as the Angular package	npm
@oge-ui/react-pivot	React, commercial. Pivot grid on the shared @oge-ui/pivot-engine: field panel, header/measure menus, value filters, calculated fields, chart binding, render props, field chooser, two-axis virtualization, persistence, CSV/Excel/PDF	npm
@oge-ui/react-gantt	React. Gantt (commercial) on the shared Gantt engine: task tree + timeline, dependencies, critical path, baselines, drag editing, undo/redo, task dialog, Excel/PDF/PNG export	npm

Secondary entry points

Most families also publish one entry point per component, so an app that needs a single editor does not pull in the whole family. @oge-ui/inputs has one per editor — autocomplete, calendar, check-box, check-box-group, color-box, color-gradient, color-palette, date-box, field, list-box, masked-text-box, mention, multi-column-combo-box, number-box, otp-input, radio-group, rating, select-box, signature-pad, slider, switch, tag-box, text-area, text-box, toggle-group, transfer-list and tree-select (e.g. import { OgeMaskedTextBox } from '@oge-ui/inputs/masked-text-box'). The grid, tree list, pivot and Gantt export helpers live in export-excel / export-pdf entries of their packages, so exceljs and jspdf load only when you export.

Theming

Every component reads one set of CSS design tokens — override them anywhere in the cascade:

:root {
  --oge-accent: #6366f1;
  --oge-radius: 8px;
}

Token defaults have zero specificity, so a plain :root rule wins and tokens cascade into any subtree. Bundled themes ship in @oge-ui/core/themes/: dark (.oge-theme-dark or data-oge-theme="dark" on any ancestor, "auto" to follow the OS), high-contrast (.oge-theme-high-contrast or data-oge-theme="high-contrast"; ng add @oge-ui/<package> --theme=high-contrast registers it), Tailwind and Bootstrap bridge stylesheets. Every component also follows Windows forced-colors mode and prefers-reduced-motion. See the styling guide.

Localization

All user-facing strings (including aria labels) live in per-package message catalogs — override globally with provideOge<X>Config() or per instance via [messages]. See the localization guide.

For AI coding assistants

OGE ships a machine-readable reference so an assistant can write correct code without guessing:

File	What it is
/llms.txt	llmstxt.org index — packages and every doc page
/llms-full.txt	conventions, every documented API member and every demo, in one file
https://www.ogeui.com/llms/<package>.txt	one self-contained reference per package
node_modules/@oge-ui/<package>/llms.txt	the same per-package file, inside the installed tarball

ng add @oge-ui/<package> also writes a short usage block into your AGENTS.md, so assistants working in your repo reach for OGE by default. Pass --skip-agents-file to opt out.

Compatibility

OGE	Angular	React	Node (tooling)	Notes
1.x	21.2 – 23	18 – 19	≥ 22.22	standalone, signals, zoneless; React client components
0.x	22	—	≥ 22.22	end of life 2027-04-01 (security fixes only until then)

Browsers: the last two versions of Chrome, Edge, Firefox and Safari, plus iOS Safari and Chrome for Android (the list lives in .browserslistrc). No Internet Explorer, no legacy Edge.

Contributing

This is an Nx workspace:

npm ci
npx nx serve dev-app          # docs site on http://localhost:4200
npx nx run-many -t test       # vitest suites
npx nx run-many -t lint build # what CI runs

Architecture and house conventions live in docs/ARCHITECTURE.md; feature-parity tracking in ROADMAP.md. Please read CONTRIBUTING.md before opening a PR; security issues go through SECURITY.md, and the code of conduct applies in all project spaces.

New here? Issues labelled good first issue are scoped to one package and come with pointers; questions and ideas go to Discussions.

Contributors

Thank you to everyone who has helped build OGE UI:

Contributor	Contribution
@mrvi0	Russian locale pack for @oge-ui/locales (#22)

Star history

If OGE UI saves you time, a star helps other Angular and React developers find it.

Licensing

OGE UI is open-core:

• MIT — free forever. oge-ui, @oge-ui/core, @oge-ui/grid (including Excel/PDF export, master-detail and server-side operations), @oge-ui/tree-list, @oge-ui/inputs, @oge-ui/buttons, @oge-ui/tabs, @oge-ui/layout, @oge-ui/navigation, @oge-ui/forms, @oge-ui/upload, @oge-ui/editor, @oge-ui/locales and @oge-ui/overlay are MIT-licensed. This is a commitment: these packages and every feature currently in them will remain MIT.
• Commercial — @oge-ui/pivot, @oge-ui/bpmn, @oge-ui/scheduler, @oge-ui/gantt, @oge-ui/kanban, @oge-ui/charts and @oge-ui/spreadsheet, with each family's framework-free engine (@oge-ui/<family>-engine) and React layer (@oge-ui/react-<family>). The pivot grid, the BPMN editor, the scheduler, the Gantt, the Kanban, the Charts and the Spreadsheet are source-available commercial software: free for evaluation, development and testing; production use requires a paid license. Every package of a family ships the family's LICENSE (e.g. packages/charts/LICENSE, also in packages/charts-engine and packages/react/charts); the root LICENSE lists every commercial directory, and ogeui.com/license has the terms. Future enterprise-oriented packages may join this tier — never anything that is MIT today.