Using AG Grid Server-Side row model with Angular, Laravel & MySQL

Learn how to perform server-side operations in AG Grid using Laravel that uses the MySQL database.

Please see the accompanying blog post which explains the implementation.

This example implements the following features in the server-side: Grouping, Filtering, Sorting, Aggregation, Pagination, and Fetching Asynchronous Set Filter Values.

Here's how our grid looks with the features enabled:

This repository is intended as a starting point when learning how to use the Server-Side Row Model, as it provides a simple grid implementation that uses a limited set of features and grid configurations.

Prerequisites

The following should already be installed on your computer:

• PHP
• MySQL
• Composer

Note: If you don't have these installed please follow the documentation for installing PHP, installing Composer and how to install Laravel using Composer and installing MySQL

This example was tested using the following versions:

• AG Grid v25.1.0
• Angular v11.1.2
• Laravel v8.26.1
• PHP v7.4.14
• MySQL v8.0.23

Installation

Clone this repro and run the following commands in the root directory to install the required dependencies for the Laravel development server.

cd server
composer install

Configuring the Database and Environment

Now that we've installed the dependencies, connect to your MySQL server with your username and password:

$ mysql -u root -p

then create a database with the name sample_data:

mysql> create database sample_data; 

To connect this database to Laravel, we need to create an .env file (you can rename the file .env.example to .env) and then add the database name, username and password inside the .env file as shown below (I've used root and password as an example):

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=sample_data
DB_USERNAME=root
DB_PASSWORD=password

Next, run this command to generate an application key for this app:

$ php artisan key:generate

Setup Data

Now that we have a database, let's populate it with data. The data for this example can be found here: server/database/data/olympic-winners.json.

Run the following command to create a table called athletes inside our database and seed it with the data in the json file above:

$ php artisan migrate:fresh --seed

Run the App

Now that we've configured everything on the backend, we can start Laravel's local development server using the Artisan CLI's serve command:

$ php artisan serve

Let's go back to the root directory and start up our Angular development server:

$ cd client && npm install
$ npm run start

That's it! The application now should be running at http://localhost:4200/