PHPackages tienvx/ux-collection-js - 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. tienvx/ux-collection-js ActiveSymfony-bundle tienvx/ux-collection-js ======================= Symfony UX integration for collection form type v1.1.0(3y ago)133.8k5[2 issues](https://github.com/tienvx/ux-collection-js/issues)MITPHPPHP ^7.4|^8.0 Since Oct 2Pushed 3y ago2 watchersCompare [ Source](https://github.com/tienvx/ux-collection-js)[ Packagist](https://packagist.org/packages/tienvx/ux-collection-js)[ Docs](https://github.com/tienvx/ux-collection-js)[ RSS](/packages/tienvx-ux-collection-js/feed)WikiDiscussions main Synced 4w ago READMEChangelog (10)Dependencies (8)Versions (37)Used By (0) UX Collection JS [![Build Status](https://github.com/tienvx/ux-collection-js/workflows/main/badge.svg)](https://github.com/tienvx/ux-collection-js/actions) [![Coverage Status](https://camo.githubusercontent.com/fc0b07e47b4c41540e9f919640662af6a77fb9436f89ecd4405bcd3a04f41b48/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f7469656e76782f75782d636f6c6c656374696f6e2d6a732f62616467652e7376673f6272616e63683d6d61696e26736572766963653d676974687562)](https://coveralls.io/github/tienvx/ux-collection-js?branch=main) ===================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================== [](#ux-collection-js---) UX collection JS is a Symfony bundle providing Symfony UX integration for collection form type with the help from [Symfony Collection JS](https://github.com/ruano-a/symfonyCollectionJs) library. Screenshots ----------- [](#screenshots) ### Bootstrap 3 [](#bootstrap-3) [![Screenshot Bootstrap 3](./images/collection-js-bootstrap-3.png)](./images/collection-js-bootstrap-3.png) ### Bootstrap 5 [](#bootstrap-5) [![Screenshot Bootstrap 5](./images/collection-js-bootstrap-5.png)](./images/collection-js-bootstrap-5.png) ### EasyAdmin [](#easyadmin) [![Screenshot EasyAdmin](./images/collection-js-easyadmin.png)](./images/collection-js-easyadmin.png) Installation ------------ [](#installation) UX Collection JS requires PHP 7.4+ and Symfony 4.4+. Install this bundle using Composer and Symfony Flex: ``` composer require tienvx/ux-collection-js:^1.0 # Don't forget to install the JavaScript dependencies as well and compile yarn add --dev '@symfony/stimulus-bridge@^2.0.0' yarn install --force yarn encore dev ``` Usage ----- [](#usage) ### Symfony [](#symfony) Use the new CollectionType class defined by this bundle: ``` // ... use Tienvx\UX\CollectionJs\Form\CollectionJsType; class PostType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder // ... ->add('authors', CollectionJsType::class, [ 'entry_type' => TextType::class, 'prototype' => true, 'allow_add' => true, 'allow_delete' => true, 'allow_move_up' => true, 'allow_move_down' => true, 'call_post_add_on_init' => true, ]) // ... ; } // ... } ``` Then you need to set the form theme: ``` # config/packages/twig.yaml twig: form_themes: - '@CollectionJs/bootstrap_5_layout.html.twig' ``` Available themes: - @CollectionJs/bootstrap\_5\_layout.html.twig - @CollectionJs/bootstrap\_4\_layout.html.twig - @CollectionJs/bootstrap\_3\_layout.html.twig ### Easyadmin [](#easyadmin-1) Create webpack entry: ``` // webpack.config.js .addEntry('stimulus', './assets/stimulus.js') ``` Then create that javascript file: ``` // assets/stimulus.js // start the Stimulus application import './bootstrap'; ``` Use the new collection type in the easyadmin controller: ``` namespace App\Controller\EasyAdmin; use Tienvx\UX\CollectionJs\Form\CollectionJsType; class FormFieldReferenceController extends AbstractCrudController { public function configureCrud(Crud $crud): Crud { return $crud // ... ->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', '@CollectionJs/bootstrap_5_layout.html.twig']); } public function configureFields(string $pageName): iterable { yield CollectionField::new('collectionSimple', 'Collection Field (simple)') ->setFormType(CollectionJsType::class) ->setFormTypeOptions([ 'entry_type' => CollectionSimpleType::class, 'allow_add' => true, 'allow_delete' => true, 'allow_move_up' => true, 'allow_move_down' => true, 'call_post_add_on_init' => true, ]) ->addWebpackEncoreEntries('stimulus'); } } ``` Configuration ------------- [](#configuration) Config nameDescriptionTypeDefaultprototypeCollectionJsType form type need prototype = trueBooleantrueallow\_addAllow show/hide 'Add a new item' buttonBooleanfalseallow\_deleteAllow show/hide 'Remove the item' buttonBooleanfalseallow\_move\_upAllow show/hide 'Move item up' buttonBooleanfalseallow\_move\_downAllow show/hide 'Move item down' buttonBooleanfalsecall\_post\_add\_on\_initTrigger 'ux-collection-js:post-add' event on initBooleanfalseStimulus Events --------------- [](#stimulus-events) NamespaceEventDescriptionDetailux-collection-jspost-addAfter an item is addednew\_elem, context, indexux-collection-jspost-deleteAfter an item is removeddelete\_elem, context, indexux-collection-jspost-upAfter an item is moved upelem, switched\_elem, indexux-collection-jspost-downAfter an item is moved downelem, switched\_elem, index### Example [](#example) ``` // SomeController.php $form = $this->createFormBuilder($task) ->add('some_field', SomeType::class, [ 'attr' => [ 'data-controller' => 'items', 'data-action' => 'ux-collection-js:post-add->items#postAdd ux-collection-js:post-delete->items#postDelete ', ], ]) ->getForm(); ``` ``` // items_controller.js import { Controller } from 'stimulus'; export default class extends Controller { postDelete(event) { const { delete_elem, context, index } = event.detail; } postAdd(event) { const { new_elem, context, index } = event.detail; } } ``` Contributing ------------ [](#contributing) Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate. License ------- [](#license) [MIT](LICENSE) ### Health Score 35 — LowBetter than 79% of packages Maintenance17 Infrequent updates — may be unmaintained Popularity28 Limited adoption so far Community13 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 99.1% 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 Every ~8 days Recently: every ~68 days Total 36 Last Release 1392d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/176d0199776bb6cdb210e2c5339ec79637c613e0617377378807bfe051eabb8e?d=identicon)[tien.xuan.vo](/maintainers/tien.xuan.vo) --- Top Contributors [![tienvx](https://avatars.githubusercontent.com/u/3327643?v=4)](https://github.com/tienvx "tienvx (115 commits)")[![cedriclombardot](https://avatars.githubusercontent.com/u/651484?v=4)](https://github.com/cedriclombardot "cedriclombardot (1 commits)") --- Tags symfony-uxux-collection-js ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/tienvx-ux-collection-js/health.svg) ``` [![Health](https://phpackages.com/badges/tienvx-ux-collection-js/health.svg)](https://phpackages.com/packages/tienvx-ux-collection-js) ``` ### Alternatives [prestashop/prestashop PrestaShop is an Open Source e-commerce platform, committed to providing the best shopping cart experience for both merchants and customers. 9.0k15.4k](/packages/prestashop-prestashop)[symfony/stimulus-bundle Integration with your Symfony app & Stimulus! 17314.3M160](/packages/symfony-stimulus-bundle)[symfony/ux-dropzone File input dropzones for Symfony Forms 541.5M4](/packages/symfony-ux-dropzone)[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)[symfony/ux-cropperjs Cropper.js integration for Symfony 19280.3k3](/packages/symfony-ux-cropperjs) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)