¶Introduction & architecture

Elyra DataGrid is a data grid built for the Laravel ecosystem. Unlike client-only grids, it is server-driven by design: sorting, filtering, grouping, aggregation and paging all execute in the database, so the grid stays fast whether it renders 100 rows or 10,000,000.

¶The core idea: one protocol, many clients

Every client speaks the same language — a small, framework-neutral JSON contract called the protocol. A client describes what it wants (columns, sort, filters, a viewport window, opt-in extras); the server answers with a slice of rows plus any requested extras.

┌─ PROTOCOL (JSON Schema) ─────────────────────────────────┐
│  GridRequest  →  GridResponse                            │
│  generates TypeScript types AND PHP DTOs (one source)    │
└───────────────────────────────────────────────────────────┘
        │                                     │
┌───────▼──────────────┐          ┌───────────▼───────────────┐
│ SERVER CORE (PHP)     │          │ CLIENT CORE (TypeScript)   │
│ Laravel package       │          │ headless, no DOM           │
│ GridRequest → ElyraSQL│          │ state + virtual scroll     │
│ FACET / ROLLUP / HYBRID│         └───┬───────────┬───────────┘
└──────────┬────────────┘              │           │
     ┌──────▼──────┐             ┌──────▼───┐ ┌─────▼────┐
     │  Livewire   │             │ Svelte 5 │ │  Vue 3   │
     │  + Flux UI  │             │ (Inertia)│ │(Inertia) │
     └─────────────┘             └──────────┘ └──────────┘

• Livewire is server-driven: grid state lives in the component; the protocol request is built and answered on the server during render.
• Svelte & Vue are client-driven: a headless TypeScript engine (@elyra/datagrid-client-core) holds state and calls a fetch function that POSTs the protocol request to a Laravel endpoint.

All three share the same theme (Tailwind v4 tokens) and render identically.

¶Why ElyraSQL

The server package targets ElyraSQL as a first-class backend and leans on its analytical primitives:

A generic MySQL driver is also included as a portability fallback (facets become N GROUP BY queries; percentile/hybrid are unavailable).

¶Design principles

1. Cost is opt-in. Expensive work (total row count, facets, aggregates) is only computed when a feature needs it. Totals and aggregates are cached per filter; facets are loaded lazily when a dropdown opens.
2. Security by allow-list. The protocol references columns by name; only columns you declare on the server are ever mapped to SQL. All values are bound.
3. Simple by default, configurable to advanced. Every client-core feature is false | true | { ...options }. Omit for off, true for sensible defaults, an object for full control.
4. Follow the app. The theme inherits your Tailwind v4 palette and Flux accent, and respects dark mode.

¶What you get

• Sorting (multi-column), filtering (filter row + operators + faceted value lists), paging (paged and virtual), grouping (multi-level, drag-to-group, collapsible subtotals), global search.
• Editing: inline, modal, and slideover — with validation and CRUD.
• Selection, keyboard navigation, cell/range selection, clipboard copy/paste.
• Master-detail rows, tree grid (self-referencing, lazy children), row pinning.
• Cell templates (currency, percent, bar, boolean, link, badge) and typed cell editors.
• Column operations: reorder, resize, freeze, show/hide, multi-column headers, and column virtualization for very wide grids.
• Streamed Excel/CSV export, state persistence, i18n, server-seeded first paint.

Continue to Installation.