Aggrid Php Example Updated May 2026

Building a robust data grid in PHP doesn't have to be complicated. By combining AG Grid's powerful frontend features with a clean PHP backend, you can handle massive datasets with ease.

This guide provides a modern, updated approach to integrating AG Grid with PHP and MySQL using the latest Fetch API and JSON best practices. 🏗️ The Architecture

To create a functional AG Grid PHP example, you need three core components: The Database: A MySQL table to store your data.

The Backend (PHP): A script to fetch data and return it as JSON. aggrid php example updated

The Frontend (HTML/JS): The AG Grid configuration that consumes the JSON. 1. Setup the Database

First, create a simple table and populate it with sample data.

CREATE DATABASE grid_db; USE grid_db; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(100), email VARCHAR(100), role VARCHAR(50), status VARCHAR(20) ); INSERT INTO users (name, email, role, status) VALUES ('Alice Smith', 'alice@example.com', 'Admin', 'Active'), ('Bob Jones', 'bob@example.com', 'User', 'Inactive'), ('Charlie Brown', 'charlie@example.com', 'Editor', 'Active'); Use code with caution. 2. Create the Backend (data.php) Building a robust data grid in PHP doesn't

This script connects to your database and outputs the results in a format AG Grid understands. We use PDO for security and json_encode for the response.

PDO::ATTR_ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false, ]; try $pdo = new PDO($dsn, $user, $pass, $options); $stmt = $pdo->query("SELECT id, name, email, role, status FROM users"); $data = $stmt->fetchAll(); echo json_encode($data); catch (\PDOException $e) echo json_encode(['error' => $e->getMessage()]); ?> Use code with caution. 3. Build the Frontend (index.html)

In this updated version, we use the AG Grid Community CDN and the modern Fetch API to retrieve our PHP data. </body> </html>

AG Grid PHP Example

Key Updates From Legacy Examples

If you are maintaining older code, here is what has changed in this "Updated" approach:

5. AG Grid Frontend Configuration (Updated)

Create an index.html file using AG Grid v31+ with the server-side row model.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AG Grid PHP Example – Updated Server-Side</title>
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.2/dist/ag-grid-community.min.js"></script>
    <style>
        html, body  height: 100%; margin: 0; 
        .ag-theme-alpine  height: 90vh; width: 100%; 
    </style>
</head>
<body>
    <div id="myGrid" class="ag-theme-alpine"></div>

<script>
    // Define columns
    const columnDefs = [
         field: "id", sortable: true, filter: "agNumberColumnFilter" ,
         field: "product_name", headerName: "Product Name", sortable: true, filter: "agTextColumnFilter" ,
         field: "category", sortable: true, filter: "agSetColumnFilter" ,
         field: "price", sortable: true, filter: "agNumberColumnFilter" ,
         field: "stock_quantity", headerName: "Stock", sortable: true ,
         field: "last_updated", headerName: "Last Updated", sortable: true, filter: "agDateColumnFilter" 
    ];
// Server-side datasource
    const dataSource = 
        getRows: async (params) => 
            const request = 
                startRow: params.request.startRow,
                endRow: params.request.endRow,
                sortModel: params.request.sortModel,
                filterModel: params.request.filterModel
            ;
try 
                const response = await fetch('http://localhost/aggregid-php/api/get-rows.php', 
                    method: 'POST',
                    headers:  'Content-Type': 'application/json' ,
                    body: JSON.stringify(request)
                );
                const result = await response.json();
                params.successCallback(result.rows, result.lastRow);
             catch (error) 
                console.error('AG Grid fetch failed:', error);
                params.failCallback();
;
const gridOptions = 
        columnDefs: columnDefs,
        rowModelType: 'serverSide',
        serverSideStoreType: 'partial',
        cacheBlockSize: 100,
        pagination: true,
        paginationPageSize: 100,
        animateRows: true
    ;
const gridDiv = document.querySelector('#myGrid');
    const gridApi = agGrid.createGrid(gridDiv, gridOptions);
    gridApi.setGridOption('serverSideDatasource', dataSource);
</script>



</body>
</html>

Code Review Draft: AG Grid PHP Integration