2017 © Pedro Peláez
 

library laravel-table-view

Laravel 5 Package for easily displaying table views for Eloquent Collections with search and sort functionality built in.

image

witty/laravel-table-view

Laravel 5 Package for easily displaying table views for Eloquent Collections with search and sort functionality built in.

  • Saturday, May 20, 2017
  • by larkinwhitaker
  • Repository
  • 12 Watchers
  • 45 Stars
  • 4,048 Installations
  • CSS
  • 0 Dependents
  • 0 Suggesters
  • 30 Forks
  • 11 Open issues
  • 1 Versions
  • 4 % Grown

The README.md

laravel-table-view

Laravel 5 Package for easily displaying table views for Eloquent Collections with search and sort functionality built in., (*1)

Installation

Update your composer.json file to include this package as a dependency, (*2)

"witty/laravel-table-view": "dev-master"

Register the TableView service provider by adding it to the providers array in the config/app.php file., (*3)

'providers' => array(
    Witty\LaravelTableView\LaravelTableViewServiceProvider::class
)

If you want you can alias the TableView facade by adding it to the aliases array in the config/app.php file., (*4)

'aliases' => array(
        'TableView' => Witty\LaravelTableView\Facades\TableView::class,
)

Configuration

Copy the vendor file views and assets into your project by running, (*5)

php artisan vendor:publish

This will add multiple styles and one script to public/vendor/table-view The plugin depends on jQuery and v1.9.1 will be included under public/vendor/table-view - Bootstrap CSS v3.3.2 - Font Awesome v4.3.0 - jQuery v1.9.1, (*6)

Usage

Initialize the table view by passing in an instance of \Illuminate\Eloquent\Builder or simply the class name of the model for the tableview, (*7)


$users = User::select('id', 'name', 'email', 'created_at'); $usersTableView = TableView::collection( $users ) // or $usersTableView = TableView::collection( \App\User::class )

Adding Columns to the tableview, (*8)


$usersTableView = $usersTableView // you can pass in the title for the column, and the Eloquent\Model property name ->column('Email', 'email') // Add a colon after the Eloquent\Model property name along with sort and/or search to enable these options ->column('Name', 'name:sort,search') // Set the default sorting property with ->column('Name', 'name:sort*,search') // Sorted Ascending by default or specify ->column('Name', 'name:sort*:asc') ->column('Name', 'name:sort*:desc') // Custom column values are created by passing an array with the Eloquent\Model property name as the key // and a closure function ->column('Joined At', ['created_at:sort*' => function ($user) { return $user->created_at->diffForHumans(); }]) // OR ->column(function ($user) { return '<img src="' . $user->image_path . '" height="60" width="60">'; }) ->column('Email', 'email:sort,search') ->column(function ($user) { return '<a class="btn btn-success" href="/users/' . $user->id . '">View</a>'; });

Custom column values, (*9)


$usersTableView = $usersTableView // You can pass in an array for the column's row value with the Eloquent\Model property name as the key // and a closure function ->column('Joined At', ['created_at:sort*' => function ($user) { return $user->created_at->diffForHumans(); }]) // OR if sorting and searching is unnecessary, simply pass in the Closure instead of the array ->column('Image', function ($user) { return '<img src="' . $user->image_path . '" height="60" width="60">'; }); }]);

Columns without titles, (*10)


$usersTableView = $usersTableView // Just leave the column title out if you don't want to use it ->column(function ($user) { return '<img src="' . $user->image_path . '" height="60" width="60">'; });

Additional Controls - you can add partial views containing custom controls like a filter button to add additional functionality to your table, (*11)

    $usersTableView = $usersTableView
        // Just pass in the partial view file path of the custom control
        ->headerControl('_types_filter_button');

        // access the TableView data collection with $usersTableView->data()

Finally, build the TableView and pass it to the view, (*12)


$usersTableView = $usersTableView->build(); return view('test', [ 'usersTableView' => $usersTableView ]);

All together with chaining, (*13)


Route::get('/', function(\Illuminate\Http\Request $request) { $users = User::select('id', 'name', 'email', 'created_at'); $usersTableView = TableView::collection( $users, 'Administrator' ) ->column(function ($user) { return '<img src="' . $user->image_path . '" height="60" width="60">'; }) ->column('Name', 'name:sort,search') ->column('Email', 'email:sort,search') ->column('Joined At', ['created_at:sort*' => function ($user) { return $user->created_at->diffForHumans(); }]) ->column(function ($user) { return '<a class="btn btn-success" href="/users/' . $user->id . '">View</a>'; }) ->headerControl('_types_filter_button') ->build(); return view('test', [ 'usersTableView' => $usersTableView ]); });

Front End

Include stylesheets for Bootstrap and Font Awesome - Bootstrap CSS v3.3.2 and Font Awesome v4.3.0 are included in the vendor, (*14)


<link href="{{ asset('vendor/table-view/bootstrap.min.css') }}" rel="stylesheet" /> <link href="{{ asset('vendor/table-view/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" /> <link href="{{ asset('vendor/table-view/css/themes/tableview-a.css') }}" rel="stylesheet" />

Include the tablview in your view, referencing the variable name given to it, (*15)


@include('table-view::container', ['tableView' => $usersTableView])

Also include the tablview scripts ** Requires jQuery and v1.9.1 will be included under public/vendor/table-view, (*16)


@include('table-view::scripts')

Middleware Cookie Storage

Selected options for the tableview are easily added to cookie storage with built-in Middleware., (*17)

Sort options and limits per page are each added to permanent storage. At any point, a user returning to the tableview will see these options filled with the same values that he/she selected in his/her most recent session., (*18)

The search query and page number are temporarily stored during the user's current session. With this, a user could visit something http://tableview.com/blog-articles with the tableview listing articles. When a user views a specific article like http://tableview.com/blog-articles/laravel-blog/article, any link back to http://tableview.com/blog-articles will show the tableview with its most recent page number and search query., (*19)

All you have to do:, (*20)

Edit app/Http/Kernel.php, adding a reference to the Middleware, (*21)


/** * The application's route middleware. * * @var array */ protected $routeMiddleware = [ 'auth' => \App\Http\Middleware\Authenticate::class, 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, // Laravel TableView Middleware 'table-view.storage' => \Witty\LaravelTableView\Middleware\TableViewCookieStorage::class, ];

Then add it to the route containing the tableview, (*22)


Route::get('/', ['middleware' => 'table-view.storage', function () {

That's it!

It's particular but in just a few lines you have a dynamic table view with powerful functionality. Feel free to customize the tableview and element partial views. Additional themes and styles coming soon., (*23)

The Versions

20/05 2017

dev-master

9999999-dev

Laravel 5 Package for easily displaying table views for Eloquent Collections with search and sort functionality built in.

  Sources   Download

MIT

The Requires

 

The Development Requires

laravel search pagination laravel 5 sort data table table view