new agGrid.Grid(document.getElementById('grid'), gridOptions); ); </script> </body> </html>
To add filtering and sorting, update the grid.php file to include the following code. aggrid php example updated
: As of April 2026 , ensure you are referencing documentation for AG Grid v35.2.1 to utilize the latest Theming API and performance enhancements. new agGrid
Create api/get-rows.php . This is the .
// Fetch the data from the PHP backend $dataUrl = 'data.php'; $data = json_decode(file_get_contents($dataUrl), true); This is the
// Grid Options const gridOptions = columnDefs: columnDefs, rowData: null, // Start empty defaultColDef: flex: 1, minWidth: 100, sortable: true , // Enable editing editType: 'fullRow', // Edit whole row at once onRowValueChanged: onRowValueChanged // Event listener for saves ;
// Column Definitions const columnDefs = [ field: "id", headerName: "ID", sortable: true, filter: true, width: 80 , field: "name", headerName: "Full Name", sortable: true, filter: true , field: "email", headerName: "Email Address", sortable: true, filter: true , field: "role", headerName: "User Role", sortable: true, filter: true , field: "status", headerName: "Account Status", sortable: true, filter: true ]; // Grid Options const gridOptions = columnDefs: columnDefs, pagination: true, paginationPageSize: 10, defaultColDef: flex: 1, minWidth: 100, ; // Initialize the Grid const gridDiv = document.querySelector('#myGrid'); const gridApi = agGrid.createGrid(gridDiv, gridOptions); // Fetch Data from PHP fetch('data.php') .then(response => response.json()) .then(data => gridApi.setGridOption('rowData', data); ) .catch(error => console.error('Error loading data:', error)); Use code with caution. 🚀 Key Features in this Update