Usage

A laravel command is available to make it easy to create grids. Once installed, just run the command:

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. If a grid for that model class exists, you will be provided an option to overwrite or skip them.

Once the generation of the grid is done, you can add add it in your controller like this. E.g a user model grid:

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
    }
}

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 $user within the class. It's set implicitly using the __set() call
                    ->create(['query' => User::query(), 'request' => $request])
                    ->renderOn('welcome');
    }

Adding $user above as part of the key value pair array on the create method would achieve the same results as above.

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. Just ensure that you pass in an instance of the query builder. 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');
    }
}

Then display the grid on your view like this;

{!! $grid !!}

Navigate to your page, and you should see it. For a quick preview, feel free to check out the sample app. Also for reference, its source code is here

To enable javascript utilities such as Pjax, ensure that you have their dependencies included on your page/layout. Once you have done that, ensure that you have a @push('grid_js') section on your view/layout, just after the required javascript dependencies. This is the point where the grid's javscript will be injected. An example is as shown below;

    <!-- dependencies e.g jquery, pjax, bootstrap js come here -->
    
    <!-- load the grid's javascipt -->
    <script src="{{ asset('vendor/leantony/grid/js/grid.js') }}"></script>
    <script>
        // setup ajax. This is required, so that the CSRF token is sent during AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <!-- the initialization javascript for any of the grid(s) you create will be injected here. Having this will ensure that the script is executed after it's dependencies have been loaded. -->
    @stack('grid_js')

Just make sure that the meta element with the name csrf-token is available on your layout/blade view. E.g

<meta name="csrf-token" content="{{ csrf_token() }}">

To customize the grid, check out the customization section. Following the instructions above should get you on the right track. However, if you run into any issues, please be sure to raise it.