DEV Community

Abu Ghufran
Abu Ghufran

Posted on

Laravel DataGrid in Minutes: Skip the CRUD Boilerplate (Complete Guide)

#laravel #php #webcomponents

The Problem Every Laravel Developer Knows

We've all been there. You're building a Laravel app and need to create an admin panel or data management interface. What should be a simple task turns into:

  • ❌ Writing individual controllers for each CRUD operation
  • ❌ Creating forms and validation rules
  • ❌ Handling CSRF tokens properly
  • ❌ Making everything mobile responsive
  • ❌ Building search and pagination features

Result? 2-3 weeks of repetitive boilerplate code that you'll write again in your next project.

The Solution: Laravel + GridPHP Integration

What if I told you there's a way to get a complete database management interface in 30 minutes instead of 3 weeks?

I recently discovered GridPHP's Laravel integration, and it's been a game-changer for admin panels and internal tools.

Here's what you get:

  • ✅ Complete CRUD operations out of the box
  • ✅ Mobile responsive interface
  • ✅ No Eloquent dependency (works with any database)
  • ✅ Automatic CSRF handling
  • ✅ Built-in search and pagination

Step-by-Step Integration Guide

Prerequisites

  • Laravel v12 (works with other versions too)
  • GridPHP package
  • Basic PHP/Laravel knowledge

Step 1: File Placement

First, you need to organize the GridPHP files in your Laravel structure.

Copy GridPHP files to Laravel:

# Create the directory structure
mkdir -p app/Classes/Gridphp
mkdir -p public/assets/gridphp

# Copy library files
cp -r [gridphp-package]/lib/inc/* app/Classes/Gridphp/
cp -r [gridphp-package]/lib/js/* public/assets/gridphp/
Enter fullscreen mode Exit fullscreen mode

Your Laravel structure should look like this:

laravel/
├── app/
│   └── Classes/
│       └── Gridphp/
│           ├── jqgrid_dist.php
│           └── [other lib files]
├── public/
│   └── assets/
│       └── gridphp/
│           ├── js/
│           └── css/
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Factory Class

Create a factory class to handle database configuration and autoloading.

Create app/Gridphp.php:

<?php

namespace App;

class Gridphp
{
    public static function get()
    {
        // Include the main library file
        require_once app_path('Classes/Gridphp/jqgrid_dist.php');

        // Create grid instance
        $g = new \jqgrid();

        // Set database configuration
        $g->set_options(array(
            "caption" => "Data Management",
            "multiselect" => true,
            "autowidth" => true,
            "shrinkToFit" => true
        ));

        return $g;
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Setup Controller

Now let's create a controller that uses our factory class.

Modify app/Http/Controllers/DataController.php:

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use App\Gridphp;

class DataController extends Controller
{
    public function index()
    {
        // Get grid instance
        $g = Gridphp::get();

        // Set your database table
        $g->table = "your_table_name";

        // Enable CRUD operations
        $g->set_actions(array(
            "add" => true,
            "edit" => true, 
            "delete" => true,
            "view" => true
        ));

        // Render the grid
        $grid_output = $g->render("data_grid");

        return view('data.index', compact('grid_output'));
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Create View Template

Create the Blade template that will display your grid.

Create resources/views/data/index.blade.php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Data Management</title>

    <!-- GridPHP CSS -->
    <link rel="stylesheet" href="{{ asset('assets/gridphp/css/ui.jqgrid.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/gridphp/css/jquery-ui.css') }}">

    <!-- GridPHP JS -->
    <script src="{{ asset('assets/gridphp/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/gridphp/js/jquery-ui.min.js') }}"></script>
    <script src="{{ asset('assets/gridphp/js/jquery.jqGrid.min.js') }}"></script>
</head>
<body>
    <div class="container mt-5">
        <h2>Data Management Interface</h2>

        <!-- Grid will render here -->
        {!! $grid_output !!}
    </div>

    <script>
        // CSRF token for Ajax requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 5: Configure Routes

Add routes for both GET and POST operations.

In routes/web.php:

<?php

use App\Http\Controllers\DataController;

Route::get('/data', [DataController::class, 'index'])->name('data.index');
Route::post('/data', [DataController::class, 'index'])->name('data.post');
Enter fullscreen mode Exit fullscreen mode

The Magic Result

Visit /data in your Laravel app and you'll see:

Laravel DataGrid Interface

  • 📊 Professional data table with sorting and pagination
  • ➕ Add new records with popup forms
  • ✏️ Edit existing data inline or in popup
  • 🗑️ Delete with confirmation
  • 🔍 Search and filter capabilities
  • 📱 Mobile responsive design

Why This Approach Rocks

1. No Eloquent Dependency

Unlike Laravel Nova or other solutions, this works with any database structure. Perfect for legacy databases or complex queries.

2. Lightning Fast Development

What takes 2-3 weeks of coding now takes 30 minutes of configuration.

3. Production Ready

Handles CSRF tokens, validation, and security out of the box.

4. Highly Customizable

You can customize every aspect - themes, validation rules, custom columns, etc.

Real-World Use Cases

This approach is perfect for:

  • 👔 Admin panels for content management
  • 📊 Internal tools for data entry
  • 🏢 Client projects requiring quick database interfaces
  • 🚀 MVP development where speed matters
  • 📋 Legacy system modernization

Performance Considerations

  • ⚡ Fast rendering - No ORM overhead
  • 🔄 Ajax operations - No page reloads
  • 📦 Minimal footprint - Only loads what you need
  • 🎯 Optimized queries - Direct database access

Gotchas to Watch Out For

  1. File Permissions: Make sure app/Classes directory is writable
  2. CSRF Tokens: Don't forget the meta tag and Ajax setup
  3. Asset Paths: Verify CSS/JS files are accessible
  4. Database Config: Ensure your database connection works

When NOT to Use This

This approach isn't ideal for:

  • Complex business logic requiring Eloquent relationships
  • Apps heavily dependent on Laravel's ORM features
  • When you need tight integration with Laravel's validation system

Conclusion

Sometimes the best solution isn't the most "Laravel way" - it's the one that gets the job done efficiently.

GridPHP + Laravel integration gives you:

  • ⚡ Massive time savings (weeks → minutes)
  • 🔧 Production-ready database interfaces
  • 🎨 Professional appearance without design work
  • 📱 Mobile responsive by default

For admin panels, internal tools, and rapid prototyping, this combination is hard to beat.

What development shortcuts have saved you the most time? Let me know in the comments!

Resources

Found this helpful? Give it a ❤️ and follow for more Laravel tips and shortcuts!

Tags: #laravel #php #webdev #crud #datagrid #productivity #tutorial

Top comments (0)