Laravel Simple Datatable

Laravel Simple Datatable enhances the accessibility of data in HTML tables

https://github.com/cuongnd88/lara-simple-datatable

1-Install cuongnd88/lara-simple-datatable using Composer.

$ composer require cuongnd88/lara-simple-datatable

2-Add the following service provider in config/app.php

<?php
// config/app.php
return [
    // ...
    'aliases' => [
        . . . .
        'SimpleDatatable' => Cuongnd88\LaraSimpleDatatable\Facades\SimpleDatatableFacade::class,
    ],
    // ...
];

You can modify the Simple Datatable interface by copying its components to your local config directory:

php artisan vendor:publish --provider="Cuongnd88\LaraSimpleDatatable\LaraSimpleDatatableServiceProvider"

Sample Usage

Let start code less with Laravel Simple Datatable

....
use SimpleDatatable;

class UserController extends Controller
{
    public function index(Request $request)
    {
        $users = SimpleDatatable::buildQuery(User::query())
                    ->setPerPage(10)
                    ->addIncrement(function($value) {
                        return "#{$value["increment"]}";
                    })
                    ->editColumn('id', function($value) {
                        return "[{$value["id"]}]";
                    })
                    ->editColumn('name', 'user.partials.name')
                    ->addColumn('action', 'user.partials.action')
                    ->make();

        return view('user.index', ['users' => $users]);
    }
}

buildQuery(Builder $query): set Query build.

setPerPage(int $perPage) is to set quantity of items per page.

addIncrement($callback) is to add increment number.

editColumn(string $key, $callback|$view) is to edit existed column.

addColumn(string $key, $callback|$view) is to add mroe column.

make() is to make simple datatable.

Simple Datatable makes your job more easier to render view by using @simpleDatatable and @simplePaginator

index.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Simple Datatable</div>

                <div class="card-body">
                    @simpleDatatable(['data' => $users, 'view' => simple_table_view('users')])
                    @endsimpleDatatable

                    @simplePaginator(['data' => $users, 'appends' => ['name' => 'cuong.ngo']])
                    @endsimplePaginator
                </div>


            </div>
        </div>
    </div>
</div>
@endsection

@simpleDatatable(array $result): $result must has key data for content and key view for setting views.

@simplePaginator(array $result): $result must has key data for content and key appends is optional for your extend data (ex: http://localhost:8080/users?name=cuong.ngo&page=10).

simple_table_view(string $view): is to set table headers which is loaded from simple-datatable.php in config folder .

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Default paginator view
    |--------------------------------------------------------------------------
    |
    */
    'paginator_view' => 'components.simple-datatable.default-bootstrap-4',

    /*
    |--------------------------------------------------------------------------
    | Default simple paginator view
    |--------------------------------------------------------------------------
    |
    */
    'simple_paginator_view' => 'components.simple-datatable.default-bootstrap-4',

    /*
    |--------------------------------------------------------------------------
    | Default makeup for simple table view
    |--------------------------------------------------------------------------
    |
    */
    'default_table_makeup' => 'table-striped table-hover',

    /*
    |--------------------------------------------------------------------------
    | Setting views for specified datatable
    |--------------------------------------------------------------------------
    |
    */
    'views' => [
        'users' => [
            'items' => [
                'increment' => '#',
                'id' => 'ID',
                'name' => 'Name',
                'email' => 'Email',
                'action' => '',
            ],
        ],
    ],
];

To modify the view of column, you can create blade file as addColumn('action', 'user.partials.action')

user.partials.action

<a href="user/{{$id}}">Edit</a> | <a href="user/{{$id}}/remove">Remove</a>

You also modify the view of whole table, you can see at simple-datatable.blade.php

@php
$makeup = $view['makeup'] ?? '';
$keys = array_keys($view['items']);
$headLabels = array_values($view['items']);
@endphp
<table class="table {{$makeup}}">
    <thead>
        <tr>
            @foreach ($headLabels as $label)
                <th scope="col">{{$label}}</th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $item)
            <tr>
                @foreach ($keys as $key)
                    <td>{{ $item[$key] ?? '' }}</td>
                @endforeach
            </tr>
        @endforeach
    </tbody>
</table>

Blog

Laravel Simple Datatable

Ngo Dinh Cuong

Sample Usage

Join Our Newsletter. No Spam, Only the good stuff.

Related