Skip to main content

Quick Start

Here's a grid in 60 seconds — sorting, filtering, editing, pagination, and keyboard navigation, all working out of the box.

Install​

Pick the React UI flavor that matches your design system:

npm install @alaarab/ogrid-react-radix

Your first grid​

This example renders an employee directory with sortable columns, a department filter, and an editable salary column. Copy it and it'll just work.

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

interface Employee {
  id: number;
  name: string;
  department: string;
  salary: number;
}

const data: Employee[] = [
  { id: 1, name: 'Alice Johnson', department: 'Engineering', salary: 95000 },
  { id: 2, name: 'Bob Smith', department: 'Marketing', salary: 72000 },
  { id: 3, name: 'Carol Williams', department: 'Engineering', salary: 110000 },
  { id: 4, name: 'David Brown', department: 'Sales', salary: 68000 },
  { id: 5, name: 'Eva Martinez', department: 'Marketing', salary: 78000 },
];

const columns: IColumnDef<Employee>[] = [
  { columnId: 'name', name: 'Name', sortable: true },
  {
    columnId: 'department',
    name: 'Department',
    sortable: true,
    filterable: { type: 'multiSelect', options: ['Engineering', 'Marketing', 'Sales'] },
  },
  {
    columnId: 'salary',
    name: 'Salary',
    type: 'numeric',
    sortable: true,
    editable: true,
    valueFormatter: (value) =>
      new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value as number),
  },
];

export default function App() {
  return (
    <OGrid<Employee>
      columns={columns}
      data={data}
      getRowId={(row) => row.id}
      defaultPageSize={10}
      defaultSortBy="name"
      statusBar
      aria-label="Employee directory"
    />
  );
}
Switching UI libraries

The OGrid component has identical props across all React UI packages. To switch, change one import:

  • Radix (lightweight, no peer deps): from '@alaarab/ogrid-react-radix'
  • Fluent UI (Microsoft 365 / SPFx): from '@alaarab/ogrid-react-fluent' - wrap in <FluentProvider>

What you get for free​

Paste those ~40 lines and you have:

  • Sorting — click any column header, ascending/descending, shift-click for multi-sort
  • Filtering — the Department column gets a multi-select dropdown filter
  • Inline editing — double-click any salary cell to edit in place
  • Currency formatting — valueFormatter formats numbers on display without affecting stored values
  • Pagination, keyboard nav, cell selection, status bar — all there, no extra config

Three concepts worth knowing​

Description
IColumnDef<T>Describes a column. columnId must match a key on your row type (or use valueGetter for computed values).
getRowIdReturns a stable unique identifier per row. Used for selection, editing, and efficient re-renders.
layoutMode'fill' (default) stretches the grid to fill its container. 'content' sizes to the data.

Programmatic control​

Need to interact with the grid from outside? Use the API:

import { useRef } from 'react';
import { OGrid, type IOGridApi } from '@alaarab/ogrid-react-radix';

function App() {
  const gridRef = useRef<IOGridApi<Employee>>(null);

  return (
    <>
      <button onClick={() => gridRef.current?.exportToCsv('employees.csv')}>
        Export CSV
      </button>
      <OGrid<Employee> ref={gridRef} columns={columns} data={data} getRowId={(row) => row.id} />
    </>
  );
}

What's next?​