Skip to main content

Installation

OGrid ships as separate packages for each UI framework. Pick the one that matches your project's design system.

React​

Choose one React UI package based on your design system:

Lightest option. Radix UI primitives are bundled as regular dependencies -- no peer deps beyond React.

npm install @alaarab/ogrid-react-radix

When to choose: New projects, or when you want minimal bundle size and no design system lock-in.

Fluent UI​

Microsoft's design system. Requires Fluent UI v9 as a peer dependency.

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

When to choose: SharePoint Framework (SPFx) apps, Microsoft 365 integrations, or projects already using Fluent UI.

Material UI​

Google's Material Design. Requires MUI v7 and Emotion as peer dependencies.

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

When to choose: Projects using Material Design, or when you need MUI's extensive component ecosystem.

Angular​

Choose one Angular UI package based on your design system:

Radix (Angular CDK) (Beta)​

Lightest option. Uses Angular CDK for overlays -- no 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 Angular Material or PrimeNG until this package reaches v2.1.0.

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

When to choose: New Angular projects, or when you want minimal bundle size and no design system lock-in.

Angular Material​

Official Material Design for Angular. Requires Angular v21, Angular Material, and CDK as peer dependencies.

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

When to choose: Projects already using Angular Material, or when you need Material Design components.

PrimeNG​

PrimeNG component library. Requires Angular v21 and PrimeNG as peer dependencies.

npm install @alaarab/ogrid-angular-primeng primeng

When to choose: Projects already using PrimeNG, or when you prefer PrimeNG's component set.

Vue​

Choose one Vue UI package based on your design system:

Radix (Headless UI) (Beta)​

Lightest option. Headless UI Vue components are bundled as regular dependencies -- no peer deps 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 Vuetify or PrimeVue until this package reaches v2.1.0.

npm install @alaarab/ogrid-vue-radix

When to choose: New Vue projects, or when you want minimal bundle size and no design system lock-in.

Vuetify​

Material Design for Vue. Requires Vue 3 and Vuetify as peer dependencies.

npm install @alaarab/ogrid-vue-vuetify vuetify

When to choose: Projects already using Vuetify, or when you need Material Design components.

PrimeVue​

PrimeVue component library. Requires Vue 3 and PrimeVue as peer dependencies.

npm install @alaarab/ogrid-vue-primevue primevue

When to choose: Projects already using PrimeVue, or when you prefer PrimeVue's component set.

Vanilla JS (No Framework)​

Framework-free data grid. Class-based API with EventEmitter state management. Zero framework dependencies.

npm install @alaarab/ogrid-js

When to choose: Projects without React/Angular/Vue, legacy codebases, or when you want full control over rendering.

Theme CSS

The JS package ships a default theme with light and dark mode support:

import '@alaarab/ogrid-js/styles';

Or link it directly in HTML:

<link rel="stylesheet" href="node_modules/@alaarab/ogrid-js/dist/styles/ogrid.css" />

You can override any --ogrid-* CSS variable to customize colors, or skip the default theme entirely and write your own CSS targeting the ogrid-* class names.

Core Only​

If you want to build your own framework adapter on top of OGrid's types and utilities, install the core package directly.

npm install @alaarab/ogrid-core
info

You typically do not need to install @alaarab/ogrid-core separately. All React UI packages re-export everything from @alaarab/ogrid-react (which re-exports from core), so types like IColumnDef, IOGridApi, and hooks like useUndoRedo are available directly from your chosen UI package.

Requirements​

FrameworkVersion
React17, 18, or 19
Angular21
Vue3.3+
TypeScript5.x recommended (not required)
Node.js>= 18 (for development/build tooling)

Verifying the Installation​

After installing, confirm everything is working by rendering a minimal grid.

React:

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

type Row = { id: number; name: string };
const columns: IColumnDef<Row>[] = [{ columnId: 'name', name: 'Name' }];

function App() {
  return <OGrid<Row> columns={columns} data={[{ id: 1, name: 'Test' }]} getRowId={(row) => row.id} />;
}

Angular:

import { Component } from '@angular/core';
import { OGridComponent, type IColumnDef } from '@alaarab/ogrid-angular-radix';

@Component({
  standalone: true,
  imports: [OGridComponent],
  template: `<ogrid [props]="gridProps" />`
})
export class AppComponent {
  gridProps = {
    columns: [{ columnId: 'name', name: 'Name' }] as IColumnDef[],
    data: [{ id: 1, name: 'Test' }],
    getRowId: (row: any) => row.id,
  };
}

Vue:

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

const columns: IColumnDef[] = [{ columnId: 'name', name: 'Name' }];
const data = [{ id: 1, name: 'Test' }];
const getRowId = (row: any) => row.id;
</script>

<template>
  <OGrid :gridProps="{ columns, data, getRowId }" />
</template>

If the grid renders with a single row showing "Test", your installation is correct.

Next Steps​

  • Quick Start -- build a grid with your chosen framework