JSPM

OGrid JS — Vanilla JavaScript data grid with zero framework dependencies.

Documentation · Getting Started · API Reference

Vanilla JS data grid for OGrid — full feature parity with the React packages, no framework required. Class-based state with EventEmitter replaces React hooks. Depends only on @alaarab/ogrid-core.

Features

• Sorting, filtering, pagination (client-side and server-side)
• Cell selection, keyboard navigation, clipboard (copy/cut/paste)
• Inline cell editing with undo/redo (batch support)
• Fill handle (drag-to-fill)
• Row selection (single/multiple, shift-click range, select all)
• Column resizing and pinning (left/right)
• Column chooser, sidebar (columns & filters panels)
• Header filters (text, multiSelect, date)
• Context menu
• Status bar with aggregations
• Marching ants copy/cut overlay
• Server-side data source with fetchPage

Quick Start

import { OGrid } from '@alaarab/ogrid-js';

const grid = new OGrid(document.getElementById('grid')!, {
  columns: [
    { columnId: 'name', header: 'Name' },
    { columnId: 'age', header: 'Age', type: 'numeric' },
  ],
  data: [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 25 },
  ],
  pagination: true,
  pageSize: 10,
});

// Access the API
const api = grid.getApi();

// Clean up
grid.destroy();

Install

npm install @alaarab/ogrid-js

Peer dep: @alaarab/ogrid-core.

Documentation

Full docs at alaarab.github.io/ogrid.

License

MIT — Free forever.