|
| 1 | +--- |
| 2 | +title: Laravel |
| 3 | +--- |
| 4 | + |
| 5 | +This package is a Laravel integration for the Grid.js. The packages makes it easy to create data-grid for your Laravel application, for example admin panel lists. It covers the basic server side functionalities for Grid.js like search, sorting and pagination. |
| 6 | + |
| 7 | +GitHub: https://github.com/wdev-rs/laravel-datagrid |
| 8 | + |
| 9 | +## Installation |
| 10 | + |
| 11 | +You can install the package via composer: |
| 12 | + |
| 13 | +```bash |
| 14 | +composer require wdev-rs/laravel-datagrid |
| 15 | +``` |
| 16 | + |
| 17 | +Install the Vue.js integration: |
| 18 | + |
| 19 | +```bash |
| 20 | +npm install gridjs-vue |
| 21 | +``` |
| 22 | + |
| 23 | +Publish the vendor files by running |
| 24 | + |
| 25 | +```bash |
| 26 | +php artisan vendor:publish --provider="WdevRs\LaravelDatagrid\LaravelDatagridServiceProvider" |
| 27 | +``` |
| 28 | + |
| 29 | +Register the DataGrid fronted Vue.js component by adding the following line to your `app.js`: |
| 30 | + |
| 31 | +```javascript |
| 32 | +require('./vendor/laravel-datagrid/laravel-datagrid'); |
| 33 | +``` |
| 34 | + |
| 35 | +## Usage |
| 36 | +The base of this package is the `\WdevRs\LaravelDatagrid\DataGrid\DataGrid` class. This class is used to define the |
| 37 | +columns and the behavior of the datagrid. While you can use this class directly from the controller, I'll |
| 38 | +suggest extending it and create separate classes for each datagrid. |
| 39 | + |
| 40 | +``` php |
| 41 | +class CategoriesDataGrid extends DataGrid |
| 42 | +{ |
| 43 | + |
| 44 | + /** |
| 45 | + * CategoriesDataGrid constructor. |
| 46 | + */ |
| 47 | + public function __construct() |
| 48 | + { |
| 49 | + $this->query(Category::query()) |
| 50 | + ->column('id', 'ID', null, 50) |
| 51 | + ->column('name', 'Name', function ($category) { |
| 52 | + return view('admin.categories.actions.edit_link', ['category' => $category])->render(); |
| 53 | + }) |
| 54 | + } |
| 55 | +} |
| 56 | +``` |
| 57 | + |
| 58 | +Using the `query` method you can define what should be the base query for the DataGrid. It accepts a Laravel Query Builder object. |
| 59 | +The `column` method is used to define the columns of the DataGrid, the argument are as follows: |
| 60 | +- `id` - the name of the field in the database |
| 61 | +- `name` - the label which should appear in the DataGrid column header |
| 62 | +- `formatter` - optional, callable allows you to format the display of the column. As you can see from the above example |
| 63 | + probably the most elegant way to do this is to include a blade view and render it. |
| 64 | +- `width` - optional, the with of the column |
| 65 | + |
| 66 | +When the DataGrid definition is ready, you can add it to the controller: |
| 67 | + |
| 68 | +```php |
| 69 | + public function index(CategoriesDataGrid $dataGrid, Request $request) |
| 70 | + { |
| 71 | + return $dataGrid->render(); |
| 72 | + } |
| 73 | +``` |
| 74 | + |
| 75 | +If the `render` method is called without arguments it will use the default view `resources/views/vendor/laravel-datagrid/datagrid.blade.php`, |
| 76 | +or you can pass your own view and include the DataGrid blade file there: |
| 77 | + |
| 78 | +```php |
| 79 | + public function index(CategoriesDataGrid $dataGrid, Request $request) |
| 80 | + { |
| 81 | + return $dataGrid->render('admin.common.index'); |
| 82 | + } |
| 83 | +``` |
| 84 | + |
| 85 | +## Credits |
| 86 | + |
| 87 | +- [Daniel Werner](https://github.com/wdev-rs) |
| 88 | + |
| 89 | +## License |
| 90 | + |
| 91 | +The MIT License (MIT) |
0 commit comments