jQuery Data Grid (working name: $.grid)

A fast, modern, themeable data grid for jQuery apps. It should feel like using AG Grid while staying as easy to drop in as $('#table').grid().

Status: 📐 Spec / pre-build Business model: Open-core. MIT-licensed free core + paid annual Pro license.

1. The Problem

Almost every jQuery admin panel, CRM, ERP or internal tool needs a data table. In practice, developers have two options:

| Option | Pain | |---|---| | DataTables.net | Ten-plus years of legacy API, heavy DOM rendering (slows down past a few thousand rows), CSS that is hard to override, awkward responsive mode, and paid "Editor" add-on | | AG Grid / Handsontable | Excellent, but built around React/Angular/Vue. Integrating with a jQuery + PHP stack feels foreign and is often overkill on price | | Hand-rolled <table> | Every team rewrites sorting, paging, filtering, and loading states from scratch |

The gap: there's no grid that is jQuery-native, fast with large data, pleasant to style, and fairly priced for agencies and SMB SaaS.

Who feels this pain most

• Laravel / CodeIgniter / Symfony + jQuery back-office developers
• WordPress plugin authors building admin screens
• Agencies maintaining 5–50 legacy client dashboards
• Enterprise internal-tools teams that can't justify a frontend-framework rewrite

2. The Solution

A single jQuery plugin that turns either an existing <table> or a JSON data source into a high-performance grid.

<div id="orders"></div>
<script>
  $('#orders').grid({
    data: '/api/orders',            // URL, array, or function returning a Promise
    columns: [
      { field: 'id',       title: '#',        width: 70, sortable: true },
      { field: 'customer', title: 'Customer', filter: 'text' },
      { field: 'total',    title: 'Total',    type: 'currency', align: 'right' },
      { field: 'status',   title: 'Status',   render: (v) => `<span class="pill ${v}">${v}</span>` }
    ],
    pageSize: 50,
    selectable: 'multi',
    theme: 'auto'                    // light | dark | auto (prefers-color-scheme)
  });
</script>

Progressive enhancement of existing markup:

$('table.legacy-report').grid();   // reads <thead>/<tbody> and upgrades it in place

3. Feature Set

🆓 Free Core (MIT)

| Feature | Notes | |---|---| | Sort (single + shift-click multi-column) | Stable sort, locale-aware string compare | | Global search + per-column filters | Text, number range, select, date | | Client-side pagination or infinite scroll | | | Virtual scrolling | Render only visible rows, so 100k rows stay smooth (target: 60fps scroll on a mid-range laptop) | | Responsive mode | Low-priority columns collapse into an expandable detail row on small screens | | Row selection | Checkbox column, shift-click ranges, getSelected() API | | Column resize + reorder | Persisted to localStorage (optional) | | Theming via CSS variables | Light / dark / auto, no !important wars | | Skeleton loading state | Reuses ideas from our Auto-Skeleton plugin | | Accessibility | role="grid", keyboard cell navigation, aria-sort, screen-reader announcements | | Events | grid:sort, grid:filter, grid:select, grid:page, grid:rowClick |

💎 Pro (paid annual license)

| Feature | Why enterprises pay for it | |---|---| | Server-side mode | Sorting, filtering and paging handled by the backend; drop-in adapters for Laravel, Django, Express, and raw SQL params | | Inline cell editing | Text / number / select / date editors, validation, dirty-cell tracking, batch save() with optimistic UI and rollback | | Export | CSV, Excel (.xlsx with formatting), PDF, print view, all respecting current filters | | Row grouping + aggregates | Group by drag-and-drop column header; sum/avg/min/max/count footers | | Pivot mode | Spreadsheet-style pivot tables for reporting screens | | Pinned columns + rows | Freeze left/right columns and summary rows | | Tree data / nested rows | Hierarchical datasets (org charts, categories, BOMs) | | Saved views | Users save their filters, column order, and sorts as named views (local or via API) | | Clipboard | Copy cell ranges to Excel, paste from Excel into editable grid | | Priority support + SLA | Email support, bug-fix turnaround guarantees |

4. Technical Architecture

┌──────────────────────────────────────────────────────────┐
│ $.fn.grid  (jQuery facade: options, events, public API)  │
├──────────────────────────────────────────────────────────┤
│ DataSource layer                                          │
│   ArraySource │ AjaxSource │ ServerSideSource (Pro)       │
├──────────────────────────────────────────────────────────┤
│ Pipeline: filter → sort → group(Pro) → paginate/window    │
│   (pure functions, no DOM; unit-testable)                 │
├──────────────────────────────────────────────────────────┤
│ Renderer                                                  │
│   Virtual row window + row recycling + rAF batching       │
├──────────────────────────────────────────────────────────┤
│ Modules (opt-in): edit, export, group, pivot, pin, tree   │
└──────────────────────────────────────────────────────────┘

Key engineering decisions

• Data and DOM are separate. The data pipeline never touches the DOM. That makes it fast and testable, and makes server-side mode a simple swap.
• Row recycling. A fixed pool of row elements is re-filled on scroll instead of creating and destroying nodes.
• Fixed row height by default, with variable height as an opt-in (measured and cached), because virtual scrolling with variable heights is the hardest perf problem in the project.
• XSS-safe by default. Cell values are text-escaped; only render() functions may return HTML (explicitly documented).
• Modular build. Free core ships as one file; Pro modules register themselves with $.grid.use(module).
• License key check is offline and non-blocking. An invalid key shows a small watermark and never breaks the app. Hostile DRM loses developer trust.
• jQuery 3.x+ support, ES2018 target. No build step required for users.

5. Monetization

| Tier | Price (indicative) | Includes | |---|---|---| | Core | Free (MIT) | Everything in the free table above | | Pro – Solo | ~$149 / year | 1 developer, unlimited projects, all Pro modules, updates | | Pro – Team | ~$499 / year | Up to 5 devs, priority support | | Enterprise | ~$1,500+ / year | Unlimited devs, SLA, invoice billing, security questionnaire |

• Perpetual fallback license: if a subscription lapses, the customer keeps the last version they paid for, but stops receiving updates. This is standard and builds trust.
• Distribution: npm (core), private npm registry or download portal (Pro), license keys delivered via Lemon Squeezy / Paddle (they handle global VAT).
• Funnel: free core gets adoption → GitHub stars and docs SEO ("DataTables alternative") → developers hit a Pro feature (export / server-side / editing) → upgrade.

6. Competitive Landscape

| Product | Strength | Our angle | |---|---|---| | DataTables.net | Huge install base, mature | Faster (virtualized), modern look, easy theming, cleaner API | | AG Grid | Feature king | jQuery-native, much simpler setup, cheaper | | Handsontable | Spreadsheet UX | Grid-first instead of spreadsheet-first, lighter | | Tabulator | Good free option | Stronger Pro feature set, commercial support, polish |

Honest risk: DataTables is "good enough" for many teams. We win on performance with big datasets, design quality, and editing/export UX, and should market directly against those pain points with side-by-side benchmarks.

7. MVP Roadmap

| Phase | Scope | Goal | |---|---|---| | v0.1 | Array data, columns, sort, search, pagination, theming | Usable demo | | v0.2 | Virtual scrolling (100k rows), column resize, selection, a11y keyboard nav | Performance headline | | v0.3 | AJAX source, responsive collapse, events API, docs site | Public launch (free core) | | v1.0 Pro | Server-side mode, inline editing, CSV/Excel export | First paying customers | | v1.x | Grouping, pinned columns, saved views, clipboard | Expand Pro value | | v2.0 | Pivot, tree data | Enterprise tier |

Success metrics

• Scroll 100k rows at ≥55fps in Chrome on a mid-range laptop
• Core bundle < 35 KB min+gzip
• 30 seconds from npm install to a working grid
• First 50 Pro licenses within 6 months of v1.0

8. Folder Plan

jquery-data-grid/
├── src/
│   ├── core/          # facade, options, events
│   ├── data/          # sources + pipeline (filter/sort/paginate)
│   ├── render/        # virtual renderer, row pool, header
│   ├── modules/       # pro: edit, export, group, pivot, pin, tree
│   └── themes/        # CSS variables, light/dark
├── demos/
├── tests/
└── README.md