PHPackages oh-deer-bundles/ag-grid-ux-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. oh-deer-bundles/ag-grid-ux-bundle ActiveSymfony-bundle[Framework](/categories/framework) oh-deer-bundles/ag-grid-ux-bundle ================================= Quickly implements AG Grid Community js library in Symfony application. 221PHP Since Sep 26Pushed 1y ago2 watchersCompare [ Source](https://github.com/oh-deer-bundles/ag-grid-ux-bundle)[ Packagist](https://packagist.org/packages/oh-deer-bundles/ag-grid-ux-bundle)[ RSS](/packages/oh-deer-bundles-ag-grid-ux-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependenciesVersions (1)Used By (0) ODB AG Grid UX Bundle ===================== [](#odb-ag-grid-ux-bundle) This Bundle helps to quickly implement [AG Grid Community js](https://www.npmjs.com/package/ag-grid-community) library in Symfony application. This bundle is a Symfony UX bundle. You can find more informations about [the Symfony UX initiative](https://ux.symfony.com/). You can learn, show demo and more on [official Ag Grid website](https://www.ag-grid.com/) Installation ------------ [](#installation) > /!\\ caution Before you start, make sure you have `StimulusBundle configured in your app`. Install the bundle using Composer and Symfony Flex: ``` composer require oh-deer-bundles/ag-grid-ux-bundle ``` If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper): ``` # with npm npm install --force npm run watch # or use yarn yarn install --force yarn watch ``` Usage ----- [](#usage) To use AG Grid Ux Bundle, inject the `AgGridBuilderInterface` service and create agGrid in your app. Tow way are possible, below the same examples for the same result ``` // ... use Odb\AgGridUxBundle\Builder\AgGridBuilderInterface; use Odb\AgGridUxBundle\Model\AgGrid; class HomeController extends AbstractController { #[Route('/', name: 'app_homepage')] public function index(AgGridBuilderInterface $agGridBuilder): Response { /** @var $agGrid AgGrid */ $agGrid = $agGridBuilder->createAgGrid(); // set the attributes of the div element itself $agGrid->setAttributes([ 'class' => 'ag-theme-alpine','style' => "height:500px"]); // set data $data = [ ['make' => "Tesla", 'model' => "Model Y", 'price' => 64950, 'electric' => true ], ['make' => "Ford", 'model' => "F-Series", 'price' => 33850, 'electric' => false ], [ 'make' => "Toyota", 'model' => "Corolla", 'price' => 29600, 'electric' => false ] ]; $agGrid->setRowData($data); // default column definition $colDefaultDef = ['editable' => true]; $agGrid->setDefaultColDef($colDefaultDef); // set column definitions $columnDefs = [ ['field' => 'make', 'flex' => 2, 'cellEditor' => 'agSelectCellEditor', 'cellEditorParams' => ['values' => ["Tesla", "Ford", "Toyota", "Mercedes", "Fiat", "Nissan", "Vauxhall", "Volvo", "Jaguar",]] ], ['field' => 'model','filter' => true, 'flex' => 1], ['field' => 'price', 'flex' => 1, 'valueFormatter' => "p => p.value.toLocaleString() + ' €'"], ['field' => 'electric', 'flex' => 1, 'editable' => false], ]; $agGrid->setColumnDefs($columnDefs); return $this->render('home/index.html.twig', [ 'agGrid' => $agGrid ]); } } ``` Same example with a syntaxe Object oriented. ``` // ... use Odb\AgGridUxBundle\Builder\AgGridBuilderInterface; use Odb\AgGridUxBundle\Model\AgGrid; use Odb\AgGridUxBundle\Model\ColumnDef; use Odb\AgGridUxBundle\Model\DefaultColumnDef; class HomeController extends AbstractController { #[Route('/', name: 'app_homepage')] public function index(AgGridBuilderInterface $agGridBuilder): Response { /** @var $agGrid AgGrid */ $agGrid = $agGridBuilder->createAgGrid(); // set the attributes of the div element itself $agGrid->setAttributes([ 'style' => "height:500px"]); $agGrid->setTheme('ag-theme-alpine'); // set data $data = [ ['make' => "Tesla", 'model' => "Model Y", 'price' => 64950, 'electric' => true ], ['make' => "Ford", 'model' => "F-Series", 'price' => 33850, 'electric' => false ], [ 'make' => "Toyota", 'model' => "Corolla", 'price' => 29600, 'electric' => false ] ]; $agGrid->setRowData($data); // default column definition $colDefaultDef = (new DefaultColumnDef())->setEditable(true); $agGrid->setDefaultColDef($colDefaultDef); // set column definitions $colDefMake = new ColumnDef(); $colDefMake->setField('make'); $colDefMake->setFlex(2); $colDefMake->setCellEditor('agSelectCellEditor'); $colDefMake->setCellEditorParams(['values' => ["Tesla", "Ford", "Toyota", "Mercedes", "Fiat", "Nissan", "Vauxhall", "Volvo", "Jaguar",]]); $colDefModel = (new ColumnDef())->setField('model')->setFlex(1)->setFilter(true); $colDefPrice = (new ColumnDef())->setField('price')->setFlex(1)->setValueFormatter("p => p.value.toLocaleString() + ' €'"); $colDefElectric = (new ColumnDef())->setField('electric')->setFlex(1)->setEditable(false); $agGrid->setColumnDefs([$colDefMake, $colDefModel, $colDefPrice, $colDefElectric]); return $this->render('home/index.html.twig', [ 'agGrid' => $agGrid ]); } } ``` The Object oriented syntaxe implements the major part of AG Grid API. You can read the [AG Grid documentation reference](https://www.ag-grid.com/react-data-grid/reference/) > Keep in your mind, there two licenses for AG grid Library, this bundle implements only the `Community Edition`. Once created in PHP, the data grid can be displayed using Twig: ``` {{ render_ag_grid(agGrid) }} {# You can pass HTML attributes as a second argument to add them on the tag if you need it #} {{ render_ag_grid(agGrid, {'id': 'my-data-grid'}) }} ``` Extends the Stimulus controller =============================== [](#extends-the-stimulus-controller) If you need you can extend the bundle Stimulus controller, to add your javascript. ``` // mydatagrid_controller.js import { Controller } from '@hotwired/stimulus'; export default class extends Controller { connect() { this.element.addEventListener('agGrid:init', this.agGridIniti); this.element.addEventListener('agGrid:loaded', this.agGridStarted); this.element.addEventListener('agGrid:cellValueChanged', this.cellValueChanged); this.element.addEventListener('agGrid:rowValueChanged', this.rowValueChanged); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side effects this.element.addEventListener('agGrid:init', this.agGridIniti); this.element.addEventListener('agGrid:loaded', this.agGridStarted); this.element.addEventListener('agGrid:cellValueChanged', this.cellValueChanged); this.element.addEventListener('agGrid:rowValueChanged', this.rowValueChanged); } agGridIniti(event) { // The AG Grid is not yet created // You can access the gridOptions that will be passed to "createGrid" function console.log(event.detail.gridOptions); // e.g. you want to add a class with a rules like this. event.detail.gridOptions.rowClassRules = { // apply red to Ford cars 'rag-red': params => params.data.make === 'Ford', } } agGridStarted(event) { // The AG Grid was just created and You can access the AG Grid instance using the event details console.log(event.detail.agGridApi); // For instance you can listen to additional events see https://www.ag-grid.com/javascript-data-grid/grid-events/ event.detail.agGridApi.onPasteEnd = (event) => { /* ... */ }; event.detail.agGridApi.onUndoEnded = (event) => { /* don't forget to activate undo/redo options undoRedoCellEditing: true, undoRedoCellEditingLimit: 5, ... */ }; } cellValueChanged(event) { // the Ag Grid documentation "Value has changed after editing (this event will not fire if editing was cancelled, eg ESC was pressed) or if cell value has changed as a result of cut, paste, cell clear (pressing Delete key), fill handle, copy range down, undo and redo." console.log(event.detail.params); } rowValueChanged(event) { console.log(event.detail.params); } } ``` Then in your render call, add your controller as an HTML attribute: - in twig ``` {{ render_ag_grid(agGrid, {'data-controller': 'mydatagrid'}) }} ``` - or in PHP ``` $agGrid->setAttributes([ 'data-controller' => 'mydatagrid']); ``` TODO ---- [](#todo) Features need to be implemented - tests - language selection Special thanks -------------- [](#special-thanks) The Symfony UX Bundle is largely inspired by the superb [Symfony UX chart.js](https://symfony.com/bundles/ux-chartjs/current/index.html) Bundle. Thanks to [Fabien Potencier](https://github.com/fabpot) to create the best PHP framework ### Health Score 17 — LowBetter than 6% of packages Maintenance29 Infrequent updates — may be unmaintained Popularity9 Limited adoption so far Community10 Small or concentrated contributor base Maturity17 Early-stage or recently created project Bus Factor1 Top contributor holds 75% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/b7e06e76edb6bd8250dbd7710bffe6722cfe9db2f39306cae3524bca2b020fed?d=identicon)[oh-deer-bundles](/maintainers/oh-deer-bundles) --- Top Contributors [![fabgg](https://avatars.githubusercontent.com/u/8811414?v=4)](https://github.com/fabgg "fabgg (3 commits)")[![oh-deer-bundles](https://avatars.githubusercontent.com/u/98280500?v=4)](https://github.com/oh-deer-bundles "oh-deer-bundles (1 commits)") ### Embed Badge ![Health badge](/badges/oh-deer-bundles-ag-grid-ux-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/oh-deer-bundles-ag-grid-ux-bundle/health.svg)](https://phpackages.com/packages/oh-deer-bundles-ag-grid-ux-bundle) ``` ### Alternatives [laravel/telescope An elegant debug assistant for the Laravel framework. 5.2k67.8M192](/packages/laravel-telescope)[spiral/roadrunner RoadRunner: High-performance PHP application server and process manager written in Go and powered with plugins 8.4k12.2M84](/packages/spiral-roadrunner)[nolimits4web/swiper Most modern mobile touch slider and framework with hardware accelerated transitions 41.8k177.2k1](/packages/nolimits4web-swiper)[laravel/dusk Laravel Dusk provides simple end-to-end testing and browser automation. 1.9k36.7M259](/packages/laravel-dusk)[laravel/prompts Add beautiful and user-friendly forms to your command-line applications. 708181.8M596](/packages/laravel-prompts)[cakephp/chronos A simple API extension for DateTime. 1.4k47.7M121](/packages/cakephp-chronos) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)