const columnDefs = [ { field: "id", sortable: true, filter: true }, { field: "name", editable: true }, { field: "category", editable: true }, { field: "price", editable: true } ]; const gridOptions = { columnDefs: columnDefs, // Capture edits to update the database onCellValueChanged: (params) => { fetch('update.php', { method: 'POST', body: JSON.stringify(params.data) }); } }; const gridDiv = document.querySelector('#myGrid'); const api = agGrid.createGrid(gridDiv, gridOptions); // Fetch initial data from PHP fetch('fetch.php') .then(response => response.json()) .then(data => api.setGridOption('rowData', data)); Use code with caution. 3. The Backend: PHP & MySQL API
This script retrieves data from MySQL and returns it to the grid as a JSON array.
When a cell is edited in the grid, this script receives the updated row data. aggrid php example updated
Your PHP scripts will handle data retrieval and updates using JSON as the bridge.
prepare("UPDATE products SET name=?, category=?, price=? WHERE id=?"); $stmt->bind_param("ssdi", $data['name'], $data['category'], $data['price'], $data['id']); $stmt->execute(); ?> Use code with caution. 4. Advanced: Server-Side Row Model (SSRM) const columnDefs = [ { field: "id", sortable:
Use the AG Grid Community edition via CDN for a quick setup.
Integrating with PHP allows you to build high-performance, enterprise-grade data tables with features like server-side pagination, sorting, and filtering. This guide provides a modern example of connecting AG Grid to a PHP/MySQL backend for a full CRUD (Create, Read, Update, Delete) experience. 1. Database and Environment Setup When a cell is edited in the grid,
Before writing code, ensure you have a local server like XAMPP running with Apache and MySQL.