ekyna/ui-bundle

Ui elements

Maintainers

Details

github.com/ekyna/UiBundle

Homepage

Source

Issues

Installs: 389

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

Type:symfony-bundle

0.8.x-dev 2022-05-20 14:38 UTC

Requires

MIT a0aff2e6d4baba0ff4f834e46107e61b3b186581

symfonyuibundle

This package is auto-updated.

Last update: 2024-04-22 08:40:32 UTC

README

Table component integration.

Installation

Install this package through composer:

composer require ekyna/table-bundle:0.7.x-dev

Register the bundle in your AppKernel:

// app/AppKernel.php
public function registerBundles()
{
    $bundles = array(
        // other bundles ...
        new Ekyna\Bundle\TableBundle\EkynaTableBundle(),
    );
 
    return $bundles;
}

Example

Given there is a Brand doctrine entity configured in the AcmeDemoBundle with a title field.

Create the table type:

// src/Acme/DemoBundle/Table/Type/BrandType.php
namespace Acme\DemoBundle\Table\Type;

use Acme\DemoBundle\Entity\Brand;
use Ekyna\Component\Table\AbstractTableType;
use Ekyna\Component\Table\Extension\Core\Type\Column;
use Ekyna\Component\Table\Extension\Core\Type\Filter;
use Ekyna\Component\Table\TableBuilderInterface;        
use Ekyna\Component\Table\Bridge\Doctrine\ORM\Source\EntitySource;
use Symfony\Component\OptionsResolver\OptionsResolver;

class BrandType extends AbstractTableType
{
    public function buildTable(TableBuilderInterface $tableBuilder)
    {
        $tableBuilder
            ->addColumn('id', Column\NumberType::class)
            ->addColumn('title', Column\TextType::class, [
                'label' => 'Title',
            ])
            ->addFilter('id', Filter\NumberType::class)
            ->addFilter('title', Filter\TitleType::class, [
                'label' => 'Titre'
            ])
        ;
    }
    
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'source' => new EntitySource(Brand::class)
        ));
    }
}

(optional) Register the table type as a service:

<!-- src/Acme/DemoBundle/Resources/config/services.xml -->
<service id="acme_demo.table.brand_type" class="Acme\DemoBundle\Table\Type\BrandType">
    <tag name="table.type" />
</service>

Usage in a controller:

// src/Acme/DemoBundle/Controller/BrandController.php
namespace Acme\Demo\Controller;

use Acme\DemoBundle\Table\Type\BrandType;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class ResourceController extends Controller
{
    public function indexAction(Request $request)
    {
        $table = $this
            ->get('table.factory')
            ->createTable('brands', BrandType::class);
         
        if (null !== $response = $table->handleRequest($request)) {
            return $response;
        }
        
        return $this->render('@AcmeDemo/Brand/index.html.twig', array(
            'brands' => $table->createView(),
        ));
    }
}

Usage in a twig template:

# src/Acme/DemoBundle/Resources/views/Brand/index.html.twig
<!DOCTYPE html>
<html>
    <head>
        {% block stylesheets %}
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="{{ asset('bundles/ekynatable/css/table.css') }}" rel="stylesheet" type="text/css"/>
        {% endblock stylesheets %}        
    </head>
    <body>
        {{ ekyna_table_render(brands) }}
        
        {% block javascripts %}
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="{{ asset('bundles/ekynatable/js/table.js') }}"></script>
        {% endjavascripts %}
    </body>
</html>

Customization

The default template used to render the table is vendor/ekyna/table-bundle/Ekyna/Bundle/TableBundle/Resources/views/table.html.twig. It requires jQuery and Bootstrap 3.

You can create your own rendering template (where you will define all blocks of the default template) and use it this way

    {{ ekyna_table_render(brands, {'template': '@AcmeDemo/Table/render.html.twig'}) }}

What's next ?

  • Templating engine with type/template hierarchy.
  • Better export implementation.
  • Tests.
  • Demo repository.
  • More doc.
  • More sources.
  • AJAX support.