Laravel Grid.js — Eloquent-Powered Datagrid

Overview

Building production-quality data tables in Laravel applications has always involved trade-offs: Livewire DataTables add component complexity, Spatie's Query Builder is generic but requires manual UI wiring, and custom Vue/React implementations feel disconnected from Laravel's Blade workflow. Laravel Grid.js takes a different approach — it wraps Grid.js, the lean vanilla JavaScript table library, in a first-class Laravel package that speaks Eloquent natively.

The Problem It Solves

Most data table solutions for Laravel applications fall into one of two failure modes:

Too heavy — full Livewire or Vue components that add significant frontend complexity for what is ultimately a display concern.

Too thin — raw HTML tables styled with Tailwind that lack interactivity, pagination, or sorting without significant custom development.

Laravel Grid.js occupies the productive middle ground: a zero-overhead JavaScript library rendered through a clean PHP API, backed by the full power of Eloquent.

Key Features

• Eloquent-first data source — pass any Eloquent Builder and Grid.js handles the rest
• Server-side pagination — efficient database-level pagination for large datasets
• Sortable columns — clickable column headers trigger server-side ORDER BY queries
• Global and per-column search — optional search filtering without additional JavaScript
• Fluent PHP API — define columns, actions, and options using familiar Laravel chaining
• Blade directive — @gridjs('users-table') renders the complete component in a single line
• Lightweight JavaScript — Grid.js is approximately 30KB minified, not a framework
• No npm/build step — include Grid.js via CDN or your existing build pipeline

Basic Usage

use AmjadIqbal\LaravelGridjs\GridBuilder;

$grid = GridBuilder::make()
    ->query(User::query()->with('roles'))
    ->columns([
        Column::make('id', 'ID')->sortable(),
        Column::make('name', 'Name')->sortable()->searchable(),
        Column::make('email', 'Email')->searchable(),
        Column::make('created_at', 'Registered')->sortable(),
    ])
    ->perPage(25)
    ->paginate();

In your Blade template:

@gridjs($grid)

Technology Stack

PHP 8.2+, Laravel 11/12, Eloquent ORM, Grid.js (vanilla JavaScript). No framework-specific JavaScript is required — the package works in plain Blade, Livewire, and Inertia contexts alike.

Architecture Highlights

The GridBuilder class acts as both a query configurator and a display definition. It serialises the column configuration to JSON for Grid.js consumption, while delegating all data fetching to a dedicated Eloquent-backed AJAX controller. Pagination state is tracked via query strings, making filtered and paginated URLs bookmarkable and shareable.

Practical Use Cases

• Blade-based admin panels and internal tools without a full Filament or Nova setup
• CRM dashboards requiring sortable, searchable user and client tables
• Reporting interfaces where Eloquent models power the data source
• Multi-tenant SaaS platforms requiring per-tenant data views with server-side filtering
• Any Laravel application requiring interactive, paginated data display without heavy JavaScript

Source & License

Full source code, documentation, and installation guide on GitHub. MIT Licensed.