lykegenes/laravel-table-view
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
License
The MIT License (MIT). Please see License File for more information.
Related Packages
crud widgets for laravel, to make an admin in few lines of code(custom for my pr...
A feature-rich Livewire package designed for projects that require dynamic, inte...