DEV Community

Raju Gundu
Raju Gundu

Posted on

I got tired of AG Grid's paywall, so I built a free alternative

#react #typescript #showdev #opensource

The problem

Every time I started a new internal tool, I'd reach for AG Grid. It's the go-to React data grid and for good reason — it's powerful and well-documented.

Then I'd hit the wall.

Audit trail? Enterprise. Workflow states? Enterprise. A proper rules engine for validation? Enterprise. AG Grid Enterprise costs $1,500+ per developer per year. For a small team building internal tooling, that's a hard sell.

So I built RGGrid.

What RGGrid is

RGGrid is a production-grade React + TypeScript data grid built for internal tools and business applications. It's open source, free, and ships everything I kept bumping into on AG Grid's paywall.

Install:

npm install @rg-grid/rg-grid
Enter fullscreen mode Exit fullscreen mode

Basic usage:

import "@rg-grid/rg-grid/styles.css";
import { RGGrid } from "@rg-grid/rg-grid";
Enter fullscreen mode Exit fullscreen mode

What's free that AG Grid charges for

Audit trail

Every cell edit is logged with the user and timestamp. Access it imperatively:

const logs = gridRef.current?.getAuditLogs?.() ?? [];
Enter fullscreen mode Exit fullscreen mode

Workflow states

Model real business processes directly in the grid:

const workflow = {
  column: "status",
  states: ["draft", "review", "approved", "rejected"],
  transitions: {
    draft: ["review"],
    review: ["approved", "rejected"],
    rejected: ["review"],
  },
};
Enter fullscreen mode Exit fullscreen mode

Rules engine

Sync and async validation on any cell:

const rules = [
  {
    column: "mrr",
    condition: (value) => Number(value) < 0,
    action: "error",
    message: "MRR cannot be negative",
  },
];
Enter fullscreen mode Exit fullscreen mode

Tree / hierarchical rows

Works with flat (parent ID) or nested (children key) structures. Fully compatible with sorting, filtering, and pagination.

Architecture

The core idea is a deterministic data pipeline:

Raw Data → CoreRow → Feature Plugins → ViewRow → Render Layer
Enter fullscreen mode Exit fullscreen mode

Features are ordered, priority-based plugins. The UI is a thin render layer. No wrapper components. No hidden magic.

Try it

Live demo: https://rg-grid.vercel.app/
GitHub: (link)
npm: @rg-grid/rg-grid

If you've been stuck behind the AG Grid paywall, I'd love to hear your use case. Drop a comment below.

Top comments (0)