Lykegenes / laravel-table-view by Lykegenes

An API-based table view for Laravel. Based on Vue.js and Element-UI.

1,402

laravel datatable

Package Data
Maintainer Username:	Lykegenes
Maintainer Contact:	patricksamson236@gmail.com (Patrick Samson)
Package Create Date:	2017-01-24
Package Last Update:	2022-12-12
Language:	PHP
License:	MIT
Last Refreshed:	2024-11-11 15:09:01

Package Statistics
Total Downloads:	1,402
Monthly Downloads:	8
Daily Downloads:	1
Total Stars:	2
Total Watchers:	2
Total Forks:	0
Total Open Issues:	0

Laravel Table View

Installation

Composer

Execute the following command to get the latest version of the package:

composer require lykegenes/laravel-table-view

Laravel

In your config/app.php add Lykegenes\TableView\Providers\TableViewServiceProvider::class, to the end of the providers array:

'providers' => [
    ...
    Lykegenes\TableView\Providers\TableViewServiceProvider::class,
],

Usage

Create a Table View

Create a Table View class; it will allow you to configure your table.

<?php

namespace App\TableViews;

use Lykegenes\TableView\AbstractTableView;

class DemoTableView extends AbstractTableView
{
    public function getApiUrl()
    {
        return '/demo-api';
    }

    public function build()
    {
        $this->addColumn('Nom', 'name', [
                'sortable',
            ])
            ->addColumn('Adresse', 'address', [
                'sortable',
            ])
            ->addColumn('Date', 'date', [
                'sortable',
            ])
            ->addTemplateColumn('Tag', 'columns.locationTags')
            ->addTemplateColumn('Operation', 'columns.operations');

        $this->setDefaultSort('date');
    }
}

Displaying the table in a view

Calling the render() method on a TableView instance will compile it and render it. You should call this method inside one of your app's Blade views with the {!! !!} blade statement, in order not to escape the Html. Here is an example of a complete Blade template

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Demo</title>

        <!-- Element-UI Stylesheet -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.1.6/theme-default/index.css" />
    </head>
    <body>
        <div id="app" class="content">

            {!! $demoTableView->render() !!}

        </div>

        <!-- Include Vue, Element-UI and Axios -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.1.6/index.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>

        <!-- The table scripts will be added to this stack -->
        @stack('table-view-templates')
        @stack('table-view-scripts')

        <!-- Your Vue instance for this page -->
        <script type="text/javascript">
            new Vue({
                el: '#app',
            });
        </script>

    </body>
</html>

Setting-up the API endpoint

A few steps are required to support the searching and sorting features. To achieve this, we use the "Laravel 5 Repositories" by Andersao.

class ApiDemoController extends Controller
{
    protected $users;

    public function __construct(UserRepository $users)
    {
        $this->users = $users;
        $this->users->setPresenter(UserPresenter::class);
    }

    public function demoApi(Request $request)
    {
        $sort = $request->input('sort', 'name');
        $order = $request->input('order', 'asc');

        $this->users->orderBy($sort, $order);

        if ($request->has('search')) {
            $this->users->pushCriteria(new \Lykegenes\TableView\Criteria\SearchCriteria(['name', 'email'], $request->input('search')));
        }

        return $this->users->paginate($request->input('limit', 15));
    }
}

Credits

Patrick Samson

License

The MIT License (MIT). Please see License File for more information.