If you are maintaining older code, here is what has changed in this "Updated" approach:
The example above automatically handles:
Important update: AG Grid v31+ uses serverSideStoreType: 'partial' (replaces old serverSideStoreType: 'full').
Create an HTML file called "index.html" and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>AG Grid PHP Example</title>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-balham.css">
</head>
<body>
<div id="grid" style="height: 200px; width: 400px;" class="ag-theme-balham"></div>
<script>
// Fetch data from PHP script
fetch('grid.php')
.then(response => response.json())
.then(data =>
// Create AG Grid
const gridOptions =
columnDefs: [
field: 'name' ,
field: 'email' ,
field: 'department'
],
rowData: data
;
new agGrid.Grid(document.getElementById('grid'), gridOptions);
);
</script>
</body>
</html>
This HTML file includes the AG Grid library and creates a simple grid with three columns. It then fetches data from the "grid.php" script and passes it to the AG Grid.
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL UNIQUE,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Create an index.html file using AG Grid v31+ with the server-side row model. aggrid php example updated
<!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>
Create a project folder: aggrid-php-example/. Inside, create index.html (or index.php), server.php, and db.php.
Required tools:
Include AG Grid in your HTML (updated to v31.3.2): If you are maintaining older code, here is
<!-- index.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css">
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
This updated AG Grid PHP example provides a fully functional, enterprise-ready data grid with server-side sorting, filtering, pagination, and CRUD operations. The backend uses modern PHP (8.1+) with PDO, and the frontend leverages AG Grid v31’s server-side row model for optimal performance even with thousands of rows.
Next steps: Integrate AG Grid Enterprise features like Excel export, charting, or master/detail views, and enhance PHP with input validation, logging, and rate limiting for production deployment.
File structure recap:
aggrid-php-example/
├── index.html
├── server.php
├── db.php
└── (optional) .env for credentials
Run with php -S localhost:8000 and open http://localhost:8000. Your AG Grid will communicate seamlessly with the PHP backend, handling all dynamic data operations in real time.
Assuming you want a concise, up-to-date PHP example showing how to load data into AG Grid (frontend) and serve it from PHP (backend) via JSON — here’s a minimal end-to-end snippet. Create an HTML file called "index
Frontend (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>AG Grid PHP Example</title>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css" />
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css" />
<style>
html, body, #myGrid height: 100%; margin: 0; width: 100%;
</style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine"></div>
<script>
const columnDefs = [
field: "id", sortable: true, filter: true, width: 90 ,
field: "name", sortable: true, filter: true ,
field: "email", sortable: true, filter: true ,
field: "created_at", headerName: "Created", sortable: true, filter: true
];
const gridOptions =
columnDefs,
defaultColDef: resizable: true ,
pagination: true,
paginationPageSize: 20
;
const eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
// Fetch data from PHP endpoint
fetch('api/users.php')
.then(r =>
if (!r.ok) throw new Error('Network response was not ok');
return r.json();
)
.then(data => gridOptions.api.setRowData(data))
.catch(err => console.error('Fetch error:', err));
</script>
</body>
</html>
Backend (api/users.php)
<?php
header('Content-Type: application/json');
// Simple PDO connection — adjust DSN, user, pass for your environment
$dsn = 'mysql:host=127.0.0.1;dbname=mydb;charset=utf8mb4';
$user = 'dbuser';
$pass = 'dbpass';
try
$pdo = new PDO($dsn, $user, $pass, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
]);
// Basic example: return all users. For large tables, implement paging/filtering server-side.
$stmt = $pdo->query('SELECT id, name, email, created_at FROM users ORDER BY id DESC LIMIT 500');
$rows = $stmt->fetchAll();
echo json_encode($rows);
catch (PDOException $e)
http_response_code(500);
echo json_encode(['error' => 'Database error']);
Notes / suggestions (concise)
Related search suggestions (useful terms)