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)​

Lightest option. Uses Angular CDK for overlays -- no heavy UI framework dependencies.

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)​

Lightest option. Headless UI Vue components are bundled as regular dependencies -- no peer deps beyond Vue.

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