UX DataTables

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

Video tutorial

Requirements

• PHP 8.3 or higher
• Symfony StimulusBundle (installed through Symfony UX)
• Composer

Installation

Install the library via Composer:

composer require pentiminax/ux-datatables

Usage

1. Declare a DataTable

use App\Entity\User;
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\BooleanColumn;
use Pentiminax\UX\DataTables\Column\DateColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UserDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        return [
            NumberColumn::new('id', 'ID'),
            TextColumn::new('firstName', 'First name'),
            TextColumn::new('email', 'Email'),
            DateColumn::new('createdAt', 'Created at'),
        ];
    }
}

Column variants are configured fluently after new():

TextColumn::new('name')->utf8();
TextColumn::new('content')->html()->utf8();
NumberColumn::new('price')->formatted();
BooleanColumn::new('active')->renderAsSwitch();

2. Wire it in a controller

#[Route('/users', name: 'app_users')]
public function index(UserDataTable $table, Request $request): Response
{
    $table->handleRequest($request);

    if ($table->isRequestHandled()) {
        return $table->getResponse();
    }

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

3. Render in Twig

{{ render_datatable(table) }}

Tip: run php bin/console make:datatable to scaffold a DataTable class from any Doctrine entity.

Documentation

• Online documentation