Skip to main content
MIT License · Free Forever

The open-source
data grid.

Sorting, filtering, editing, formulas, clipboard, virtual scroll. React, Angular, Vue, Vanilla JS. MIT licensed.

$npm i @alaarab/ogrid-react-radixReact + Radix
One API. Four frameworks.

One grid model.
Framework-native wrappers.
Swap packages, keep moving.

React, Angular, Vue, and Vanilla JS packages with the same grid concepts, column model, and feature set across the lineup.

import { OGrid } from '@alaarab/ogrid-react-radix';
// Also: '@alaarab/ogrid-react-fluent' | '@alaarab/ogrid-react-material'

const columns = [
{ columnId: 'name', name: 'Name', sortable: true },
{ columnId: 'role', name: 'Role', filterable: { type: 'multiSelect' } },
{ columnId: 'salary', name: 'Salary', editable: true,
valueFormatter: (v) => `$${v.toLocaleString()}` },
];

function App() {
return (
<OGrid
columns={columns}
data={employees}
getRowId={(e) => e.id}
editable
cellSelection
statusBar
/>
);
}
Real-time

Live updates without the jank.

Trading terminals, monitoring dashboards, and operational tables need constant updates. OGrid keeps the grid responsive while the data keeps moving.

Pick your stack.
Ship in minutes.

Every package has the same API. Drop it in, configure columns, done.

$npm i @alaarab/ogrid-react-radix