Skip to main content

Framework Showcase

OGrid renders with your design system's native components. Same API, same features — different look and feel. Every grid below is fully interactive: sort, filter, edit, select cells, copy/paste, and undo/redo.

React​

Three design-system implementations, all sharing the same hooks and headless logic from @alaarab/ogrid-react.

Radix UI (Default)​

The lightest option — Radix primitives are bundled with zero peer dependencies beyond React.

npm install @alaarab/ogrid-react-radix
Radix UI - lightweight, accessible primitives
Live

Fluent UI​

Microsoft's Fluent UI v9 components. Best for Microsoft 365 and SharePoint projects.

npm install @alaarab/ogrid-react-fluent @fluentui/react-components
Fluent UI — Microsoft design system
Live

Material UI​

Google's Material Design via MUI v7. Best for apps already on Material Design.

npm install @alaarab/ogrid-react-material @mui/material @emotion/react @emotion/styled
Material UI — Google's design system
Live

Angular​

Signals-based reactivity with standalone components. Zone-less by default, no NgModule boilerplate. All three packages share the same services from @alaarab/ogrid-angular.

Radix (Angular CDK) (Default)​

The lightest option — Angular CDK for overlays with zero heavy UI framework dependencies.

Beta Package

This package is currently in beta. While core functionality works, some advanced features are still being implemented. For production use, consider the stable alternatives (Angular Material/PrimeNG for Angular) until this package reaches v2.1.0.

npm install @alaarab/ogrid-angular-radix @angular/cdk
import { Component } from '@angular/core';
import { OGridComponent } from '@alaarab/ogrid-angular-radix';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class GridComponent {
  gridProps = { columns, data, getRowId: (row) => row.id, defaultPageSize: 10 };
}

Angular Material​

Angular Material v21 components. Best for projects already using Material Design.

npm install @alaarab/ogrid-angular-material @angular/material @angular/cdk
import { OGridComponent } from '@alaarab/ogrid-angular-material';
// Same API — just change the import

PrimeNG​

PrimeNG v21 components for teams already using the PrimeFaces ecosystem.

npm install @alaarab/ogrid-angular-primeng primeng
import { OGridComponent } from '@alaarab/ogrid-angular-primeng';
// Same API — just change the import

Vue​

Composition API composables using ref() and computed(). All three packages share the same composables from @alaarab/ogrid-vue.

Radix (Headless UI) (Default)​

The lightest option — Headless UI Vue components are bundled with zero peer dependencies beyond Vue.

Beta Package

This package is currently in beta. While core functionality works, some advanced features are still being implemented. For production use, consider the stable alternatives (Vuetify/PrimeVue for Vue) until this package reaches v2.1.0.

npm install @alaarab/ogrid-vue-radix
<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-radix';

const gridProps = { columns, data, getRowId: (row) => row.id, defaultPageSize: 10 };
</script>

<template>
  <OGrid :gridProps="gridProps" />
</template>

Vuetify​

Vuetify 3 components. Best for projects already using Vuetify and Material Design.

npm install @alaarab/ogrid-vue-vuetify vuetify
<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';
// Same API — just change the import
</script>

PrimeVue​

PrimeVue 4 components for teams already using the PrimeFaces ecosystem.

npm install @alaarab/ogrid-vue-primevue primevue
<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-primevue';
// Same API — just change the import
</script>

Vanilla JS / TypeScript​

No framework, no virtual DOM. A class-based imperative API that renders directly to the DOM with a built-in CSS theme supporting light and dark mode.

npm install @alaarab/ogrid-js
Vanilla JS - zero dependencies
Live

At a Glance​

FrameworkDesign SystemsReactivity
React 17–19Radix (default, bundled) · Fluent UI v9 · MUI v7Hooks
Angular 21Radix (CDK) (default) · Angular Material · PrimeNGSignals
Vue 3.3+Radix (Headless UI) (default, bundled) · Vuetify 3 · PrimeVue 4Composition API
Vanilla JS/TSBuilt-in CSS theme (zero deps)EventEmitter

All 10 packages share the same headless core (@alaarab/ogrid-core) and pass the same 1162 tests. Switching design systems is a matter of changing imports.

Choosing a Package​

  • Starting fresh with React? → Radix — lightest weight, zero peer deps, full feature parity.
  • Microsoft ecosystem? → Fluent — native look in Teams, SharePoint, Outlook.
  • Already using MUI? → Material — matches your existing theme and components.
  • Starting fresh with Angular? → Radix (CDK) — lightest weight with Angular CDK for overlays.
  • Already using Angular Material? → Angular Material — matches your existing theme.
  • Already using PrimeNG? → PrimeNG — integrates with PrimeFaces ecosystem.
  • Starting fresh with Vue? → Radix (Headless UI) — lightest weight, zero peer deps, Composition API.
  • Already using Vuetify? → Vuetify — matches your existing theme and components.
  • Already using PrimeVue? → PrimeVue — integrates with PrimeFaces ecosystem.
  • No framework? → Vanilla JS — works anywhere, class-based API, CSS-only theming.