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

v1.1.3 2017-08-16 21:44 UTC

This package is auto-updated.

Last update: 2020-10-17 19:41:48 UTC


Latest Version on Packagist Software License Build Status Code Coverage Total Downloads



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

composer require lykegenes/laravel-table-view


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

'providers' => [


Create a Table View

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


namespace App\TableViews;

use Lykegenes\TableView\AbstractTableView;

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

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


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">

        <!-- Element-UI Stylesheet -->
        <link rel="stylesheet" href="" />
        <div id="app" class="content">

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


        <!-- Include Vue, Element-UI and Axios -->
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>

        <!-- The table scripts will be added to this stack -->

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


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;

    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));



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