PHPackages digipolisgent/datatables-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. digipolisgent/datatables-bundle ActiveLibrary[Framework](/categories/framework) digipolisgent/datatables-bundle =============================== Datatables.net integration into Symfony2 1.0.0(7y ago)0511MITJavaScriptPHP >=5.5.9 Since Nov 1Pushed 7y ago2 watchersCompare [ Source](https://github.com/district09/symfony_bundle_datatables)[ Packagist](https://packagist.org/packages/digipolisgent/datatables-bundle)[ RSS](/packages/digipolisgent-datatables-bundle/feed)WikiDiscussions develop Synced 2d ago READMEChangelogDependencies (9)Versions (5)Used By (1) DigipolisGent Datatables ======================== [](#digipolisgent-datatables) Installing this bundle : ------------------------ [](#installing-this-bundle-) #### 1. Composer Require [](#1-composer-require) ``` $php composer require digipolisgent/datatables-bundle ``` #### 2. Enable the bundle [](#2-enable-the-bundle) In AppKernel add the following line inside the RegisterBundles() method : ``` public function registerBundles() { $bundles = [ // other bundles new DigipolisGent\DatatablesBundle\DatatablesBundle(), ]; } ``` Add the bundle's routes to your application in your routing.yml file : ``` datatables: resource: "@DatatablesBundle/Resources/config/routing.yml" ``` Add the bundle's javascript to your application in your layout.html.twig file : ``` {% block javascripts %} {% endblock %} ``` This bundle assumes you have a working version of jQuery running inside your application. Creating a Datatable : ---------------------- [](#creating-a-datatable-) #### 1. Create a DataExtractor [](#1-create-a-dataextractor) The data extractor holds one method; 'extract'. This method will recieve a DatatableRequest which holds the default symfony2 HttpRequest and some extra parameter such as Page, PageSize, Query, Offset etc. The data extractor will extract the data from an external source (such as a database or API) based on these parameters. The data will be passed in a wrapper object called "Extraction". This is so that the bundle doesn't depend on external Paginator classes and/or bundles. The Extraction object holds one page of data, and the count of all available records to come. ExtractionInterface is also available Here is one example ; ``` class ProductDataExtractor implements DataExtractorInterface { // constructor etc. public function extract(RequestInterface $request) { $query = $this->entityManager->createQuery('// some DQL'); $query->setMaxResults($request->getPageSize()); $query->setFirstResult($request->getOffset()); $paginator = new Paginator($query); return new Extraction( $paginator->getIterator()->getArrayCopy(), $paginator->count() ); } } ``` Note: In this example the use of the "search" parameter is omitted. In practice, you should build your query based on this parameter. The parameter is accessed through : ``` $request->getSearch(); ``` #### 2. Create your table in a factory [](#2-create-your-table-in-a-factory) We create our Datatable implementation in a factory. The Datatable is constructed with an alias and an extractor as arguments. Columns are added onto the table in the factory method. ``` // ... class ProductDataTableFactory { public static function create(Extractor $extractor) { $table = new DataTable('product', $extractor); $table ->createColumn('owner', ['property' => 'owner.name']) ->createColumn('sku') ->createColumn('price') ->addColumn(new DateTimeColumn('created_at', ['format' => 'd-m-Y'])) ; return $table; } } ``` #### 3. Register Datatable as a service and tag it as such. [](#3-register-datatable-as-a-service-and-tag-it-as-such) When a datatable is registered as a Datatable, it will be injected into the DatatableManager by the DatatableCompilerPass. This will allow the DataController to call the correct datatable and return its data. ``` services: # Extractor app.datatable.extractor.product: class: App\AppBundle\Datatable\Extractor\ProductExtractor arguments: - '@doctrine' # Table app.datatable.table.product: class: DigipolisGent\DatatablesBundle\Datatable\Datatable factory: [App\AppBundle\Factory\ProductTableFactory, 'create'] arguments: - '@app.datatable.extractor.product' tags: - {name: 'digipolisgent_datatables.table'} ``` #### 4. Use the Datatable [](#4-use-the-datatable) When your Datatable is registered correctly, we can now pass the Datatable itself into a controller and passed onto the view. Datatables can be rendered easily with a Twig function. Besides rendering a Datatable, you don't need to perform any more actions, the Datatable is automatically instantiated and will operate by itself. The data displayed in the Datatable will be fetched from the DataController in this bundle. Pass the datatable into the Twig template: ``` public function listAction() { retun $this->renderer->renderResponse('path/to/twig.html.twig', [ 'table' => $this->get('app.datatable.table.product'); ]); } ``` Render the table with the Twig function: ``` {% block content %} {{ datatables_render_table(table) }} {% endblock %} ``` Elements -------- [](#elements) The DatatableBundle contains two "Element" classes to generate labels & buttons. They generate a simple HTML string that will be outputted by the Datatable. This way you can easily create edit/delete buttons and/or labels. Both elements implement the ElementInterface which contains one method 'generate'. This method accepts an array with options as an argument. #### 1. Buttons [](#1-buttons) The Button element generates an "a" tag with the default btn class. The Button element has 4 options : 1. **link** : The uri that will be added to the href attribute. (Default: '#') 2. **type**: The specified type will be added to the btn-%s class. So "danger" would result in btn btn-danger. (Default: 'danger') 3. **class**: Custom classname will be added to the class attribute (Default: null) 4. **text**: The html body of the a-element. (Default: 'Edit') #### 2. Labels [](#2-labels) The Label element generates a 'span' tag with the default 'label' class. The Label element has 3 options: 1. **type**: The specified type will be added to the label-%s class. So "success" would result in label-success. (Default: 'success') 2. **class**: Custom classname will be added to the class attribute (Default: null) 3. **text**: The html body of the span-element. (Default: 'yes') #### 3. Example [](#3-example) So generating a button or label is easy. As an example we will create a simple label : ``` $label = Label::generate([ 'type' => 'danger', 'class' => 'example-label', 'text' => 'Some Generated Text' ]); ``` Would result in : ``` Some Generated Text ``` Advanced Usage -------------- [](#advanced-usage) #### Columns [](#columns) ##### 1. Column options [](#1-column-options) The default columns have a set of predefined options you can pass on. **Property** : This defines which property should be extracted by the column. The default extractor will use the Symfony\\PropertyAccess class the access the objects properties. See : [http://symfony.com/doc/current/components/property\_access/introduction.html](http://symfony.com/doc/current/components/property_access/introduction.html) for more information on the PropertyAccess class and how you should form the "property" option. ``` $shop = new Shop(); $shop->setName('Some Shop'); $user = new User(); $user->setShop($shop); $column = new Column('shop', ['property' => 'shop.name']); $value = $column->extractValue($user); // $value === 'Some Shop' ``` **Extractor** : This option should contain a valid callback or callable class that implements the \_\_invoke method. You can provide a custom extractor as a means to override the default PropertyAccess extractor used by the default Column. With the use of custom extractors, you can *almost* do anything. In this example we use a custom extractor to generate a button based on the given entity. ``` $callback = function(User $user) use($router) { return Button::generate([ 'link' => $router->generate('user_edit', ['id' => $user->getId()]), 'text' => 'Edit User' ]) }; $column = new Column('_edit', ['extractor' => $callback]); ``` When using a custom extractor, the "property" option can be omitted. In the table, this column would show the following for our User entity : ``` Edit User ``` **Attributes** : This option supports an array of key => $value attributes. These attributes will be rendered to the column header in the table. By default there's a data-name attribute present. ``` $column = new Column('name', ['attributes' => ['data-status' => 'status_1']]); ``` The previous code would result in the following : ``` Name ``` **Label**: You can provide a custom label for each column. The label is used in the table headers. Labels are passed trough the translator component before being outputted. Lets assume the following code and general.first\_name is translated into "First Name": ``` $column = new Column('first_name', ['label' => 'general.first_name']); ``` The previous code would result in the following : ``` First Name ``` By default the label is generated as ucfirst($column->getName()); ##### 1. Custom columns [](#1-custom-columns) In this bundle you have the default "Column" object that is used to define the table's column. The 'createColumn' method in the Datatable will create a default Column with the given parameters. But it's also possible to extend or create a custom column using the ColumnInterface. Custom columns are added through the 'addColumn' method in the Datatable ``` $datatable = new Datatable('example', $extractor); $datatable ->createColumn('id') ->addColumn(new CustomColumn()) ; ``` #### Bootstrap configuration [](#bootstrap-configuration) To enable the bootstrap implementation of Datatables in your application, you need to include different files in your layout.html.twig file: ``` {% block stylesheets %} {% endblock %} ``` Note how instead of the default datatables.min.css we include datatables-bootstrap.min.css. You only need to include one of these two files. Not both. The same goes for the javascript file: ``` {% block javascripts %} {% endblock %} ``` #### Font-Awesome icons [](#font-awesome-icons) To enable the use of Font-Awesome icons (sorting icons etc.) you need to include a second css file: ``` {% block stylesheets %} {% endblock %} ``` Note that here we do include both files. You can combine font-awesome icons with the default datatables layout. ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community13 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~233 days Total 3 Last Release 2647d ago Major Versions 0.9.1 → 1.0.02019-02-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/fd0af1f056fd3baa2df55c0c745ade4d0f8af99505f717bf0ad48d7b615a2153?d=identicon)[Jelle-S](/maintainers/Jelle-S) --- Top Contributors [![avandenbogaert](https://avatars.githubusercontent.com/u/2714711?v=4)](https://github.com/avandenbogaert "avandenbogaert (8 commits)")[![ctrl-f5](https://avatars.githubusercontent.com/u/485346?v=4)](https://github.com/ctrl-f5 "ctrl-f5 (6 commits)")[![Jelle-S](https://avatars.githubusercontent.com/u/1828542?v=4)](https://github.com/Jelle-S "Jelle-S (4 commits)") --- Tags d09check22symfonywebsymfonydatatablesdatatables.netDistrict01 ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/digipolisgent-datatables-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/digipolisgent-datatables-bundle/health.svg)](https://phpackages.com/packages/digipolisgent-datatables-bundle) ``` ### Alternatives [sulu/sulu Core framework that implements the functionality of the Sulu content management system 1.3k1.3M152](/packages/sulu-sulu)[shopware/platform The Shopware e-commerce core 3.3k1.5M3](/packages/shopware-platform)[contao/core-bundle Contao Open Source CMS 1231.6M2.4k](/packages/contao-core-bundle)[sylius/sylius E-Commerce platform for PHP, based on Symfony framework. 8.4k5.6M651](/packages/sylius-sylius)[ec-cube/ec-cube EC-CUBE EC open platform. 78527.0k1](/packages/ec-cube-ec-cube)[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) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)