{"id":15025146,"url":"https://github.com/leantony/laravel-grid","last_synced_at":"2025-04-07T12:06:47.030Z","repository":{"id":29367937,"uuid":"121482689","full_name":"leantony/laravel-grid","owner":"leantony","description":"A grid view for laravel, inspired by the yii2 grid widget","archived":false,"fork":false,"pushed_at":"2022-12-06T17:05:59.000Z","size":772,"stargazers_count":91,"open_issues_count":46,"forks_count":39,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-31T10:08:53.420Z","etag":null,"topics":["bootstrap","filter","grid","grid-generator","javascript","jquery","laravel","laravel-grid","pjax"],"latest_commit_sha":null,"homepage":"https://leantony.github.io/laravel-grid/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leantony.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-14T07:24:51.000Z","updated_at":"2024-03-18T15:36:35.000Z","dependencies_parsed_at":"2023-01-14T14:47:29.720Z","dependency_job_id":null,"html_url":"https://github.com/leantony/laravel-grid","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leantony%2Flaravel-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leantony","download_url":"https://codeload.github.com/leantony/laravel-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648977,"owners_count":20972945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","filter","grid","grid-generator","javascript","jquery","laravel","laravel-grid","pjax"],"created_at":"2024-09-24T20:01:34.477Z","updated_at":"2025-04-07T12:06:47.013Z","avatar_url":"https://github.com/leantony.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel grid\n\nLive demo: [here](http://laravel-grid.herokuapp.com/)\n\n[![Build Status](https://travis-ci.org/leantony/laravel-grid.svg?branch=master)](https://travis-ci.org/leantony/laravel-grid)\n[![Latest Stable Version](https://poser.pugx.org/leantony/laravel-grid/v/stable)](https://packagist.org/packages/leantony/laravel-grid)\n[![Latest Unstable Version](https://poser.pugx.org/leantony/laravel-grid/v/unstable)](https://packagist.org/packages/leantony/laravel-grid)\n[![Total Downloads](https://poser.pugx.org/leantony/laravel-grid/downloads)](https://packagist.org/packages/leantony/laravel-grid)\n\nThis 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. \n\n## Requirements\n+ Laravel 5.5+\n+ Bootstrap 4 (for the styling)\n+ Font awesome (for icons)\n+ Jquery (required by bootstrap and the package's javascript)\n+ Jquery pjax (quickly view data without having to reload the page). Note that you'll need to [create the middleware on your own](https://gist.github.com/JeffreyWay/8526696b6f29201c4e33)\n+ [Date picker](https://github.com/dangrossman/bootstrap-daterangepicker.git) (optional - for the single date \u0026 date range filters)\n\n\u003e **Note that from version 2.0.2 onwards, you'll need the package [barryvdh/laravel-dompdf](https://github.com/barryvdh/laravel-dompdf) to export data from the grid as PDF**\n\n# Getting started\n\n## Install\nThe package is available on packagist. Just run;\n```php\ncomposer install leantony/laravel-grid \"~2.0\"\n```\n\u003e 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.\n\nIf you can't wait for a release inorder to try any fixes, or the latest features, just run;\n```php\ncomposer install leantony/laravel-grid \"2.0.x-dev\"\n```\n\n## Publish assets\nThe grid comes with a config file, CSS assets, JS assets and view files. The command below should allow you to publish them.\n```php\nphp artisan vendor:publish --provider=\"Leantony\\Grid\\Providers\\GridServiceProvider\"\n```\n\n\u003e You can also choose to publish the assets and views separately by passing the `--tag` argument to the command. \nFor the argument values, try `assets`, `views`, `config` for js|css assets, views and config respectively.\n\n## Add/Customize your layout\nBe sure to also include the necessary javascript and css assets on your layout. An example layout is as shown below;\n```html\n\u003c!-- sample laravel layout --\u003e\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"csrf-token\" content=\"{{ csrf_token() }}\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003ctitle\u003eMy application\u003c/title\u003e\n    \u003c!-- font awesome (required) --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css\" /\u003e\n    \u003c!-- progress bar (not required, but cool) --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.css\" /\u003e\n    \u003c!-- bootstrap (required) --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css\" /\u003e\n    \u003c!-- date picker (required if you need date picker \u0026 date range filters) --\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\"/\u003e\n    \u003c!-- grid's css (required) --\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"{{ asset('vendor/leantony/grid/css/grid.css') }}\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cnav class=\"navbar navbar-expand-sm bg-primary navbar-dark\"\u003e\n    \u003cul class=\"navbar-nav\"\u003e\n        \u003cli class=\"nav-item\"\u003e\n            \u003ca class=\"navbar-brand\" href=\"/\"\u003eMy appliation\u003c/a\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/nav\u003e\n\n\u003cdiv class=\"container\" style=\"margin-bottom: 100px;\"\u003e\n    \u003cdiv class=\"row\"\u003e\n        @yield('content')\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- modal container (required if you need to render dynamic bootstrap modals) --\u003e\n@include('leantony::modal.container')\n\n\u003c!-- progress bar js (not required, but cool) --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js\"\u003e\u003c/script\u003e\n\u003c!-- moment js (required by datepicker library) --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js\"\u003e\u003c/script\u003e\n\u003c!-- jquery (required) --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003c!-- popper js (required by bootstrap) --\u003e\n\u003cscript src=\"https://unpkg.com/popper.js/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n\u003c!-- bootstrap js (required) --\u003e\n\u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003c!-- pjax js (required) --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js\"\u003e\u003c/script\u003e\n\u003c!-- datepicker js (required for datepickers) --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"\u003e\u003c/script\u003e\n\u003c!-- required to supply js functionality for the grid --\u003e\n\u003cscript src=\"{{ asset('vendor/leantony/grid/js/grid.js') }}\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    // send csrf token (see https://laravel.com/docs/5.6/csrf#csrf-x-csrf-token) - this is required\n    $.ajaxSetup({\n        headers: {\n            'X-CSRF-TOKEN': $('meta[name=\"csrf-token\"]').attr('content')\n        }\n    });\n\n    // for the progress bar (required for progress bar functionality)\n    $(document).on('pjax:start', function () {\n        NProgress.start();\n    });\n    $(document).on('pjax:end', function () {\n        NProgress.done();\n    });\n\u003c/script\u003e\n\u003c!-- entry point for all scripts injected by the generated grids (required) --\u003e\n@stack('grid_js')\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Creating grids\nA laravel command is available to make it easy to create grids. It's usage is as shown below;\n```php\nphp artisan make:grid --model=\"{modelClass}\"\n```\nJust make sure you replace `{modelClass}` with your actual `eloquent` model class. E.g\n```php\nphp artisan make:grid --model=\"App\\User\"\n```\nOnce 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;\n\n```php\nclass UsersController extends Controller\n{\n    /**\n     * Display a listing of the resource.\n     *\n     * @param UsersGridInterface $usersGrid\n     * @param Request $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index(UsersGridInterface $usersGrid, Request $request)\n    {\n        // the 'query' argument needs to be an instance of the eloquent query builder\n        // you can load relationships at this point\n        return $usersGrid\n                    -\u003ecreate(['query' =\u003e User::query(), 'request' =\u003e $request])\n                    -\u003erenderOn('welcome'); // render the grid on the welcome view\n    }\n}\n```\nJust make sure that you do not call `-\u003eget()` on the query.\n\nIf you inject the interface on the controller, just make sure that you add a binding to the service provider. Like this;\n\n```php\n     /**\n     * Register any application services.\n     *\n     * @return void\n     */\n    public function register()\n    {\n        $this-\u003eapp-\u003ebind(UsersGridInterface::class, UsersGrid::class);\n    }\n```\n\nOtherwise, you can also instantiate the grid class like any other class then inject any constructor dependencies you might need.\n```php\n    /**\n     * Display a listing of the resource.\n     *\n     * @param Request $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index(Request $request)\n    {\n        $user = $request-\u003euser();\n        return (new UsersGrid(['user' =\u003e $user])) // you can then use it as $this-\u003euser within the class. It's set implicitly using the __set() call\n                    -\u003ecreate(['query' =\u003e User::query(), 'request' =\u003e $request])\n                    -\u003erenderOn('welcome');\n    }\n```\n\nIf 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;\n```php\n    /**\n     * Display a listing of the resource.\n     *\n     * @param Request $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index(Request $request)\n    {\n        $data = 'hello world';\n        \n        return (new UsersGrid())\n                    -\u003ecreate(['query' =\u003e User::query(), 'request' =\u003e $request])\n                    -\u003erenderOn('welcome', compact('data'));\n    }\n```\n\nFor eloquent relationships, its basically the same approach. Like this;\n```php\nclass UsersController extends Controller\n{\n    /**\n     * Display a listing of the resource.\n     *\n     * @param UsersGridInterface $usersGrid\n     * @param Request $request\n     * @return \\Illuminate\\Http\\Response\n     */\n    public function index(UsersGridInterface $usersGrid, Request $request)\n    {\n        // load relationships\n        $query = User::with(['posts', 'activities'])\n        return $usersGrid\n                    -\u003ecreate(['query' =\u003e $query, 'request' =\u003e $request])\n                    -\u003erenderOn('welcome');\n    }\n}\n```\nAnd once again, just make sure that you do not call `-\u003eget()` on the query.\n\n## Rendering the grid\nTo display your grid, simply add this to your view. Or any appropriate variable you passed into the `renderOn` method.\n```php\n{!! $grid !!}\n```\nFor a quick demonstration, be sure to check out the demo [here](http://laravel-grid.herokuapp.com/). The demo's source code is also [available on github](https://github.com/leantony/laravel-grid-app).\n\n## Updating local JS and CSS assets after package updates\nWhen 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;\n```php\nphp artisan vendor:publish --provider=\"Leantony\\Grid\\Providers\\GridServiceProvider\" --tag=assets --force\n```\nYou can also place this command in composer so that it is executed automatically on each update run. Like this;\n\n```php\n// ... composer config\n\"post-autoload-dump\": [\n    \"Illuminate\\\\Foundation\\\\ComposerScripts::postAutoloadDump\",\n    \"@php artisan package:discover\",\n    \"@php artisan vendor:publish --provider=\\\"Leantony\\\\Grid\\\\Providers\\\\GridServiceProvider\\\" --tag=assets --force\"\n]\n```\n\n# Next up\n[Rendering the grid](docs/rendering.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleantony%2Flaravel-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleantony%2Flaravel-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleantony%2Flaravel-grid/lists"}