Aggrid Php Example | Updated [better]
AG Grid is a powerful, feature-rich JavaScript data grid that allows developers to create complex, interactive tables with ease. While AG Grid is primarily a JavaScript library, it can be seamlessly integrated with PHP to create robust, data-driven applications. In this article, we'll explore an updated AG Grid PHP example, demonstrating how to implement AG Grid with PHP to create a dynamic, data-driven grid.
PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false, ]; try $pdo = new PDO($dsn, $user, $pass, $options); // Fetch data $stmt = $pdo->query('SELECT id, first_name, last_name, email, role, balance FROM users'); $data = $stmt->fetchAll(); // Return JSON header('Content-Type: application/json'); echo json_encode($data); catch (\PDOException $e) throw new \PDOException($e->getMessage(), (int)$e->getCode()); ?> Use code with caution. 3. Frontend: index.html (AG Grid Setup)
Finally, register this controller in your routes/api.php file:
CREATE DATABASE grid_demo; USE grid_demo; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100), role VARCHAR(50), balance DECIMAL(10, 2) ); -- Insert sample data INSERT INTO users (first_name, last_name, email, role, balance) VALUES ('John', 'Doe', 'john@example.com', 'Admin', 1500.50), ('Jane', 'Smith', 'jane@example.com', 'User', 2500.75), ('Bob', 'Johnson', 'bob@example.com', 'User', 500.00), ('Alice', 'Williams', 'alice@example.com', 'Editor', 3200.00); Use code with caution. 2. PHP Backend: data.php
) .then(response => response.json()) .then(data => params.success( rowData: data.rows, rowCount: data.total ); ) .catch(error => params.fail()); aggrid php example updated
Integrating with PHP is a powerful way to handle large datasets with a modern, high-performance UI. Because PHP is a server-side language and AG Grid is a client-side JavaScript library, the bridge between them is typically a RESTful API that handles data fetching and updates. The Modern Architecture
Integrating AG Grid with a PHP backend is a proven strategy for building high-performance, data-rich web applications. By moving away from client-side data manipulation and leveraging powerful server-side adapters like clickbar/ag-grid-laravel , you can handle immense datasets, provide complex filtering and sorting, and offer essential features like data exports with minimal development overhead.
if (!empty($conditions)) $where = " WHERE " . implode(' AND ', $conditions);
By using AG Grid's onCellValueChanged event, you can send an asynchronous POST or PUT request back to a PHP script to save changes to the database instantly. Security and Performance AG Grid is a powerful, feature-rich JavaScript data
PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false, ]; try $pdo = new PDO($dsn, $user, $pass, $options); // Fetch records $stmt = $pdo->query('SELECT id, name, role, department, salary, join_date FROM employees'); $data = $stmt->fetchAll(); // Output valid JSON echo json_encode($data, JSON_NUMERIC_CHECK); catch (\PDOException $e) // Return standard HTTP server error code and error message http_response_code(500); echo json_encode(['error' => 'Database connection failed: ' . $e->getMessage()]); Use code with caution. 4. The Frontend Grid ( index.html )
On the frontend, you define columnDefs and use the fetch() API to pull from your PHP endpoint.
Add event listeners like onCellValueChanged to send POST requests back to a PHP update.php script for real-time editing.
Building an Enterprise Data Grid with AG Grid and PHP (2026 Guide) The existing example
To maintain a clean separation of concerns, this implementation uses a split architecture:
Integrating typically involves a frontend client (JavaScript) requesting data from a backend script (PHP) that queries a database (like MySQL). In modern versions like AG Grid 33 , the process is streamlined by utilizing the createGrid API and the Server-Side Row Model (SSRM) for large datasets. 1. Frontend: The JavaScript Grid The grid requires a container and a configuration object ( gridOptions ). For large datasets, use rowModelType: 'serverSide' to fetch only the data needed for the current view. "height: 500px;" "ag-theme-alpine"
: For those using Laravel, the ag-grid-laravel package provides a pre-built adapter to handle the heavy lifting of server-side requests.
The existing example, a dusty "AG Grid + PHP/MySQL" demo, was five years old. It used AG Grid v23.2 (two major versions behind) and raw PHP mysqli with concatenated SQL. New users trying it out kept getting errors: "undefined property: data.lastModified" and "CORS preflight fails on PUT."
// Define the grid options $options = [ 'columnDefs' => $columns, 'rowData' => [] ];