Skip to main content

Installation

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

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.

Frozen adapters​

The following adapters remain on npm at their last shipped version but no longer receive feature work or framework-major upgrades. Existing installs continue to work unchanged. Source for each lives on the legacy/multiframework branch of the repo.

  • @alaarab/ogrid-react-material — frozen at v2.9.1. MUI v7 (skipped v8, broke in v9).
  • @alaarab/ogrid-js + @alaarab/ogrid-js-inputs — frozen at v2.9.1. The vanilla JS variant.
  • @alaarab/ogrid-angular* — frozen at v2.9.0.
  • @alaarab/ogrid-vue* — frozen at v2.9.0.

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​

DependencyVersion
React17, 18, or 19
TypeScript5.x or 6.x recommended (not required)
Node.js>= 18 (for your build tooling)

Verifying the Installation​

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

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

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

Next Steps​