Packages

GridX is distributed as three packages:

| Package | Description | Install | |---------|-------------|---------| | @jithvar/gridx-core | Framework-agnostic grid engine (zero deps) | npm i @jithvar/gridx-core | | @jithvar/gridx-react | React & Next.js wrapper component | npm i @jithvar/gridx-react | | @jithvar/gridx-themes | CSS themes (light, dark, alpine) | npm i @jithvar/gridx-themes |

Quick Install (React / Next.js)

npm install @jithvar/gridx-react @jithvar/gridx-themes

Features

• Virtual Scrolling — 100K+ rows at 60fps
• Excel-like Navigation — Arrow keys, Tab, Enter, Shift+Arrow range select
• Inline Cell Editing — Double-click to edit, with validation
• Copy & Paste — Ctrl+C/V, multi-cell, Excel-compatible
• Undo / Redo — Ctrl+Z / Ctrl+Y
• Sorting — Multi-column, click headers
• Filtering — Excel-style set filters (checkbox lists)
• Column Pinning — Freeze columns left/right
• Column Reorder — Drag headers
• Column Chooser — Show/hide columns
• Row Selection — Row numbers, Ctrl+click, Shift+click
• Status Bar — Sum, Avg, Count
• Context Menu — Right-click actions
• Conditional Styling — cellStyle / cellClass
• Excel Export — .xlsx, zero dependencies
• Pagination — Client-side + server-side
• URL Filters — Shareable filtered views
• State Persistence — Save/restore from DB (cross-device)
• Themes — Light, Dark, Alpine

Usage

import { JGrid, ColDef } from '@jithvar/gridx-react';
import '@jithvar/gridx-themes/gridx.css';
import '@jithvar/gridx-themes/light.css';

const columns: ColDef[] = [
  { field: 'name', header: 'Name', editable: true },
  { field: 'salary', header: 'Salary', type: 'number' },
];

function App() {
  return (
    <div style={{ height: 600 }}>
      <JGrid columns={columns} data={data} editable rowSelection statusBar />
    </div>
  );
}

Why GridX?

| | GridX | AG Grid | TanStack Table | |-|-------|---------|----------------| | Bundle (gzip) | ~10KB | ~500KB | ~15KB (no UI) | | Zero dependencies | Yes | No | Yes | | Built-in UI | Yes | Yes | No | | Excel editing | Yes | Enterprise $ | No | | Undo/Redo | Yes | Enterprise $ | No | | .xlsx Export | Yes | Enterprise $ | No | | License | MIT (free) | Partial | MIT |

Documentation

Full docs, API reference, and examples: gitlab.com/jcs-plugins/gridx

About

GridX is built and maintained by Jithvar Consultancy Services — a software consultancy delivering enterprise-grade solutions.

License

MIT