DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Laravel Simple Datatable
Ngo Dinh Cuong
Ngo Dinh Cuong

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

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

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

php artisan vendor:publish --provider="Cuongnd88\LaraSimpleDatatable\LaraSimpleDatatableServiceProvider"
Enter fullscreen mode Exit fullscreen mode

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]);
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

@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' => '',
            ],
        ],
    ],
];
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
@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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›