PHPackages oh-deer-bundles/tabulator-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. [Utility & Helpers](/categories/utility) 4. / 5. oh-deer-bundles/tabulator-ux-bundle ActiveSymfony-bundle[Utility & Helpers](/categories/utility) oh-deer-bundles/tabulator-ux-bundle =================================== Quickly implements Tabulator js library in Symfony application. 0.1(1y ago)024MITPHPPHP >=8.1 Since Oct 28Pushed 1y ago2 watchersCompare [ Source](https://github.com/oh-deer-bundles/tabulator-ux-bundle)[ Packagist](https://packagist.org/packages/oh-deer-bundles/tabulator-ux-bundle)[ RSS](/packages/oh-deer-bundles-tabulator-ux-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (11)Versions (2)Used By (0) ODB Tabulaltor UX Bundle ======================== [](#odb-tabulaltor-ux-bundle) This Bundle helps to quickly implement [Tabulator](https://github.com/olifolkerd/tabulator) 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 Tabulator website](https://tabulator.info/examples/6.3) 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/tabulator-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 Tabulator Ux Bundle, inject the `TabulatorBuilderInterface` service and create Tabuylator in your app. ``` // ... use Odb\TabulatorUxBundle\Builder\TabulatorBuilderInterface; use Odb\TabulatorUxBundle\Model\Tabulator; class HomeController extends AbstractController { #[Route('/', name: 'app_homepage')] public function index(TabulatorBuilderInterface $tabulatorBuilder): Response { /** @var Tabulator $tabulator */ $tabulator = $tabulatorBuilder->createTabulator(); $tabulator->setAttributes([ 'style' => "height:500px"]); $tabulator->setOptions([ "height" => "500px", 'layout'=> 'fitColumns', "columns"=> [ ['title'=> 'Name', 'field'=>'name'], ['title'=> 'Progress', 'field'=>'progress', 'hozAlign' => 'right', 'sorter' => 'number'], ['title'=> 'Gender', 'field'=>'gender'], ['title'=> 'Rating', 'field'=>'rating', 'hozAlign' => 'center'], ['title'=> 'Favourite Color', 'field'=>'col'], ['title'=> 'Date Of Birth', 'field'=>'dob', 'hozAlign' => 'center', 'sorter' => 'date'], ['title'=> 'Driver', 'field'=>'car', 'hozAlign' => 'center'], ['title'=> 'Favourite Color', 'field'=>'col'] ], ]); $data = [ ['id' => 1, 'name' =>"Oli Bob", 'progress' =>12, 'location' =>"United Kingdom", 'gender' =>"male", 'rating' =>1, 'col' =>"red", 'dob' =>"14/04/1984", 'car' =>1, 'lucky_no' =>5, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 2, 'name' =>"Mary May", 'progress' =>1, 'location' =>"Germany", 'gender' =>"female", 'rating' =>2, 'col' =>"blue", 'dob' =>"14/05/1982", 'car' =>true, 'lucky_no' =>10, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 3, 'name' =>"Christine Lobowski", 'progress' =>42, 'location' =>"France", 'gender' =>"female", 'rating' =>0, 'col' =>"green", 'dob' =>"22/05/1982", 'car' =>"true", 'lucky_no' =>12, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 4, 'name' =>"Brendon Philips", 'progress' =>100, 'location' =>"USA", 'gender' =>"male", 'rating' =>1, 'col' =>"orange", 'dob' =>"01/08/1980", 'car' =>false, 'lucky_no' =>18, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 5, 'name' =>"Margret Marmajuke", 'progress' =>16, 'location' =>"Canada", 'gender' =>"female", 'rating' =>5, 'col' =>"yellow", 'dob' =>"31/01/1999", 'car' =>false, 'lucky_no' =>33, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 6, 'name' =>"Frank Harbours", 'progress' =>38, 'location' =>"Russia", 'gender' =>"male", 'rating' =>4, 'col' =>"red", 'dob' =>"12/05/1966", 'car' =>1, 'lucky_no' =>2, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 7, 'name' =>"Jamie Newhart", 'progress' =>23, 'location' =>"India", 'gender' =>"male", 'rating' =>3, 'col' =>"green", 'dob' =>"14/05/1985", 'car' =>true, 'lucky_no' =>63, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 8, 'name' =>"Gemma Jane", 'progress' =>60, 'location' =>"China", 'gender' =>"female", 'rating' =>0, 'col' =>"red", 'dob' =>"22/05/1982", 'car' =>"true", 'lucky_no' =>72, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 9, 'name' =>"Emily Sykes", 'progress' =>42, 'location' =>"South Korea", 'gender' =>"female", 'rating' =>1, 'col' =>"maroon", 'dob' =>"11/11/1970", 'car' =>false, 'lucky_no' =>44, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ['id' => 10, 'name' =>"James Newman", 'progress'=>73, 'location' =>"Japan", 'gender' =>"male", 'rating' =>5, 'col' =>"red", 'dob' =>"22/03/1998", 'car' =>false, 'lucky_no' =>9, 'lorem' =>"Lorem ipsum dolor sit amet, elit consectetur adipisicing "], ]; $tabulator->setData($data); return $this->render('path-to/tabulator.html.twig',['tabulator' => $tabulator]); } } ``` You can set each tabulator attributes separately. ``` // ... $tabulator->setAttributes([ 'style' => "height:500px"]); ``` Once created in PHP, the data grid can be displayed using Twig: ``` {{ {{ render_tabulator(tabulator) }}) }} {# You can pass HTML attributes as a second argument to add them on the tag if you need it #} {{ {{ render_tabulator(tabulator, {'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('tabulator:init', this.gridInit); this.element.addEventListener('tabulator:loaded', this.gridStarted); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side effects this.element.addEventListener('tabulator:init', this.agGridIniti); this.element.addEventListener('tabulator:loaded', this.gridStarted); } gridInit(event) { // The Tabulator is not yet created // You can access the gridOptions that will be passed to "tableBuilt" function console.log(event.detail.tabulatorOptions); // e.g. you want to add a editing option like this. event.detail.tabulatorOptions.editTriggerEvent = "dblclick" } gridStarted(event) { // The Tabulator was just created and You can access the Tabulor instance using the event details console.log(event.detail.tabulator); // For instance you can listen to additional events see https://www.ag-grid.com/javascript-data-grid/grid-events/ event.detail.tabulator.on("cellEdited", function(cell){ //cell - cell component }); event.detail.tabulator.on("cellEditCancelled", function(cell){ //cell - cell component }); } } ``` 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 24 — LowBetter than 32% of packages Maintenance38 Infrequent updates — may be unmaintained Popularity6 Limited adoption so far Community8 Small or concentrated contributor base Maturity37 Early-stage or recently created project Bus Factor1 Top contributor holds 100% 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. ### Release Activity Cadence Unknown Total 1 Last Release 562d ago ### 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 (2 commits)") --- Tags symfony-ux ### Embed Badge ![Health badge](/badges/oh-deer-bundles-tabulator-ux-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/oh-deer-bundles-tabulator-ux-bundle/health.svg)](https://phpackages.com/packages/oh-deer-bundles-tabulator-ux-bundle) ``` ### Alternatives [symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[pentiminax/ux-datatables DataTables.net integration for Symfony 605.6k](/packages/pentiminax-ux-datatables)[symfony/ux-notify Native notification integration for Symfony 1274.7k](/packages/symfony-ux-notify)[symfony/ux-lazy-image Lazy image loader and utilities for Symfony 36335.2k](/packages/symfony-ux-lazy-image)[symfony/ux-toggle-password Toggle visibility of password inputs for Symfony Forms 26508.0k5](/packages/symfony-ux-toggle-password)[spomky-labs/pwa-bundle Progressive Web App Manifest Generator Bundle for Symfony. 6144.4k1](/packages/spomky-labs-pwa-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)