Create grid in custom admin module

Creating a Custom Admin Grid: A Step-by-Step Guide

As a senior developer at Laravel Company, I often assist our clients in creating custom admin modules that maintain a consistent look and feel across the backend. In this post, we’ll walk through the process of building a grid view for your custom admin module that mirrors the functionality found in other areas like “Manage Customers.”

Understanding the Grid System

The grid system in Laravel is powered by Datatables (https://laravelcompany.com/resources/datatables), which allows you to create interactive tables with features such as sorting, pagination, and searching. To start, ensure you have included the DataTables package in your project:

composer require yajra/laravel-datatables-oracle

Creating Your Model

Before we can display data in a grid, we need a model that defines our database table structure. For this example, let’s assume we’re creating a Products table.

In your terminal, run:

php artisan make:model Product -m

This command will create both the Product model and its corresponding migration file.

Defining Your Table Columns

Open your migration file (usually located in database/migrations) and define your columns. Here’s an example:

Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->integer('quantity')->default(0);
    $table->timestamps();
});

Implementing the Grid View

To create a grid view, we’ll use Laravel’s built-in features along with the DataTables package.

1. Create a new Blade file in your custom admin module’s resources/views folder, for example, products.blade.php.

2. Add the necessary HTML structure and styling:

<div class="table-responsive">
    <table id="product-table" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Quantity</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

3. Include the necessary JavaScript and CSS files:

<link rel="stylesheet" href="{{ asset('css/datatables.min.css') }}">
<script src="{{ asset('js/datatables.min.js') }}"></script>

<script>
$(document).ready(function () {
    var table = $('#product-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('admin.products.data') }}',
        columns: [
            { data: 'id', name: 'products.id' },
            { data: 'name', name: 'products.name' },
            { data: 'quantity', name: 'products.quantity' },
            // Add more columns as needed
        ],
    });
});
</script>

Setting Up the Data Source

To fetch data from your Product model, create a new route and controller method:

1. Update your routes/admin.php file:

Route::get('/products/data', 'Admin\ProductsController@data')->name('admin.products.data');

2. In your App\Http\Controllers\Admin namespace, create a ProductsController:

use Yajra\DataTables\Facades\DataTables;
use App\Models\Product;

public function data()
{
    return DataTables::of(Product::query())
        ->addColumn('action', 'admin.products.action')
        ->toJson();
}

3. Create the action blade file (resources/views/admin/products/action.blade.php) to handle individual row actions (like edit and delete).

Finalizing Your Grid

To complete your grid, don’t forget to:

• Run the migration command: php artisan migrate.
• Style your table using Laravel’s default CSS or your custom admin theme.
• Implement the editing and deleting functionality for the ‘Actions’ column.

Remember, consistency is key in backend development. By following these steps, you can create a grid view that matches the existing standards in your application while keeping your code clean and maintainable.

At Laravel Company, we specialize in helping businesses like yours streamline their admin panel development processes (https://laravelcompany.com/services/admin-panel-development). If you need further assistance or want to discuss more advanced features, feel free to reach out!