en en en en en en en en en en en en en en en id en en en en en en en en en en en en en en en en en en en en en en en en it en en en en de en de en de de en en en en en en en en ko en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en it en en en en en en en en en en en en en en en en en en en en en en en en en de en zh en en en en en en en en en en en en en en en en en en zh en en en en en en en en id en en en
This package allows rendering of data via a tabular format (grid). The grid uses bootstrap classes to style the table elements. Icons used are from font-awesome, and most of the functionality is insipred by the yii2's framework's gridview widget.
Bootstrap 4 (for the styling)
Jquery (required by bootstrap and the package's javascript)
Jquery pjax (quickly view data without having to reload the page). Note that you'll need to create the middleware on your own
Date picker (optional - for the single date & date range filters)
The package is available on packagist. Just run;
composer install leantony/laravel-grid "~2.0"
For bootstrap 3 support, consider installing version 1.0. Version 1.0 though is pretty not much updated at this point, so may lack some features.
If you can't wait for a release inorder to try any fixes, or the latest features, just run;
composer install leantony/laravel-grid "2.0.x-dev"
The grid comes with a config file, CSS assets, JS assets and view files. The command below should allow you to publish them.
php artisan vendor:publish --provider="Leantony\Grid\Providers\GridServiceProvider"
You can also choose to publish the assets and views separately by passing the --tag argument to the command. For the argument values, try assets, views, config for js|css assets, views and config respectively.
Be sure to also include the necessary javascript and css assets on your layout. An example layout is as shown below;
My application                                 My appliation            @yield('content')       @include('leantony::modal.container')                                           // send csrf token (see https://laravel.com/docs/5.6/csrf#csrf-x-csrf-token) - this is required $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); // for the progress bar (required for progress bar functionality) $(document).on('pjax:start', function () { NProgress.start(); }); $(document).on('pjax:end', function () { NProgress.done(); });     @stack('grid_js')
A laravel command is available to make it easy to create grids. It's usage is as shown below;
php artisan make:grid --model="{modelClass}"
Just make sure you replace {modelClass} with your actual eloquent model class. E.g
php artisan make:grid --model="App\User"
Once this is run, a grid will be generated. Default namespace for grid generation is App\Grids. Once the generation of the grid is done, you can add add it in your controller like this;
class UsersController extends Controller { /** * Display a listing of the resource. * * @param UsersGridInterface $usersGrid * @param Request $request * @return \Illuminate\Http\Response */ public function index(UsersGridInterface $usersGrid, Request $request) { // the 'query' argument needs to be an instance of the eloquent query builder // you can load relationships at this point return $usersGrid ->create(['query' => User::query(), 'request' => $request]) ->renderOn('welcome'); // render the grid on the welcome view } }
Just make sure that you do not call ->get() on the query.
If you inject the interface on the controller, just make sure that you add a binding to the service provider. Like this;
/** * Register any application services. * * @return void */ public function register() { $this->app->bind(UsersGridInterface::class, UsersGrid::class); }
Otherwise, you can also instantiate the grid class like any other class then inject any constructor dependencies you might need.
/** * Display a listing of the resource. * * @param Request $request * @return \Illuminate\Http\Response */ public function index(Request $request) { $user = $request->user(); return (new UsersGrid(['user' => $user])) // you can then use it as $this->user within the class. It's set implicitly using the __set() call ->create(['query' => User::query(), 'request' => $request]) ->renderOn('welcome'); }
If you need to pass extra data to the view specified, you just need to pass the data as arguments, just as you do normally on any other laravel controller;
/** * Display a listing of the resource. * * @param Request $request * @return \Illuminate\Http\Response */ public function index(Request $request) { $data = 'hello world'; return (new UsersGrid()) ->create(['query' => User::query(), 'request' => $request]) ->renderOn('welcome', compact('data')); }
For eloquent relationships, its basically the same approach. Like this;
class UsersController extends Controller { /** * Display a listing of the resource. * * @param UsersGridInterface $usersGrid * @param Request $request * @return \Illuminate\Http\Response */ public function index(UsersGridInterface $usersGrid, Request $request) { // load relationships $query = User::with(['posts', 'activities']) return $usersGrid ->create(['query' => $query, 'request' => $request]) ->renderOn('welcome'); } }
And once again, just make sure that you do not call ->get() on the query.
To display your grid, simply add this to your view. Or any appropriate variable you passed into the renderOn method.
For a quick demonstration, be sure to check out the demo here. The demo's source code is also available on github.
Updating local JS and CSS assets after package updates
When the package is updated, it is highly likely that you will also need to update the javascript assets. To do that, run this command below after an update;
php artisan vendor:publish --provider="Leantony\Grid\Providers\GridServiceProvider" --tag=assets --force
You can also place this command in composer so that it is executed automatically on each update run. Like this;
// ... composer config "post-autoload-dump": [ "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", "@php artisan package:discover", "@php artisan vendor:publish --provider=\"Leantony\\Grid\\Providers\\GridServiceProvider\" --tag=assets --force" ]