DEV Community: Pentiminax

Symfony 7: Build a Complete REST API (Serializer, Validation & Authentication)

Pentiminax — Thu, 18 Sep 2025 10:39:08 +0000

Learn how to build a modern REST API with Symfony 7 – from data validation with DTOs, to clean controllers, and best practices for maintainability.

In this example, we create a cocktails API 🍸

You’ll see how to:

✅ Use DTOs to validate incoming requests
✅ Map the request into an Entity with the ObjectMapper
✅ Keep controllers lean and easy to test

Create a cocktail (POST method)

When building modern APIs, using DTOs (Data Transfer Objects) and validation keeps your code clean, secure, and maintainable.

DTO with Validation

This DTO ensures that any request sent to your API follows the right rules (e.g. name length, valid URL, at least one ingredient).

<?php

namespace App\Dto;

use App\Entity\Cocktail;
use Symfony\Component\ObjectMapper\Attribute\Map;
use Symfony\Component\Validator\Constraints as Assert;

#[Map(target: Cocktail::class)]
final readonly class CreateCocktailRequest
{
    public function __construct(
        #[Assert\NotBlank]
        #[Assert\Length(min: 2, max: 255)]
        public string $name,

        #[Assert\NotBlank]
        #[Assert\Length(min: 10)]
        public string $description,

        #[Assert\NotBlank]
        public string $instructions,

        #[Assert\NotBlank]
        #[Assert\Count(min: 1)]
        public array $ingredients,

        #[Assert\Range(min: 1, max: 5)]
        public int $difficulty,

        public bool $isAlcoholic,

        #[Assert\Url]
        public ?string $imageUrl,
    ) {
    }
}

Controller

Thanks to the ObjectMapper component, mapping between DTOs and entities is effortless.

<?php

namespace App\Controller\Api;

use App\Dto\CreateCocktailRequest;
use App\Entity\Cocktail;
use App\Repository\CocktailRepository;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Attribute\MapRequestPayload;
use Symfony\Component\ObjectMapper\ObjectMapperInterface;
use Symfony\Component\Routing\Attribute\Route;

class CreateCocktailController
{
    public function __construct(
        private readonly CocktailRepository $cocktailRepository,
        private readonly ObjectMapperInterface $objectMapper
    ) {
    }

    #[Route('/api/cocktails', name: 'api.cocktails.create', methods: ['POST'])]
    public function __invoke(#[MapRequestPayload] CreateCocktailRequest $request): Response
    {
        $cocktail = $this->objectMapper->map($request, Cocktail::class);

        $this->cocktailRepository->save($cocktail);

        return new Response(null, Response::HTTP_CREATED);
    }
}

List all cocktails (GET method)

After creating cocktails, let’s build the endpoint to list them with filters.
Using Symfony 7, we can keep things clean and type-safe with a DTO, repository filters, and automatic query mapping.

Query DTO

This DTO makes query parameters explicit (name, isAlcoholic, difficulty, pagination…).

<?php

namespace App\Dto;

final readonly class ListCocktailsQuery
{
    public function __construct(
        public ?string $name = null,
        public ?bool $isAlcoholic = null,
        public ?int $difficulty = null,
        public int $page = 1,
        public int $itemsPerPage = 10,
    ) {
    }
}

Repository

Here, the repository handles filtering + pagination in a simple, reusable way.

    /**
     * @return Cocktail[]
     */
    public function findAllWithFilters(ListCocktailsQuery $query): array
    {
        $qb = $this->createQueryBuilder('cocktail');

        if ($query->name) {
            $qb
                ->andWhere('cocktail.name LIKE :name')
                ->setParameter('name', "%$query->name%");
        }

        if (null !== $query->isAlcoholic) {
            $qb
                ->andWhere('cocktail.isAlcoholic = :isAlcoholic')
                ->setParameter('isAlcoholic', $query->isAlcoholic);
        }

        if ($query->difficulty) {
            $qb
                ->andWhere('cocktail.difficulty = :difficulty')
                ->setParameter('difficulty', $query->difficulty);
        }

        $offset = ($query->page - 1) * $query->itemsPerPage;

        $qb
            ->setFirstResult($offset)
            ->setMaxResults($query->itemsPerPage);

        return $qb->getQuery()->getResult();
    }

Controller

Thanks to #[MapQueryString], Symfony 7 automatically maps query parameters into the DTO 💡.

<?php

namespace App\Controller\Api;

use App\Dto\ListCocktailsQuery;
use App\Repository\CocktailRepository;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
use Symfony\Component\HttpKernel\Attribute\MapQueryString;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\Serializer\SerializerInterface;

class ListCocktailsController
{
    public function __construct(
        private readonly CocktailRepository $cocktailRepository,
        private readonly SerializerInterface $serializer,
    ) {
    }

    #[Route('/api/cocktails', name: 'api.cocktails.list', methods: ['GET'])]
    public function __invoke(#[MapQueryString] ListCocktailsQuery $filter): Response
    {
        $cocktails = $this->cocktailRepository->findAllWithFilters($filter);

        $data = $this->serializer->serialize($cocktails, 'json', [
            'groups' => ['cocktail:read']
        ]);

        return JsonResponse::fromJsonString($data);
    }
}

This approach keeps your controllers slim, your queries explicit, and your API predictable.

Show one cocktail (GET)

After listing cocktails, let’s add the endpoint to fetch a single cocktail by its ID.

With Symfony 7, this becomes extremely clean thanks to #[MapEntity]:

Controller

<?php

namespace App\Controller\Api;

use App\Dto\ListCocktailsQuery;
use App\Entity\Cocktail;
use App\Repository\CocktailRepository;
use Symfony\Bridge\Doctrine\Attribute\MapEntity;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpKernel\Attribute\MapQueryParameter;
use Symfony\Component\HttpKernel\Attribute\MapQueryString;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\Serializer\SerializerInterface;

class ShowCocktailController
{
    public function __construct(
        private readonly SerializerInterface $serializer,
    ) {
    }

    #[Route('/api/cocktails/{id}', name: 'api.cocktails.show', methods: ['GET'])]
    public function __invoke(#[MapEntity(expr: 'repository.find(id)', message: 'Not found')] Cocktail $cocktail,): Response
    {
        $data = $this->serializer->serialize($cocktail, 'json', [
            'groups' => ['cocktail:read']
        ]);

        return JsonResponse::fromJsonString($data);
    }
}

💡 With #[MapEntity], Symfony automatically fetches the Cocktail entity based on the {id} parameter.
If the entity does not exist, it returns a 404 Not Found automatically with your custom message.

Update a cocktail

Time to make our API editable.
With Symfony 7, we can accept partial updates (PATCH) and full replacements (PUT) using a dedicated Update DTO + the ObjectMapper to keep controllers slim and safe.

Update DTO

<?php

namespace App\Dto;

use App\Entity\Cocktail;
use Symfony\Component\ObjectMapper\Attribute\Map;
use Symfony\Component\Validator\Constraints as Assert;

#[Map(target: Cocktail::class)]
final readonly class UpdateCocktailRequest
{
    public function __construct(
        #[Assert\Length(max: 255)]
        public ?string $name = null,

        #[Assert\Length(min: 10)]
        public ?string $description = null,

        #[Assert\NotBlank]
        public ?string $instructions = null,

        #[Assert\NotBlank]
        #[Assert\Count(min: 1)]
        public ?array $ingredients = null,

        #[Assert\Range(min: 1, max: 5)]
        public ?int $difficulty = null,

        public ?bool $isAlcoholic = null,

        #[Assert\Url]
        public ?string $imageUrl = null,
    ) {}
}

Controller

<?php

namespace App\Controller\Api;

use App\Dto\UpdateCocktailRequest;
use App\Entity\Cocktail;
use App\Repository\CocktailRepository;
use Symfony\Bridge\Doctrine\Attribute\MapEntity;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpKernel\Attribute\MapRequestPayload;
use Symfony\Component\ObjectMapper\ObjectMapperInterface;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\Component\Serializer\SerializerInterface;

class UpdateCocktailController
{
    public function __construct(
        private readonly CocktailRepository $cocktailRepository,
        private readonly ObjectMapperInterface $objectMapper,
        private readonly SerializerInterface $serializer
    ) {
    }

    #[Route('/api/cocktails/{id}', name: 'api.cocktails.update', methods: ['PUT', 'PATCH'])]
    public function __invoke(
        #[MapEntity(expr: 'repository.find(id)', message: 'Not found')] Cocktail $cocktail,
        #[MapRequestPayload] UpdateCocktailRequest $request
    ): JsonResponse {
        $updatedCocktail = $this->objectMapper->map($request, $cocktail);

        $this->cocktailRepository->save($updatedCocktail);

        $data = $this->serializer->serialize($updatedCocktail, 'json', [
            'groups' => ['cocktail:read']
        ]);

        return JsonResponse::fromJsonString($data);
    }
}

Delete a cocktail (DELETE method)

The last piece of our CRUD API: deleting a resource.
With Symfony 7, it stays clean and minimal thanks to #[MapEntity].

Controller

<?php

namespace App\Controller\Api;

use App\Entity\Cocktail;
use App\Repository\CocktailRepository;
use Symfony\Bridge\Doctrine\Attribute\MapEntity;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class DeleteCocktailController
{
    public function __construct(
        private readonly CocktailRepository $cocktailRepository
    ) {
    }

    #[Route('/api/cocktails/{id}', name: 'api.cocktails.delete', methods: ['DELETE'])]
    public function __invoke( #[MapEntity(expr: 'repository.find(id)', message: 'Not found')] Cocktail $cocktail): Response
    {
        $this->cocktailRepository->remove($cocktail);

        return new Response(null, Response::HTTP_NO_CONTENT);
    }
}

API Key Authentication

Once our CRUD is ready, the next step is securing the API.
Here’s how to implement a custom API key authenticator using Symfony 7’s Security system.

Custom Authenticator

<?php

namespace App\Security;

use App\Entity\User;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
use Symfony\Component\Security\Http\Authenticator\AbstractAuthenticator;
use Symfony\Component\Security\Http\Authenticator\Passport\Badge\UserBadge;
use Symfony\Component\Security\Http\Authenticator\Passport\Passport;
use Symfony\Component\Security\Http\Authenticator\Passport\SelfValidatingPassport;

class ApiKeyAuthenticator extends AbstractAuthenticator
{
    public function supports(Request $request): ?bool
    {
        return $request->headers->has('API-KEY');
    }

    public function authenticate(Request $request): Passport
    {
        $apiKey = $request->headers->get('API-KEY');
        if ($apiKey !== 'secret') {
            throw new AuthenticationException('Invalid API key');
        }

        return new SelfValidatingPassport(
            new UserBadge($apiKey, fn() => (new User())->setUsername('API-USER'))
        );
    }

    public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $firewallName): ?Response
    {
        return null;
    }

    public function onAuthenticationFailure(Request $request, AuthenticationException $exception): ?Response
    {
        $data = [
            'message' => strtr($exception->getMessageKey(), $exception->getMessageData()),
        ];

        return new JsonResponse($data, Response::HTTP_UNAUTHORIZED);
    }
}

security.yaml

    firewalls:
        main:
            custom_authenticators:
                - App\Security\ApiKeyAuthenticator
            lazy: true
            provider: app_user_provider
            stateless: true

Conclusion

And that’s it — we’ve just built a complete CRUD REST API with Symfony 7 🚀

Create a cocktail (POST)
Read cocktails (GET all / GET by id)
Update a cocktail (PUT/PATCH)
Delete a cocktail (DELETE)

Along the way, we used:

✅ DTOs for clean request validation
✅ ObjectMapper for mapping between DTOs and entities
✅ Serializer with groups for structured JSON responses
✅ MapEntity / MapRequestPayload / MapQueryString for cleaner controllers

This approach keeps controllers minimal, code maintainable, and APIs predictable.

👉 Full tutorial with extra steps (auth, filters, deployment on Cloudways): https://www.youtube.com/watch?v=Cd_9K749KfY

UX SweetAlert, a Symfony bundle integrating the SweetAlert2 library in Symfony applications.

Pentiminax — Fri, 04 Jul 2025 09:05:12 +0000

Looking to enhance your Symfony application's UX with elegant modal dialogs and toast notifications? Meet UX SweetAlert, a Symfony UX bundle that seamlessly integrates SweetAlert2 into your PHP backend and Twig frontend.

✨ Features

✅ Modal alerts (success, error, info, warning, question)
🔥 Toast notifications with customizable timers and positions
💡 LiveComponent integration for confirm dialogs
🧠 Uses Symfony's FlashBag under the hood
🎨 Supports light, dark, or auto themes
🛠 Fluent API for alert customization

⚙️ Installation

composer require pentiminax/ux-sweet-alert

If you're using Webpack Encore:

npm install --force
npm run watch

Already using Symfony UX? You're good to go!

🚀 Getting Started

Start by injecting the AlertManagerInterface or ToastManagerInterface in your controller.

✅ Example: Alert Modal

use Pentiminax\UX\SweetAlert\AlertManagerInterface;

public function updateSettings(AlertManagerInterface $alertManager): Response
{
    $alertManager->success(
        id: 'update-success',
        title: 'Update Successful',
        text: 'Your settings have been saved.'
    );

    return $this->redirectToRoute('dashboard');
}

🔔 Example: Toast Notification

use Pentiminax\UX\SweetAlert\ToastManagerInterface;

public function profile(ToastManagerInterface $toastManager): Response
{
    $toastManager->success(
        id: 'profile-updated',
        title: 'Profile Updated!',
        text: 'Changes saved.',
        timer: 3000,
        timerProgressBar: true
    );

    return $this->redirectToRoute('profile');
}

🎛️ Customizing Alerts

All alerts return an Alert object which supports a fluent API:

$alert = $alertManager->info('info-alert', 'Heads up!', 'Just a quick note');
$alert
    ->withCancelButton()
    ->withDenyButton()
    ->theme(Theme::DARK)
    ->confirmButtonColor('#0d6efd');

🧪 Rendering

To render alerts and toasts, include the Twig helper in your base layout:

{{ ux_sweet_alert_scripts() }}

Make sure your frontend listens for the JavaScript event:

document.addEventListener('ux-sweet-alert:alert:added', event => {
    Swal.fire(event.detail);
});

🧬 UX Live Component Integration

Need a confirmation popup before taking action? Use the provided ConfirmButton component:

<twig:SweetAlert:ConfirmButton
    title="Are you sure?"
    text="This action cannot be undone."
    icon="warning"
    showCancelButton="true"
    callback="onConfirm"
/>

When clicked:

Fires a LiveComponent event.
Displays SweetAlert modal.
Triggers the onConfirm() callback if confirmed.

📚 Docs

❤️ Why Use This?

UX SweetAlert gives you an elegant, JavaScript-powered feedback system directly from your Symfony controllers — no need to manage messy JS state manually.

If you're already using Symfony UX and Stimulus, this is a no-brainer.

📦 GitHub repository : https://github.com/pentiminax/ux-sweet-alert

Google launches Gemini CLI, the AI code agent everyone's been waiting for?

Pentiminax — Thu, 26 Jun 2025 12:48:35 +0000

🚀 Google Gemini CLI arrives!

Google has just released Gemini CLI, an open‑source AI agent that runs right in your terminal, powered by Gemini 2.5 Pro. It supports up to 1 million tokens and lets developers use natural‑language prompts for everything from writing and debugging code to doing deep research—even generating images or videos!

Key Features

Open source & flexible: Licensed under Apache 2.0. Users can inspect the code, improve it, and add features via the Model Context Protocol (MCP)
Smart terminal tool: Combines code file manipulation, shell command execution, and natural‑language assistance. It also integrates Google Search, and tools like Imagen and Veo for multimedia tasks
Free preview & generous quota: Signing in with a personal Google account grants free preview access, including up to 60 model requests per minute and 1,000 per day—claimed as the most generous allowance in the industry
VS Code pairing: Built-in integration with Gemini Code Assist, so you can seamlessly switch between IDE and CLI workflows

Why it matters

No cost for most use cases: The free tier is enough for the majority of developers
Better competition: Gemini CLI joins rivals like OpenAI’s Codex CLI and Anthropic’s Claude Code, but stands out due to its open‑source and high‑volume free usage
Extensible platform: Developers can add custom workflows, plugin support, and even Docker sandboxing, making it fitting for both hobbyist and enterprise deployments

How to get started

npm install -g @google/gemini-cli
gemini
# then sign in when prompted

What’s next?

During the preview, you get all this for free. Later, Google may offer paid tiers for teams and high-scale users, or let you connect via Vertex AI or Google Cloud AI Studio.

GitHub repo: https://github.com/google-gemini/gemini-cli

5 INCREDIBLE new features in Symfony 7.3 🚀

Pentiminax — Thu, 15 May 2025 13:57:45 +0000

Symfony 7.3 is packed with powerful enhancements to boost your development experience. Here's a quick overview:

1. ObjectMapper Component

Say goodbye to repetitive mapping code! The new ObjectMapper component simplifies data transfer between objects, such as mapping DTOs to entities, reducing boilerplate and potential errors.

// when creating a new object from another one
$user = $mapper->map($dto, User::class);

// when updating an existing object with another one
$mapper->map($dto, $user);

2. Explaining Security Voter Decisions

Debugging access control just got easier. Security voters can now provide detailed reasons for their decisions, which are displayed in the Symfony profiler and logs, aiding in understanding authorization outcomes.

namespace App\Security\Voter;

use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Core\Authorization\Voter\Vote;
use Symfony\Component\Security\Core\Authorization\Voter\Voter as BaseVoter;
// ...

class BlogCommentVoter extends BaseVoter
{
    protected function supports(string $attribute, mixed $subject): bool
    {
        // ...
    }

    protected function voteOnAttribute(string $attribute, $subject, TokenInterface $token, ?Vote $vote = null): bool
    {
        // ...

        if (...) {
            $vote?->addReason(sprintf('The post (id: %d) no longer accepts comments', $post->getId()));

            return false;
        }

        if (...) {
            $vote?->addReason(sprintf('The logged in user (username: %s) was banned from adding new comments', $user->getUsername()));

            return false;
        }

        return true;
    }
}

3. JsonPath Component

Introducing a powerful tool to query and extract data from JSON structures. The JsonPath component allows you to perform complex queries on JSON data, similar to XPath for XML, enhancing data manipulation capabilities.

// extract descendants from items (e.g. to get all authors)
$result = $crawler->find('$..author');
// outputs: ['Nigel Rees', 'Evelyn Waugh']

// filter contents using expressions
$result = $crawler->find('$.store.book[?(@.price < 10)]');
// you can use functions like length(), count(), match(), etc.
$result = $crawler->find('$.store.book[?length(@.author) > 11]');
$result = $crawler->find('$.store.book[?match(@.author, "[A-Z].*el.+")]');

4. Static Error Pages

Ensure consistent error handling even when your application can't process requests. Symfony 7.3 introduces a command to generate static HTML error pages, which can be served directly by the web server, improving user experience during failures.

# the first argument is the directory where the HTML files will be stored
# (they are named 400.html, 401.html, 402.html, .., 510.html, 511.html)

APP_ENV=prod php bin/console error:dump var/cache/prod/error_pages/

# by default, it generates the pages of all 4xx and 5xx errors, but you can
# pass a list of HTTP status codes to generate only those pages

APP_ENV=prod php bin/console error:dump var/cache/prod/error_pages/ 401 403 404 500

5. Simpler Server Event Streaming

Implement real-time features more effortlessly with the new EventStreamResponse and ServerEvent classes. These tools streamline server-sent events (SSE), making it easier to push updates to clients without external dependencies.

public function __invoke(): EventStreamResponse
{
    return new EventStreamResponse(function () {
        foreach ($this->watchJobsInProgress() as $job) {
            yield new ServerEvent($job->toJson(), type: 'jobs');

            sleep(1);
        }
    });
}

Explore these features in detail in the official Symfony blog posts.

UX DataTables, a Symfony bundle integrating the DataTables library in Symfony applications.

Pentiminax — Wed, 23 Apr 2025 09:37:39 +0000

Managing dynamic tables in Symfony applications can be challenging, especially when dealing with large datasets, server-side processing, and rich UI interactions. UX DataTables is a Symfony UX library that seamlessly integrates the popular DataTables.js plugin into your PHP applications, providing a powerful, declarative, and extensible way to build interactive tables.

🧩 What Is UX DataTables?

UX DataTables bridges the gap between Symfony and DataTables.js, allowing developers to define tables, columns, and behaviors entirely in PHP while leveraging Symfony’s templating and Stimulus controllers.

Key Features:
• Fully configurable tables via PHP classes
• Ajax support for dynamic data loading
• Server-side processing for large datasets
• Column-level customization (sorting, searching, visibility)
• Support for DataTables extensions like Buttons and Select
• Integration with Stimulus for frontend customization

🚀 Installation

First, ensure you have Symfony’s StimulusBundle configured.

Install the UX DataTables bundle using Composer:

composer require pentiminax/ux-datatables

If you’re using Webpack Encore, install your assets and start the watcher:

npm install --force
npm run watch

🛠️ Defining a Table in PHP

Creating a table is straightforward.
Inject the DataTableBuilderInterface and define your table:

use Pentiminax\UX\DataTables\Builder\DataTableBuilderInterface;
use Pentiminax\UX\DataTables\Model\Column;

class HomeController extends AbstractController
{
    #[Route('/', name: 'app_homepage')]
    public function index(DataTableBuilderInterface $builder): Response
    {
        $table = $builder
            ->createDataTable('usersTable')
            ->columns([
                Column::new('firstName', 'First Name'),
                Column::new('lastName', 'Last Name'),
            ])
            ->data([
                ['John', 'Doe'],
                ['Jane', 'Smith'],
            ]);

        return $this->render('home/index.html.twig', [
            'table' => $table,
        ]);
    }
}

Then, render the table in your Twig template:

{{ render_datatable(table) }}

🔄 Loading Data via Ajax

For large datasets, you can load data asynchronously using Ajax:

use Pentiminax\UX\DataTables\Model\Options\AjaxOption;

$ajaxOption = new AjaxOption(
    url: '/api/data',
    dataSrc: 'data',
    type: 'POST'
);

$dataTable->ajax($ajaxOption);

Ensure your API returns a JSON response in the following format:

{
    "data": [
        { "id": 1, "name": "Product A", "price": 10.5 },
        { "id": 2, "name": "Product B", "price": 20.0 }
    ],
    "recordsTotal": 100,
    "recordsFiltered": 100
}

To assist with this, use the DataTableResponseBuilder:

use Pentiminax\UX\DataTables\Builder\DataTableResponseBuilder;

$responseBuilder = new DataTableResponseBuilder();

$response = $responseBuilder->buildResponse(
    draw: 1,
    data: $data,
    recordsTotal: $totalRecords,
    recordsFiltered: $filteredRecords
);

return $response;

🧩 Extending with DataTables Extensions

UX DataTables supports various DataTables extensions. For example, to add export buttons:

use Pentiminax\UX\DataTables\Extension\ButtonsExtension;
use Pentiminax\UX\DataTables\Enum\ButtonType;

$buttonsExtension = new ButtonsExtension([
    ButtonType::COPY,
    ButtonType::CSV,
    ButtonType::EXCEL,
    ButtonType::PDF,
    ButtonType::PRINT
]);

$dataTable->addExtension($buttonsExtension);

For row selection capabilities:

use Pentiminax\UX\DataTables\Extension\SelectExtension;
use Pentiminax\UX\DataTables\Enum\SelectStyle;

$selectExtension = new SelectExtension(SelectStyle::MULTI);
$dataTable->extensions([$selectExtension]);

🎛️ Configuring Defaults

Set global defaults in config/packages/datatables.yaml:

data_tables:
  options:
    language: en-GB
    lengthMenu: [10, 25, 50]
    pageLength: 10
  template_parameters:
    class: 'table'
  extensions:
    buttons: [csv, excel, pdf, print]
    select:
      style: single

🎨 Customizing with Stimulus

// mytable_controller.js

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        this.element.addEventListener('datatables:pre-connect', this._onPreConnect);
        this.element.addEventListener('datatables:connect', this._onConnect);
    }

    disconnect() {
        // You should always remove listeners when the controller is disconnected to avoid side effects
        this.element.removeEventListener('datatables:pre-connect', this._onPreConnect);
        this.element.removeEventListener('datatables:connect', this._onConnect);
    }

    _onPreConnect(event) {
        // The table is not yet created
        // You can access the config that will be passed to "new DataTable()"
        console.log(event.detail.config);

        // For instance you can define a render callback for a given column
        event.detail.config.columns[0].render = function (data, type, row, meta) {
            return '<a href="' + data + '">Download</a>';
        }
    }

    _onConnect(event) {
        // The table was just created
        console.log(event.detail.table); // You can access the table instance using the event details

        // For instance you can listen to additional events
        event.detail.table.on('init', (event) => {
            /* ... */
        };
        event.detail.table.on('draw', (event) => {
            /* ... */
        };
    }
}

🙌 Thanks for Reading!

Thank you for taking the time to read this article!

UX DataTables is still evolving, and contributions are more than welcome — whether it's fixing bugs, suggesting new features, or simply sharing your feedback.

🔗 Check out the project on GitHub: https://github.com/pentiminax/ux-datatables

If you find the project helpful, consider giving it a ⭐.
Feel free to open an issue or submit a pull request to contribute.

Happy DataTabling with Symfony! 🚀