Aggrid - Php Example Updated

Building a High-Performance Data Grid: AG Grid & PHP (2026 Guide)

When your dataset grows from hundreds to hundreds of thousands of rows, client-side rendering isn't enough. You need a robust server-side strategy. Below is an updated guide and example for integrating AG Grid (v35+) 1. The Frontend: Modern AG Grid Setup For 2026, we utilize the Server-Side Row Model (SSRM)

. This allows the grid to only fetch the data it needs to display, rather than loading the entire database at once. < "https://jsdelivr.net" "height: 500px; width: 100%;" "ag-theme-alpine" > const columnDefs = [ field: 'agNumberColumnFilter' , field: 'agTextColumnFilter' , field: , field:

]; 

    const gridOptions = 
        columnDefs: columnDefs,
        rowModelType: 'serverSide'</p>

, // Enables SSRM pagination: true, paginationPageSize: , cacheBlockSize: ; 

    const gridDiv = document.querySelector(</p>

); const api = agGrid.createGrid(gridDiv, gridOptions); 

    // Fetch data from PHP backend
    const datasource = 
        getRows: (params) => 
            fetch( 'datasource.php' , 
                method:</p>

, body: JSON.stringify(params.request), headers: 'Content-Type' 'application/json'

) .then(response => response.json()) .then(data => params.success( rowData: data.rows, rowCount: data.total ); ) .catch(error => params.fail()); ; 

    api.setGridOption( 'serverSideDatasource' , datasource);
</ Use code with caution. Copied to clipboard 2. The Backend: Scalable PHP Logic Your PHP script must handle the filterModel startRow/endRow parameters sent by AG Grid. Using is critical for security to prevent SQL injection. // datasource.php 'Content-Type: application/json' );

$input = json_decode(file_get_contents( 'php://input' ), true);

$startRow = $input[ 'startRow' ; $endRow = $input[ ; $limit = $endRow - $startRow; // Database Connection 'mysql:host=localhost;dbname=sports_db' // 1. Build the WHERE clause from AG Grid's filterModel " WHERE 1=1 " 'filterModel' 'filterModel' $col => $filter) // Simple example for text filter 'filterType' ) $where .= " AND $col LIKE " . $pdo->quote( . $filter[ ); } // 2. Fetch Paginated Data "SELECT * FROM athletes $where LIMIT :start, :limit" ; $stmt = $pdo->prepare($sql); $stmt->bindValue( , (int)$startRow, PDO::PARAM_INT); $stmt->bindValue(

, (int)$limit, PDO::PARAM_INT); $stmt->execute(); $rows = $stmt->fetchAll(PDO::FETCH_ASSOC); // 3. Get Total Record Count for Pagination UI $totalSql = "SELECT COUNT(*) FROM athletes $where" ; $total = $pdo->query($totalSql)->fetchColumn(); json_encode([ => (int)$total ]); Use code with caution. Copied to clipboard Key Considerations for 2026 Version Updates : AG Grid v35 introduces improved Formula Editors BigInt support , making it ideal for financial PHP applications. : Always use prepared statements $pdo->quote() when handling filterModel keys to prevent malicious SQL injections. State Management : If you are using modern PHP frameworks like , consider leveraging its built-in paginators to simplify the server-side Excel export ChatGPT or Copilot – which is better for PHP development?

AG Grid PHP Example: A Comprehensive Guide to Implementing AG Grid with PHP

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.

What is AG Grid?

AG Grid is a popular JavaScript library used to create interactive, feature-rich data grids. It offers a wide range of features, including support for large datasets, customizable columns, row selection, filtering, sorting, and more. AG Grid is highly customizable and can be easily integrated with various frameworks and libraries, including PHP.

Why Use AG Grid with PHP?

PHP is a popular server-side language used for web development, and AG Grid can be used to create dynamic, data-driven grids that interact with PHP applications. By integrating AG Grid with PHP, developers can leverage the strengths of both technologies to create powerful, data-driven applications. Some benefits of using AG Grid with PHP include:

AG Grid PHP Example: Updated

In this example, we'll create a simple AG Grid application that interacts with a PHP database. Our application will display a grid of data, allow users to filter and sort data, and perform server-side filtering and sorting.

Step 1: Install AG Grid

To get started, download the AG Grid library from the official website. For this example, we'll use the community edition of AG Grid.

Step 2: Create a PHP Database

Create a simple PHP database using MySQL or your preferred database management system. For this example, we'll use a simple database with a single table called "employees".

CREATE TABLE employees (
  id INT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255),
  department VARCHAR(255)
);

Step 3: Create a PHP Backend

Create a PHP backend that will interact with the AG Grid application. Our backend will consist of two files: grid.php and data.php.

grid.php

<?php
// Include the AG Grid library
require_once 'ag-grid-community.js';
// Define the grid columns
$columns = [
    ['headerName' => 'Name', 'field' => 'name'],
    ['headerName' => 'Email', 'field' => 'email'],
    ['headerName' => 'Department', 'field' => 'department']
];
// Define the grid options
$options = [
    'columnDefs' => $columns,
    'rowData' => []
];
// Create the grid
$grid = new ag_grid($options);
// Render the grid
echo $grid->render();

data.php

<?php
// Define the database connection settings
$dbHost = 'localhost';
$dbUsername = 'username';
$dbPassword = 'password';
$dbName = 'database';
// Connect to the database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check for connections errors
if ($conn->connect_error) 
    die("Connection failed: " . $conn->connect_error);
// Retrieve the data from the database
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);
// Fetch the data
$data = [];
while ($row = $result->fetch_assoc()) 
    $data[] = $row;
// Close the database connection
$conn->close();
// Output the data in JSON format
header('Content-Type: application/json');
echo json_encode($data);

Step 4: Integrate AG Grid with PHP

Update the grid.php file to integrate AG Grid with the PHP backend. aggrid php example updated

<?php
// Include the AG Grid library
require_once 'ag-grid-community.js';
// Define the grid columns
$columns = [
    ['headerName' => 'Name', 'field' => 'name'],
    ['headerName' => 'Email', 'field' => 'email'],
    ['headerName' => 'Department', 'field' => 'department']
];
// Define the grid options
$options = [
    'columnDefs' => $columns,
    'rowData' => []
];
// Create the grid
$grid = new ag_grid($options);
// Fetch the data from the PHP backend
$dataUrl = 'data.php';
$data = json_decode(file_get_contents($dataUrl), true);
// Update the grid data
$options['rowData'] = $data;
// Render the grid
echo $grid->render();

Step 5: Add Filtering and Sorting

To add filtering and sorting, update the grid.php file to include the following code.

<?php
// Include the AG Grid library
require_once 'ag-grid-community.js';
// Define the grid columns
$columns = [
    ['headerName' => 'Name', 'field' => 'name', 'filter' => 'agTextColumnFilter'],
    ['headerName' => 'Email', 'field' => 'email', 'filter' => 'agTextColumnFilter'],
    ['headerName' => 'Department', 'field' => 'department', 'filter' => 'agTextColumnFilter']
];
// Define the grid options
$options = [
    'columnDefs' => $columns,
    'rowData' => [],
    'pagination' => true,
    'paginationAutoPageSize' => true
];
// Create the grid
$grid = new ag_grid($options);
// Fetch the data from the PHP backend
$dataUrl = 'data.php';
$data = json_decode(file_get_contents($dataUrl), true);
// Update the grid data
$options['rowData'] = $data;
// Add server-side filtering and sorting
if (isset($_GET['filter'])) 
    $filter = $_GET['filter'];
    $data = [];
    // Apply the filter
    foreach ($data as $row) 
        if (strpos($row['name'], $filter) !== false
// Render the grid
echo $grid->render();

Conclusion

In this updated AG Grid PHP example, we've demonstrated how to integrate AG Grid with a PHP backend to create a dynamic, data-driven grid. We've covered the basics of AG Grid, including column definitions, grid options, and data rendering. We've also shown how to add filtering and sorting to the grid using server-side processing.

By following this example, developers can create powerful, data-driven applications using AG Grid and PHP. With its extensive feature set and customization options, AG Grid is an ideal choice for developers looking to create complex, interactive data grids.

Further Reading

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"

"https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js" > const gridOptions = columnDefs: [ field: 'agNumberColumnFilter' , field: 'agTextColumnFilter' , field:

], // For large datasets (Requires AG Grid Enterprise) rowModelType: 'serverSide' , pagination: true, paginationPageSize: ;

const myGridElement = document.querySelector(

); const api = agGrid.createGrid(myGridElement, gridOptions);

// Define how to fetch data from your PHP backend const datasource = getRows: (params) => fetch( 'backend.php' , method:

, body: JSON.stringify(params.request), headers: 'Content-Type' 'application/json'

) .then(response => response.json()) .then(data => params.success( rowData: data.rows, rowCount: data.total ); ) .catch(() => params.fail()); ;

api.setGridOption( 'serverSideDatasource' , datasource); </ Use code with caution. Copied to clipboard createGrid

is the updated method for instantiating grids in recent versions. 2. Backend: The PHP Script ( backend.php

The backend script receives a JSON request containing sorting, filtering, and row range ( $start = $request[ 'startRow' ; $limit = ($request[ ) - $start; // Example Database Connection (PDO) "mysql:host=localhost;dbname=test"

// Build dynamic SQL based on AG Grid request (simplified for example) "SELECT * FROM users LIMIT :start, :limit" ; $stmt = $pdo->prepare($sql); $stmt->bindValue( , (int)$start, PDO::PARAM_INT); $stmt->bindValue(

, (int)$limit, PDO::PARAM_INT); $stmt->execute();

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC); $total = $pdo->query( "SELECT COUNT(*) FROM users" )->fetchColumn(); json_encode([ => (int)$total ]); Use code with caution. Copied to clipboard 3. Key Framework Integrations

If you are using a modern PHP framework, there are pre-built adapters to handle the complex SQL generation for sorting and grouping: ag-grid-laravel adapter to automatically handle AgGridQueryBuilder contributed module exists for integrating AG Grid into Drupal views. 4. Implementation Best Practices

Integrating requires a bridge between your backend (MySQL/PostgreSQL) and the frontend grid via a JSON API. Because AG Grid is a client-side JavaScript library, the PHP portion focuses on serving data and handling server-side operations like pagination, filtering, and sorting. 1. Basic Project Structure

A modern AG Grid setup typically uses a "Fetch" pattern rather than direct PHP embedding: index.html : Loads the AG Grid library and initializes the grid. : Handles the gridOptions and fetches data from the backend. : Queries the database and returns a JSON-encoded array. 2. Frontend Setup (JavaScript)

To initialize the grid, you need to define column headers and a source. Using the latest setGridOption method is recommended for updates. javascript gridOptions = { columnDefs: [ field: , headerName: , field: , headerName: "Full Name" , { field: , headerName: , sortable: // Use pagination for large datasets pagination: , paginationPageSize: // Initialize and Fetch Data gridDiv = document.querySelector( gridApi = agGrid.createGrid(gridDiv, gridOptions); Building a High-Performance Data Grid: AG Grid &

fetch( 'data.php'

) .then(response => response.json()) .then(data => gridApi.setGridOption( Use code with caution. Copied to clipboard 3. Backend Data Source (PHP) script serves as the API. Ensure you set the correct Content-Type header so the browser interprets it as JSON. query( "SELECT id, name, email FROM users" ); $results = $stmt->fetchAll(PDO::FETCH_ASSOC); // Output JSON for AG Grid json_encode($results); (PDOException $e) json_encode([ => $e->getMessage()]); ?> Use code with caution. Copied to clipboard 4. Advanced: Server-Side Row Model For datasets with millions of rows, use the AG Grid Enterprise Server-Side Row Model

: Instead of fetching all data at once, the grid sends a request to PHP containing the start row, end row, sort parameters, and filters. PHP Handling : Use these parameters to construct a SQL query to return only the visible slice of data. 5. Key Updates for 2026 Modularization

: AG Grid v33+ uses a modular system to reduce bundle size by 20-40%. : Use the new Theming API

for deeper CSS customization without overriding complex internal rules. Browser Support

: AG Grid 27+ has officially dropped support for Internet Explorer 11. AG Grid Blog CRUD example

(Create, Read, Update, Delete) showing how to send edits back to a PHP script? solidjs-community/solid-ag-grid - GitHub

Here are some of the features that make AG Grid stand out: * Grouping / Aggregation * * Accessibility support. * Custom Filtering. What's New in AG Grid 33

This guide provides a modern implementation of AG Grid (version 35.x) using PHP 8.x as the backend. By 2026, standard practices for data grids have shifted toward using an API-first approach where PHP serves JSON to the client-side grid. 1. Front-End: Grid Setup

Modern AG Grid versions utilize createGrid rather than older constructor methods. This example uses the Client-Side Row Model for simplicity, which is ideal for datasets up to 100,000 rows.

Use code with caution. Copied to clipboard 2. Back-End: PHP API (api.php)

In 2026, PHP is primarily used as an API layer to handle database operations securely. This updated example uses PDO with prepared statements to prevent SQL injection.

PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, ]); $action = $_GET['action'] ?? ''; if ($action === 'read') // Fetch data for the grid $stmt = $pdo->query("SELECT id, name, email, role FROM users"); echo json_encode($stmt->fetchAll()); if ($action === 'update') // Basic CRUD update example $data = json_decode(file_get_contents('php://input'), true); $stmt = $pdo->prepare("UPDATE users SET name = ?, email = ? WHERE id = ?"); $stmt->execute([$data['name'], $data['email'], $data['id']]); echo json_encode(['status' => 'success']); ?> Use code with caution. Copied to clipboard 3. Key 2026 Best Practices

Virtualization: AG Grid enables row and column virtualization by default to handle large data efficiently.

Server-Side Row Model (SSRM): For millions of rows, use rowModelType: 'serverSide' to lazy-load data in chunks.

Immutable Data: Enable immutableData: true and provide a getRowId function (using your database primary key) to optimize re-renders during updates.

Security: Always use POST/PUT for updates and ensure your PHP backend validates all incoming JSON data. AG Grid What's new

Title: "Unlock the Power of Interactive Tables with AG Grid PHP Example"

Introduction:

Are you tired of using boring, static tables on your website? Do you want to provide your users with a more engaging and interactive experience? Look no further than AG Grid, a powerful and feature-rich JavaScript library for creating interactive tables. In this post, we'll explore how to use AG Grid with PHP to create a dynamic and customizable table.

What is AG Grid?

AG Grid is a popular JavaScript library for creating interactive tables. It offers a wide range of features, including:

Why Use AG Grid with PHP?

While AG Grid is a JavaScript library, it can be easily integrated with PHP to create a dynamic and interactive table. By using AG Grid with PHP, you can:

AG Grid PHP Example

In this example, we'll create a simple AG Grid table using PHP and MySQL. We'll assume that you have a basic understanding of PHP and MySQL.

Step 1: Install AG Grid

To get started, download the AG Grid library from the official website. For this example, we'll use the community edition.

Step 2: Create a MySQL Database

Create a MySQL database and add a table with some sample data. For this example, we'll use a simple table called "employees" with the following columns:

| id | name | email | department | | --- | --- | --- | --- | | 1 | John Smith | john.smith@example.com | Sales | | 2 | Jane Doe | jane.doe@example.com | Marketing| | 3 | Bob Brown | bob.brown@example.com | IT |

Step 3: Create a PHP Script

Create a PHP script called "grid.php" and add the following code:

<?php
// Configuration
$dbHost = 'localhost';
$dbUsername = 'your_username';
$dbPassword = 'your_password';
$dbName = 'your_database';
// Connect to database
$conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($conn->connect_error) 
    die("Connection failed: " . $conn->connect_error);
// Fetch data from database
$sql = "SELECT * FROM employees";
$result = $conn->query($sql);
// Close database connection
$conn->close();
// Convert data to JSON
$data = array();
while($row = $result->fetch_assoc()) 
    $data[] = $row;
// Output JSON data
header('Content-Type: application/json');
echo json_encode($data);

This script connects to a MySQL database, fetches data from the "employees" table, and outputs the data in JSON format.

Step 4: Create an HTML File

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.

Conclusion:

In this example, we've created a simple AG Grid table using PHP and MySQL. We've demonstrated how to fetch data from a database and display it in an interactive table. AG Grid offers a wide range of features and customization options, making it a powerful tool for creating dynamic and interactive tables.

I hope this helps! Let me know if you have any questions or need further clarification.

Here is an updated version with more recent information

Title: "AG Grid PHP Example: Create Interactive Tables with PHP and MySQL"

Introduction:

AG Grid is a powerful and feature-rich JavaScript library for creating interactive tables. In this post, we'll explore how to use AG Grid with PHP and MySQL to create a dynamic and customizable table.

What is AG Grid?

AG Grid is a popular JavaScript library for creating interactive tables. It offers a wide range of features, including:

Why Use AG Grid with PHP?

While AG Grid is a JavaScript library, it can be easily integrated with PHP to create a dynamic and interactive table. By using AG Grid with PHP, you can:

AG Grid PHP Example

In this example, we'll create a simple AG Grid table using PHP and MySQL. We'll assume that you have a basic understanding of PHP and MySQL.

Part 1: The Database Setup

Let’s define a simple dataset to manipulate. Run this SQL in your database:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    employee_name VARCHAR(100),
    job_title VARCHAR(100),
    department VARCHAR(50),
    salary INT
);
INSERT INTO employees (employee_name, job_title, department, salary) VALUES
('Alice Johnson', 'Software Engineer', 'Engineering', 95000),
('Bob Smith', 'Project Manager', 'Operations', 85000),
('Charlie Davis', 'UX Designer', 'Product', 78000),
('Diana Evans', 'Data Analyst', 'Marketing', 72000);

🎨 Frontend Example (AG Grid + JS)

const gridOptions = 
    columnDefs: [
         field: 'id', checkboxSelection: true, width: 70 ,
         field: 'name', filter: 'agTextColumnFilter', sortable: true ,
         field: 'email', filter: 'agTextColumnFilter', sortable: true ,
         field: 'created_at', filter: 'agDateColumnFilter', sortable: true 
    ],
    rowModelType: 'serverSide',
    serverSideDatasource: createServerSideDatasource()
;

function createServerSideDatasource() 
return 
getRows: async (params) => 
const response = await fetch('/api/grid-data', 
method: 'POST',
headers:  'Content-Type': 'application/json' ,
body: JSON.stringify(
startRow: params.request.startRow,
endRow: params.request.endRow,
sortModel: params.request.sortModel,
filterModel: params.request.filterModel
)
);
const data = await response.json();
params.success(
rowData: data.rows,
rowCount: data.lastRow
);
;

Part 3: The Frontend (HTML + JS)

This is the "Updated" part. We use modern AG Grid syntax, enabling Enterprise-style features (like editing) using the Community version.

File: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AG Grid PHP Updated Example</title>
    <!-- Ag-Grid CSS -->
    <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"/>
    <style>
        #myGrid  height: 500px; width: 100%; 
    </style>
</head>
<body>
<div id="myGrid" class="ag-theme-alpine"></div>
<!-- Ag-Grid JS -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
<script>
    // Define Column Definitions
    const columnDefs = [
         field: 'id', hide: true , // ID is hidden but needed for updates
         field: 'employee_name', filter: true, editable: true ,
         field: 'job_title', editable: true ,
         field: 'department', filter: true, editable: true ,
field: 'salary', 
            editable: true, 
            valueFormatter: params => '$' + params.value.toLocaleString(),
            filter: 'agNumberColumnFilter'
];
// 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
    ;
// Initialize Grid
    document.addEventListener('DOMContentLoaded', () => 
        const gridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(gridDiv, gridOptions);
// Fetch initial data
        fetchGridData();
    );
// Function to fetch data from PHP
    function fetchGridData() 
        // Example: Add sorting params if needed manually, or use AG Grid datasource
        fetch('api.php?action=fetch')
            .then(response => response.json())
            .then(data => 
                gridOptions.api.setRowData(data); // Updated API method
            )
            .catch(err => console.error('Error fetching data:', err));
// Function to handle data update (Backend Sync)
    function onRowValueChanged(event) 
        const newData = event.data;
console.log('Saving changes:', newData);
fetch('api.php?action=update', 
            method: 'POST',
            headers:  'Content-Type': 'application/json' ,
            body: JSON.stringify(newData)
        )
        .then(response => response.json())
        .then(res => 
            if (res.success) 
                console.log('Database updated successfully');
                // Optional: Show a toast notification
             else 
                alert('Error updating database: ' + res.message);
                // Optional: Revert the grid change
);
</script>
</body>
</html>

🧪 CRUD Update Example (PHP)

// PUT /api/user/id
$data = json_decode(file_get_contents('php://input'), true);
$stmt = $pdo->prepare("UPDATE users SET name = ?, email = ? WHERE id = ?");
$stmt->execute([$data['name'], $data['email'], $id]);
echo json_encode(['success' => true]);

5. Implementing Sorting, Filtering & Pagination

The example above automatically handles: , // Enables SSRM pagination: true, paginationPageSize: ,

Important update: AG Grid v31+ uses serverSideStoreType: 'partial' (replaces old serverSideStoreType: 'full').