Skip to content

Datatable

By using DataTableService you can build a list page just in a minutes.

$searchFields = [
        ['username', __('Username')],
        ['email', __('Email')],
        ['first_name', __('First Name')],
        ['last_name', __('Last Name')],
    ];
    $orderFields = [
        ['first_name', __('First Name')],
        ['last_name', __('Last Name')],
        ['email', __('Email')],
        ['username', __('Username')],
        ['users.created_at', __('Registered Date')],
    ];

    $select = [
        'users.*', 'name', 'first_name', 'last_name'
    ];

    $filterFields = [
        ['users.role_id', __('Role'), Role::pluck('name', 'id')->toArray()],
        ['users.is_active', __('Status'), account_status()],
    ];

    $queryBuilder = User::select($select)
        ->leftJoin('user_profiles', 'users.id', '=', 'user_profiles.user_id')
        ->leftJoin('roles', 'users.role_id', '=', 'roles.id')
        ->orderBy('users.id', 'desc');

    $downloadableHeadings = [
        'users.id' => __('ID'),
        'users.username' => __('Username'),
        'user_profiles.first_name' => __('First Name'),
        'user_profiles.last_name' => __('Last Name'),
        'users.email' => __('Email'),
        'users.is_email_verified' => __('Email Verified Status'),
        'users.is_financial_active' => __('Financial Status'),
        'users.is_active' => __('Status')
    ];

    $data['dataTable'] = app(DataTableService::class)
        ->setPaginationInfo(['pageName' => 'p', ['itemPerPage' => 15]])
        ->setSearchFields($searchFields)
        ->setOrderFields($orderFields)
        ->setFilterFields($filterFields)
        ->downloadable($downloadableHeadings)
        ->create($queryBuilder);

In the above code $searchFields is the data that will be visible in search field dropdown in view. The data will be an array and the array item will also be an array. The array item will have 2 items inside it. First item is the actual field name and last item is showable field name in view.


    $searchFields = [
        ['fieldname', __('Viewable name')],
    ];

In the above code $orderFields is the data that will be visible in order field dropdown in view. Rule is same as $searchFields


    $orderFields = [
        ['fieldname', __('Viewable name')],
    ];

$select is optional and if used it is an array of field names.

                                                                                                $select = ['table1.field1', 'table1.field2', 'table2.field3'];

$filters is optional and is only used if filter is needed on data list view. This is an array of items and every item is also array. In the item array, There are 3 types of filtering.

    $filters = [
        ['field1', 'showable label 1', $array1],
        ['field2', showable label 2, 'range'],
        ['field3', showable label 3, 'preset', 
            [
                ['individual label 1', $operator1, $value1],
                ['individual label 2', $operator2, $value2],
            ]
        ],
    ];

First item type

    *** This works as or condition. It means any of the selected option will be displayed*** 
    *** First field name, next: label and last array*** 
    'field1', 'showable label 1', $array1],

Range item type

    *** This works with minimum and maximum input field***  
    *** First field name, next: label and last one is fixed value - 'range'*** 
    ['field2', showable label 2, 'range'],

preset item type

    *** This works with minimum and maximum input field***  
    *** First field name, next: label, next: fixed value - 'preset' and last one is multi dimentional array *** 

    *** Multi Dimensional Array: it contains array as items. The items must have individual option label first, next: $operator and last $value ***

    *** Supported operators are given below ***
    ***
        '=', '<', '>', '<=', '>=', '<>', '!=', '<=>',
        'like', 'like binary', 'not like', 'ilike',
        '&', '|', '^', '<<', '>>', 'rlike', 'regexp',
        'not regexp', '~', '~*', '!~', '!~*', 'similar to',
        'not similar to', 'not ilike', '~~*', '!~~*',
    ***

    *** Example ***
    ['field3', showable label 3, 'preset', 
        [
            ['individual label 1', $operator1, $value1],
            ['individual label 2', $operator2, $value2],
        ]
    ],

In the above code $downloadableHeadings is the heading and cloumns for CSV and PDF.


    $downloadableHeadings = [
        ['fieldname', __('Heading name')],
    ];

Available Functions

name Parameter Required Description
setSearchFields array No Searchable fields name and Labels
setOrderFields array No Orderable fields name and Labels
setPaginationInfo array No Pagination information
setFilterFields array No Filterable filelds and Labels
downloadable array No Downlaodable filelds and Headings
create Object Yes Query builder object

After calling create function in DataTableService will return an array. The array cointains filters, items, paginations keys. When you set filters it will give you addtional key advanceFilters, All the keys except items cointains HTML view. items cointains collections.

Use in Blade
@extends('layouts.master')
@section('title', $title)
@section('content')
    <div class="container my-5">
        <div class="row">
            <div class="col-lg-12">
                {{ $dataTable['filters'] }}
                {{ $dataTable['advanceFilters'] }}
                <div class="my-4">
                @component('components.table',['class'=> 'lf-data-table'])
                    @slot('thead')
                        <tr class="bg-primary text-white">
                            <th class="all">{{ __('Email') }}</th>
                            <th class="min-phone-l">{{ __('First Name') }}</th>
                            <th class="min-phone-l">{{ __('Last Name') }}</th>
                            <th class="min-phone-l">{{ __('User Group') }}</th>
                            <th class="min-phone-l">{{ __('Username') }}</th>
                            <th class="none">{{ __('Registered Date') }}</th>
                            <th class="text-center min-phone-l">{{ __('Status') }}</th>
                            <th class="text-right all no-sort">{{ __('Action') }}</th>
                        </tr>
                    @endslot

                    @foreach($dataTable['items'] as $key=>$user)
                        <tr>
                            <td>
                                @if(has_permission('users.show'))
                                    <a href="{{ route('users.show', $user->id) }}">{{ $user->email }}</a>
                                @else
                                    {{ $user->email }}
                                @endif
                            </td>
                            <td>{{ $user->first_name }}</td>
                            <td>{{ $user->last_name }}</td>
                            <td>{{ $user->name}}</td>
                            <td>{{ $user->username }}</td>
                            <td>{{ $user->created_at->format('Y-m-d') }}</td>
                            <td class="text-center">{{ view_html($user->is_active ? '<i class="fa fa-check text-success"></i>' : '<i class="fa fa-times text-danger"></i>') }}</td>
                            <td class="lf-action text-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-info dropdown-toggle"
                                            data-toggle="dropdown" aria-expanded="false">
                                        <i class="fa fa-gear"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                                        <a class="dropdown-item" href="{{ route('users.show',$user->id)}}"><i
                                                class="fa fa-eye"></i> {{ __('Show') }}</a>
                                        <a class="dropdown-item" href="{{ route('users.edit',$user->id)}}"><i
                                                class="fa fa-pencil-square-o fa-lg text-info"></i> {{ __('Edit Info') }}
                                        </a>
                                        <a class="dropdown-item" href="{{ route('users.edit.status',$user->id)}}"><i
                                                class="fa fa-pencil-square fa-lg text-info"></i> {{ __('Edit Status') }}
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                @endcomponent
                </div>
                {{ $dataTable['pagination'] }}
            </div>
        </div>
    </div>
@endsection

@section('style')
    @include('layouts.includes.list-css')
@endsection

@section('script')
    @include('layouts.includes.list-js')
@endsection

Total view example is given above.

{{ $dataTable['filters'] }} will load filter section

{{ $dataTable['advanceFilters'] }} will load advance filter section

{{ $dataTable['pagination'] }} will load pagination section

Classes for datatable

Class Required Belongs to Description
lf-data-table Yes table , component it loads datatable
all no th it always keeps the column visible
min-phone-l no th it auto hides the column on responsive if not enough space
none no th It always keeps the column hide
no-sort no th It disables sorting for the column
lf-action no td Required on td if dropdown menu is taken under the td

The script below must be called

@section('style')
    @include('layouts.includes.list-css')
@endsection

@section('script')
    @include('layouts.includes.list-js')
@endsection