Framework Showcase

OGrid works with your existing design system — not against it. React, Angular, Vue, and Vanilla JS are all fully supported, and every framework shares the same headless core so most behavior stays aligned across them.

Every grid below is live. Core interactions like sorting, filtering, editing, and selection are wired up across the demos, and the current browser verification split is documented in the Browser Support Matrix.

---

Picking the right package

The short version:

• Starting from scratch? Pick the Radix variant for your framework — it's the lightest, with no peer dependencies beyond the framework itself.
• Already using a design system? Pick the matching package — Fluent, Material, Angular Material, PrimeNG, Vuetify, or PrimeVue — and the grid components will use your existing components for buttons, inputs, and popovers.
• No framework? Use @alaarab/ogrid-js for a full-featured grid with just a CDN import.

Switching between UI libraries later is straightforward — you change the import and the wrapper provider if required. The grid configuration (columns, data, event handlers) doesn't change.

---

React

Three design systems, all sharing the same hooks from @alaarab/ogrid-react. Your column definitions, event handlers, and grid API calls work identically across all three.

Radix UI — lightweight default

The default React package. Radix primitives are bundled in — no separate peer dependency to install. It's a good starting point for new projects or when you want minimal overhead.

npm install @alaarab/ogrid-react-radix

import { OGrid } from '@alaarab/ogrid-react-radix';

export default function App() {
  return (
    <OGrid
      columns={columns}
      data={data}
      getRowId={(row) => row.id}
      statusBar
    />
  );
}

Radix UI - lightweight, accessible primitives

Live

Fluent UI — Microsoft ecosystem

If you're building for Microsoft Teams, SharePoint, or any Microsoft 365 integration, Fluent is your pick. The grid uses native Fluent components for headers, filters, and inputs so it blends naturally.

npm install @alaarab/ogrid-react-fluent @fluentui/react-components

import { FluentProvider, webLightTheme } from '@fluentui/react-components';
import { OGrid } from '@alaarab/ogrid-react-fluent';

export default function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <OGrid columns={columns} data={data} getRowId={(row) => row.id} />
    </FluentProvider>
  );
}

Fluent UI - Microsoft design system

Live

Material UI — Google's Material Design

If your app already uses MUI, this drops right in. The grid uses MUI components and respects your ThemeProvider — including custom palettes and typography.

npm install @alaarab/ogrid-react-material @mui/material @emotion/react @emotion/styled

import { ThemeProvider, createTheme } from '@mui/material/styles';
import { OGrid } from '@alaarab/ogrid-react-material';

const theme = createTheme({ palette: { primary: { main: '#6750a4' } } });

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <OGrid columns={columns} data={data} getRowId={(row) => row.id} />
    </ThemeProvider>
  );
}

Material UI - Google's design system

Live

---

Angular

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

Radix (Angular CDK) — lightweight default

Angular CDK handles overlays (dropdowns, popovers) with no heavy UI framework required. Good default for new Angular projects.

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 };
}

Angular Material

If you're already on Angular Material, the grid components match your existing theme automatically.

npm install @alaarab/ogrid-angular-material @angular/material @angular/cdk

import { OGridComponent } from '@alaarab/ogrid-angular-material';
// Same props — just change the import

PrimeNG

For teams in the PrimeFaces ecosystem, PrimeNG integration means dialogs, dropdowns, and inputs all look native.

npm install @alaarab/ogrid-angular-primeng primeng

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

---

Vue

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

Radix (Headless UI) — lightweight default

Headless UI Vue components bundled in — no peer dependencies beyond Vue 3. Good starting point for new Vue projects.

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 };
</script>

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

Vuetify

If your app is built on Vuetify 3, the grid's buttons, selects, and inputs all use Vuetify components and adopt your existing theme.

npm install @alaarab/ogrid-vue-vuetify vuetify

<script setup lang="ts">
import { OGrid } from '@alaarab/ogrid-vue-vuetify';
// Same gridProps — just change the import, wrap in <v-app> for theming
</script>

PrimeVue

PrimeVue 4 integration for teams already on the PrimeFaces stack.

npm install @alaarab/ogrid-vue-primevue primevue

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

---

Vanilla JS / TypeScript

No framework, no virtual DOM — just a container element and a class constructor. A built-in CSS theme covers light and dark mode with CSS custom properties you can override.

npm install @alaarab/ogrid-js

Vanilla JS - zero dependencies

Live

---

At a glance

Framework	Design Systems	Reactivity model
React 17–19	Radix (bundled) · Fluent UI v9 · MUI v7	Hooks
Angular 21	Radix (CDK) (default) · Angular Material · PrimeNG	Signals
Vue 3.3+	Radix (Headless UI) (bundled) · Vuetify 3 · PrimeVue 4	Composition API
Vanilla JS/TS	Built-in CSS theme (zero deps)	EventEmitter

All 10 packages share the same @alaarab/ogrid-core. Shared test factories cover the common contract, and package-specific browser coverage handles the remaining interaction differences. Switching design systems within a framework family is usually a one-line import change.

Premium inputs (optional)

Each framework has an optional inputs package with advanced cell editors: calendar date pickers, sliders, color pickers, ratings, and tag inputs. They're tree-shakeable and have no impact on bundle size unless you use them.

Framework	Package
React	@alaarab/ogrid-react-inputs
Angular	@alaarab/ogrid-angular-inputs
Vue	@alaarab/ogrid-vue-inputs
Vanilla JS	@alaarab/ogrid-js-inputs

See Premium Inputs for usage and the full list of available editors.

Related

• Quick Start — get a grid running in 60 seconds
• Vanilla JS Guide — full JS API documentation
• Theming Guide — customize colors and styling
• Premium Inputs — advanced cell editors