Skip to content
@oge-ui

Oge UI

Install a package, import a component, bind a signal. That is the whole setup.

OGE UI

OGE UI

Signal-based, zoneless Angular UI components engineered for data-heavy apps —
a virtualized Data Grid, Tree List, Pivot Grid, searchable Select Box, Inputs and Buttons.

npm version CI status license Angular 22+ zoneless

ogeui.com — docs, live demos & API reference · source · discussions · licensing


Why OGE?

  • Signals end to end — every input, output and piece of state is a signal. No decorators, no Zone.js, no lifecycle guesswork, full template type checking on Angular ≥ 22.
  • 📊 Built for serious data — row and column virtualization into the millions, server-side sort/filter/page/group, infinite scrolling, live push updates, CSV/Excel/PDF export.
  • 🆓 Generous free tier — features other grids sell (master-detail, Excel export, advanced filter builder, server-side operations) are MIT here, and will stay MIT.
  • Accessible by default — WAI-ARIA grid/treegrid/combobox semantics, full keyboard navigation, axe-tested docs pages, RTL support.
  • 🎨 Design-token theming — one set of CSS variables drives everything; dark mode, Tailwind and Bootstrap bridges ship in the box.
  • 🌍 Fully localizable — every user-facing string (aria labels included) lives in typed message catalogs.

Quick start

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

@Component({
  imports: [OgeGrid, OgeColumn, OgeSelectBox],
  template: `
    <oge-select-box label="Region" [items]="regions" [searchEnabled]="true" [(value)]="region" />

    <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 regions = ['EMEA', 'APAC', 'Americas'];
  readonly region = signal<unknown>(null);
  readonly orders = signal([{ id: 1, product: 'Aurora Display', amount: 1249 }]);
}

No modules, no forms boilerplate — [(value)] binds straight to a signal(), and the same editors plug into Signal Forms and reactive forms.

Packages

Package What it is
oge-ui Umbrella — one install for the whole MIT suite demos
@oge-ui/grid Virtualized Data Grid: sorting, filtering, grouping, editing, master-detail, export demos
@oge-ui/tree-list Hierarchical grid: lazy loading, tri-state selection, drag & drop demos
@oge-ui/pivot Pivot Grid (commercial — free for evaluation & dev) demos
@oge-ui/inputs TextBox, TextArea, NumberBox, SelectBox, TagBox, Autocomplete demos
@oge-ui/buttons Buttons, groups, drop-down/split buttons with async actions demos
@oge-ui/overlay Anchored popups, menus, tooltips, context menus demos
@oge-ui/core Framework-free data engine (data sources, filtering, pivot & virtualization math)

Licensing — open-core, honestly

The suite is MIT and will remain MIT — that includes every feature that is free today. One analytics package, the Pivot Grid, is source-available commercial software: free for evaluation, development and testing; a paid license funds full-time maintenance of everything else. Details: ogeui.com/license.

Community

If OGE saves you time, a ⭐ on oge-ui/oge-ui helps more people find it.

Popular repositories Loading

  1. oge-ui oge-ui Public

    Signal-based, zoneless Angular UI suite: virtualized Data Grid, Tree List, Pivot Grid, Select Box, Inputs and Buttons. Open-core: MIT + commercial pivot.

    TypeScript 1

  2. .github .github Public

    OGE UI organization profile

Repositories

Showing 2 of 2 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loading…

Most used topics

Loading…