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.

Other adapters​

OGrid is React-first (Radix or Fluent). Material UI, vanilla JS, Angular, and Vue adapters were published earlier and remain on npm for existing installs, but are no longer actively developed.

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.

Styles, SSR and tests​

The kit packages import their own stylesheet, so a bundler (Vite, webpack, Next.js, esbuild) picks up the styles with no extra import. For plain Node, which has no CSS loader, the kits publish a node export condition with the same code minus the stylesheet import, so Vite SSR and Vitest work without configuration.

Jest under jsdom still resolves the styled entry. Transform the ESM packages and stub CSS:

// jest.config.js
module.exports = {
  transformIgnorePatterns: ['node_modules/(?!@alaarab/)'],
  moduleNameMapper: { '\\.css$': '<rootDir>/styleStub.js' }, // styleStub.js: module.exports = {};
};

Next Steps​