Implementing with a PHP backend is a common requirement for enterprise applications handling large datasets. This guide provides a fully updated, 2026-compliant approach for connecting AG-Grid to a MySQL database using PHP, focusing on Server-Side Row Model (SSRM) for pagination , sorting , and filtering . Why Use Server-Side Data with PHP?
new agGrid.Grid(document.getElementById('grid'), gridOptions); ); </script> </body> </html>
Always use prepared statements to prevent SQL injection. aggrid php example updated
Data is fetched directly from the database (MySQL) on demand. Prerequisites AG-Grid Community/Enterprise: Download latest AG-Grid PHP: Version 8.2+ Database: MySQL/MariaDB Frontend: Simple HTML/JS or framework (React/Vue/Angular) 1. The Frontend: AG-Grid Configuration (Updated)
AG Grid is the industry standard for building feature-rich, high-performance data grids. When paired with PHP, it allows you to handle massive datasets smoothly by leveraging server-side processing. Implementing with a PHP backend is a common
In 2026, PHP is primarily used as an API layer to handle database operations securely. This updated example uses with prepared statements to prevent SQL injection.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css"> <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css"> <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script> </head> <body> <div id="myGrid" style="height: 500px; width: 100%;" class="ag-theme-alpine"></div> <script> const columnDefs = [ field: "id", headerName: "ID", sortable: true, filter: true , field: "name", headerName: "Product Name", sortable: true, filter: true , field: "price", headerName: "Price", sortable: true, filter: true ]; const gridOptions = columnDefs: columnDefs, defaultColDef: flex: 1, resizable: true , pagination: true, paginationPageSize: 10 ; const eGridDiv = document.querySelector('#myGrid'); new agGrid.Grid(eGridDiv, gridOptions); fetch('product-api.php') .then(response => response.json()) .then(data => gridOptions.api.setRowData(data)) .catch(error => console.error('Error:', error)); </script> </body> </html> new agGrid
If your dataset grows beyond 20,000 rows, Client-Side rendering will slow down the browser. You should upgrade the implementation to use AG Grid's :
</script>