OGrid data grid for Material UI v7, built on MUI Table. Also available for Radix UI (default, lightweight) and Fluent UI. Same API, just swap the import.

Why OGrid?

| | OGrid | AG Grid Community | AG Grid Enterprise | |---|---|---|---| | Spreadsheet selection | Built-in | - | $999/dev/year | | Clipboard (copy/paste) | Built-in | - | $999/dev/year | | Fill handle | Built-in | - | $999/dev/year | | Undo/redo | Built-in | - | $999/dev/year | | Context menu | Built-in | - | $999/dev/year | | Status bar | Built-in | - | $999/dev/year | | Side bar | Built-in | - | $999/dev/year | | Cell editing | Built-in | Built-in | Built-in | | Sorting & filtering | Built-in | Built-in | Built-in | | License | MIT (free) | MIT | Commercial |

Features

Sorting · Filtering (text, multi-select, date range, people picker) · Pagination · Cell editing (inline, select, checkbox, rich select, date, custom popover) · Spreadsheet selection · Clipboard · Fill handle · Undo/redo · Row selection · Column groups · Column pinning · Column resize · Column chooser · Side bar · Context menu · Status bar with aggregations · CSV export · Grid API · Server-side data · Column state persistence · Keyboard navigation (Excel-style Ctrl+Arrow) · Built-in column types (text, numeric, date, boolean) · React 17/18/19 · TypeScript strict

Install

npm install @alaarab/ogrid-material

Peer Dependencies

@mui/material ^7.0.0
@mui/icons-material ^7.0.0
@emotion/react ^11.0.0
@emotion/styled ^11.0.0
react ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom ^17.0.0 || ^18.0.0 || ^19.0.0

Quick Start

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

const columns: IColumnDef<Employee>[] = [
  { columnId: 'name', name: 'Name', sortable: true, editable: true },
  { columnId: 'department', name: 'Department',
    filterable: { type: 'multiSelect' },
    cellEditor: 'richSelect', cellEditorParams: { values: ['Engineering', 'Sales', 'Marketing'] } },
  { columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
];

<OGrid
  columns={columns}
  data={employees}
  getRowId={(e) => e.id}
  editable
  cellSelection
  statusBar
  sideBar
/>

Documentation

Full docs, API reference, and interactive examples at alaarab.github.io/ogrid.

License

MIT — Free forever. No enterprise tiers. No feature paywalls.