### Install Bulma Extension Packages

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Install framework-specific extension packages, such as Select, Responsive, and Buttons, for Bulma. This example shows installing core, select, responsive, and buttons for Bulma.

```bash
php bin/console importmap:require datatables.net-bm
php bin/console importmap:require datatables.net-select-bm
php bin/console importmap:require datatables.net-responsive-bm
php bin/console importmap:require datatables.net-buttons-bm
```

--------------------------------

### UrlColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a UrlColumn with a name.

```php
UrlColumn::new('website')
```

--------------------------------

### ImageColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating an ImageColumn with a name.

```php
ImageColumn::new('photo')
```

--------------------------------

### MoneyColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a MoneyColumn with a name.

```php
MoneyColumn::new('price')
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/pentiminax/ux-datatables/blob/main/AGENTS.md

Use Composer to install project dependencies. This is a standard first step for PHP projects.

```bash
composer install
```

--------------------------------

### TemplateColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a TemplateColumn with a name.

```php
TemplateColumn::new('preview')
```

--------------------------------

### Complete DataTables Configuration Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/options.mdx

An example demonstrating a comprehensive configuration of DataTables with various options including AJAX source, scrolling, pagination, search, language, and layout.

```php
use Pentiminax\UX\DataTables\Enum\Feature;
use Pentiminax\UX\DataTables\Enum\Language;
use Pentiminax\UX\DataTables\Model\DataTable;

$dataTable = new DataTable('products');

$dataTable
    ->autoWidth()
    ->caption('Product Catalog')
    ->language(Language::EN_GB)
    ->ordering(handler: true, indicators: true)
    ->paging(buttons: 5, firstLast: true)
    ->searching()
    ->serverSide()
    ->processing()
    ->scrollY('400px')
    ->pageLength(25)
    ->lengthMenu([10, 25, 50, 100])
    ->stateSave()
    ->urlState()
    ->layout([
        'topStart'    => Feature::PAGE_LENGTH,
        'topEnd'      => Feature::SEARCH,
        'bottomStart' => Feature::INFO,
        'bottomEnd'   => Feature::PAGING,
    ])
    ->ajax(
        url: '/api/products',
        dataSrc: 'data',
        type: 'GET'
    );
```

--------------------------------

### ChoiceColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a ChoiceColumn with a name.

```php
ChoiceColumn::new('status')
```

--------------------------------

### Install UX DataTables

Source: https://github.com/pentiminax/ux-datatables/blob/main/README.md

Install the UX DataTables library using Composer.

```bash
composer require pentiminax/ux-datatables
```

--------------------------------

### DataTable Example Usage

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/datatable.mdx

An example demonstrating how to instantiate and configure a DataTable with server-side processing, language settings, and layout options.

```APIDOC
## Example

```php
use Pentiminax\UX\DataTables\Enum\Feature;
use Pentiminax\UX\DataTables\Enum\Language;
use Pentiminax\UX\DataTables\Model\DataTable;

$table = (new DataTable('users'))
    ->serverSide(true)
    ->processing(true)
    ->language(Language::EN)
    ->layout([
        'topStart'    => Feature::PAGE_LENGTH,
        'topEnd'      => Feature::SEARCH,
        'bottomStart' => Feature::INFO,
        'bottomEnd'   => Feature::PAGING,
    ]);
```
```

--------------------------------

### DateColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a DateColumn with a name.

```php
DateColumn::new('createdAt')
```

--------------------------------

### Minimal Select Extension Setup

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/extensions/select.mdx

Instantiate the Select extension with a single selection style. Ensure the necessary use statements are present.

```php
use Pentiminax\UX\DataTables\Enum\SelectStyle;
use Pentiminax\UX\DataTables\Model\Extensions\SelectExtension;

$dataTable->addExtension(new SelectExtension(SelectStyle::SINGLE));
```

--------------------------------

### Full Data Table Example with Edit Action

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/edit-modal.mdx

A complete example of a Data Table configuration including columns and an 'Edit' action that opens the inline edit modal.

```php
use App\Entity\Product;
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\BooleanColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;
use Pentiminax\UX\DataTables\Model\Action;
use Pentiminax\UX\DataTables\Model\Actions;

#[AsDataTable(Product::class)]
final class ProductsDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('name', 'Name');
        yield NumberColumn::new('price', 'Price');
        yield BooleanColumn::new('active', 'Active');
    }

    public function configureActions(Actions $actions): Actions
    {
        return $actions->add(
            Action::edit('Edit')
                ->setIcon('bi bi-pencil')
        );
    }
}
```

--------------------------------

### Manual Provider Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/data-providers-row-mappers.mdx

Illustrates how to implement a custom data provider using `ArrayDataProvider` and ensuring the row mapping pipeline is preserved.

```APIDOC
## Manual Provider Example

### Description
Example of overriding `createDataProvider` to use `ArrayDataProvider` while maintaining the row mapping pipeline.

### Method Implementation
```php
use Pentiminax\UX\DataTables\Contracts\DataProviderInterface;
use Pentiminax\UX\DataTables\DataProvider\ArrayDataProvider;

protected function createDataProvider(): ?DataProviderInterface
{
    return new ArrayDataProvider($this->rows, $this->createRowMapper());
}
```

### Notes
- `$this->createRowMapper()` ensures that the same mapping, template rendering, and action-resolution logic is applied.
- `setData()` on `AbstractDataTable` uses the same pipeline for inline rows.
```

--------------------------------

### NumberColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a NumberColumn with a name.

```php
NumberColumn::new('qty')
```

--------------------------------

### Complete Example with TemplateColumn

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/template-column.mdx

A full example demonstrating the integration of TemplateColumn within a DataTable class, including column configuration and row mapping.

```APIDOC
## Complete Example

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TemplateColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(Product::class)]
final class ProductsDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('name', 'Name');
        yield TemplateColumn::new('stock_badge', 'Stock')
            ->setField('stock')
            ->setTemplate('datatable/columns/stock_badge.html.twig');
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'         => $item->getId(),
            'name'       => $item->getName(),
            'stock_badge' => $item->getStock(),
        ];
    }
}
```

```twig
{# templates/datatable/columns/stock_badge.html.twig #}
{% set variant = data > 10 ? 'success' : (data > 0 ? 'warning' : 'danger') %}
<span class="badge text-bg-{{ variant }}">{{ data }}</span>
```
```

--------------------------------

### TextColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a TextColumn with a name and title.

```php
TextColumn::new('name', 'Name')
```

--------------------------------

### EmailColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating an EmailColumn with a name and title.

```php
EmailColumn::new('email', 'Email')
```

--------------------------------

### Set Display Start Row

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/options.mdx

Set the starting row for the DataTable display. Note that the value is zero-indexed, so `displayStart(20)` starts at row 21.

```php
$dataTable->displayStart(20);  // Start at row 21
```

--------------------------------

### Complete Image Column Configuration Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/image-column.mdx

Demonstrates a comprehensive configuration of an ImageColumn within a DataTable, including dimensions, rounded styling, placeholder, and click-to-open functionality.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\ImageColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield ImageColumn::new('avatar', 'Avatar')
            ->setImageWidth(50)
            ->setImageHeight(50)
            ->rounded()
            ->setPlaceholder('/images/default-avatar.png')
            ->clickable();
        yield TextColumn::new('name', 'Name');
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'     => $item->getId(),
            'avatar' => $item->getAvatarUrl(),
            'name'   => $item->getName(),
        ];
    }
}
```

--------------------------------

### BooleanColumn Factory Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Example of creating a BooleanColumn with a name.

```php
BooleanColumn::new('active')
```

--------------------------------

### Complete UsersDataTable Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/url-column.mdx

A full example of a DataTables class using various column types, including UrlColumn, for managing user data. This demonstrates how to configure columns and map row data.

```php
use App\Entity\User;
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Column\UrlColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('name', 'Name');
        yield UrlColumn::new('name', 'Profile')
            ->linkToRoute('admin_user_show', static fn (User $user): array => [
                'id' => $user->getId(),
            ]);
        yield UrlColumn::new('website', 'Website')
            ->openInNewTab()
            ->showExternalIcon();
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'      => $item->getId(),
            'name'    => $item->getName(),
            'website' => $item->getWebsite(),
        ];
    }
}
```

--------------------------------

### Complete TextColumn Example in DataTable

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/text-column.mdx

This example demonstrates configuring multiple TextColumns within a DataTable, including options for HTML content and UTF-8 sorting. It also shows how to map data to columns and set column widths.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID')->setWidth('60px');
        yield TextColumn::new('name', 'Name')->utf8();
        yield TextColumn::new('bio', 'Bio')->html()->utf8();
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'   => $item->getId(),
            'name' => $item->getName(),
            'bio'  => $item->getBio(),
        ];
    }
}
```

--------------------------------

### Complete Choice Column Example in a DataTable

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/choice-column.mdx

This example demonstrates integrating a ChoiceColumn with Bootstrap badge rendering within a full DataTable configuration, including other column types and enum usage.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\ChoiceColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

enum OrderStatus:
    case Draft     = 'draft';
    case Confirmed = 'confirmed';
    case Shipped   = 'shipped';
    case Cancelled = 'cancelled';

#[AsDataTable(Order::class)]
final class OrdersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('reference', 'Reference');
        yield ChoiceColumn::new('status', 'Status')
            ->setChoices(OrderStatus::class)
            ->renderAsBadges([
                'draft'     => 'secondary',
                'confirmed' => 'primary',
                'shipped'   => 'success',
                'cancelled' => 'danger',
            ]);
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'        => $item->getId(),
            'reference' => $item->getReference(),
            'status'    => $item->getStatus()->value,
        ];
    }
}

```

--------------------------------

### Environment-Specific Configuration Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/configuration.mdx

Illustrates how to use Symfony's configuration system to set different DataTables options for development versus default environments.

```yaml
# config/packages/data_tables.yaml (default)
data_tables:
  options:
    pageLength: 10

# config/packages/dev/datatables.yaml
data_tables:
  options:
    pageLength: 5  # Smaller for development
```

--------------------------------

### Minimal Buttons Extension Setup

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/extensions/buttons.mdx

Configure basic export buttons (Copy, CSV, Excel) and specify their rendering location using `Feature::BUTTONS` in the layout. Ensure `Feature::BUTTONS` is included in the layout to generate the buttons container.

```php
use Pentiminax\UX\DataTables\Enum\ButtonType;
use Pentiminax\UX\DataTables\Enum\Feature;
use Pentiminax\UX\DataTables\Model\Extensions\ButtonsExtension;

$dataTable
    ->addExtension(new ButtonsExtension([
        ButtonType::COPY,
        ButtonType::CSV,
        ButtonType::EXCEL,
    ]))
    ->layout([
        'topStart' => Feature::BUTTONS,
        'topEnd' => Feature::SEARCH,
    ]);
```

--------------------------------

### Install Semantic UI Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the Semantic UI DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-se
```

--------------------------------

### Install Bulma Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the Bulma DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-bm
```

--------------------------------

### Install JavaScript Dependencies with Webpack Encore

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/getting-started/installation.mdx

If using Webpack Encore, install the necessary JavaScript dependencies and rebuild your assets.

```bash
npm install --force
npm run watch
```

--------------------------------

### Install Zurb Foundation Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the Zurb Foundation DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-zf
```

--------------------------------

### Complete Data Table Configuration with Date Columns

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/date-column.mdx

Demonstrates a complete Data Table setup including `DateColumn` with both default and custom formats. Ensure the `mapRow` method returns dates in the exact format declared for each column to guarantee correct sorting.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
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(Article::class)]
final class ArticlesDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('title', 'Title');
        yield DateColumn::new('publishedAt', 'Published');
        yield DateColumn::new('updatedAt', 'Updated')->setFormat('Y-m-d H:i');
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'          => $item->getId(),
            'title'       => $item->getTitle(),
            'publishedAt' => $item->getPublishedAt()?->format('Y-m-d'),
            'updatedAt'   => $item->getUpdatedAt()?->format('Y-m-d H:i'),
        ];
    }
}
```

--------------------------------

### Custom Row Stage Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/data-providers-row-mappers.mdx

Example of a custom row stage that converts the 'title' field to uppercase. This demonstrates how to extend the row mapping pipeline with custom logic.

```php
use Pentiminax\UX\DataTables\Contracts\RowStageInterface;

final class UpperCaseTitleStage implements RowStageInterface
{
    public function process(array $mappedRow, mixed $originalRow, array $columns):
    {
        if (isset($mappedRow['title'])) {
            $mappedRow['title'] = strtoupper($mappedRow['title']);
        }

        return $mappedRow;
    }
}
```

--------------------------------

### Quick Start with #[AsDataTable] Attribute

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/abstract-datatable.mdx

Use the #[AsDataTable] attribute for Doctrine-backed tables. It automatically configures the DoctrineDataProvider with your entity, row processing, and query builder customization.

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

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('lastName', 'Last name');
        yield TextColumn::new('firstName', 'First name');
        yield TextColumn::new('email', 'Email');
    }

    protected function mapRow(mixed $item): array
    {
        /** @var User $item */
        return [
            'id' => $item->getId(),
            'lastName' => $item->getLastName(),
            'firstName' => $item->getFirstName(),
            'email' => $item->getEmail(),
        ];
    }
}
```

--------------------------------

### Implement Custom Dialog Modal Adapter

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/edit-modal.mdx

Implement the ModalAdapter interface to create a custom modal. This example shows how to create a dialog-based modal that handles submission and cancellation.

```typescript
// assets/modal/dialog-adapter.ts
import type { ModalAdapter, ModalHandlers } from '@pentiminax/ux-datatables/modal/ModalAdapter'

export class DialogModalAdapter implements ModalAdapter {
    private dialog: HTMLDialogElement | null = null
    private handlers: ModalHandlers | null = null

    async show(html: string, handlers: ModalHandlers): Promise<void> {
        this.handlers = handlers

        const template = document.createElement('template')
        template.innerHTML = html.trim()

        const root = template.content.querySelector<HTMLElement>('[data-ux-datatables-modal]')
        if (!root) return

        this.dialog = root as HTMLDialogElement
        document.body.appendChild(this.dialog)

        this.dialog.querySelector('[data-ux-datatables-submit]')
            ?.addEventListener('click', async () => {
                const form = this.dialog!.querySelector<HTMLFormElement>('#ux-datatables-edit-form')
                if (form) await handlers.onSubmit(Object.fromEntries(new FormData(form)))
            })

        this.dialog.addEventListener('close', () => handlers.onCancel?.())
        this.dialog.showModal()
    }

    replaceBody(html: string): void {
        const body = this.dialog?.querySelector('[data-ux-datatables-modal-body]')
        if (body) body.innerHTML = html
    }

    async hide(): Promise<void> {
        this.dialog?.close()
        this.dialog?.remove()
        this.dialog = null
    }

    isOpen(): boolean {
        return this.dialog?.open ?? false
    }
}

```

--------------------------------

### Set Length Menu with Custom Labels in PHP

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/configuration.mdx

Provides an example of setting the length menu options with custom labels for the dropdown in PHP.

```php
$table->lengthMenu([
    [10, 25, 50, -1],
    [10, 25, 50, 'All']
]);
```

--------------------------------

### Install Bootstrap 3 Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the Bootstrap 3 DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-bs
```

--------------------------------

### Configure DataTable with Mercure Topics

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/attributes.mdx

This example demonstrates configuring the `#[AsDataTable]` attribute with explicit Mercure topics. It specifies the entity class and Mercure configuration including the topics to subscribe to.

```php
#[AsDataTable(
    entityClass: User::class,
    mercure: [
        'topics' => [
            'https://example.com/users',
        ],
    ],
)]
```

--------------------------------

### Create DataTableResult Instance

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/data-providers-row-mappers.mdx

Example of instantiating DataTableResult with total records, filtered records, and the data payload.

```php
new DataTableResult(
    recordsTotal: 1000,
    recordsFiltered: 150,
    data: $rows,
);
```

--------------------------------

### Install Bootstrap 4 Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the Bootstrap 4 DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-bs4
```

--------------------------------

### Install jQuery UI Package with Importmap

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Use the Symfony console to require the jQuery UI DataTables package for use with importmap.

```bash
php bin/console importmap:require datatables.net-jqui
```

--------------------------------

### Complete NumberColumn Example in a DataTable

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/number-column.mdx

Demonstrates integrating NumberColumn with other column types within a complete DataTable configuration, including custom width and mapping row data.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(Product::class)]
final class ProductsDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID')->setWidth('60px');
        yield TextColumn::new('name', 'Product');
        yield NumberColumn::new('stock', 'Stock');
        yield NumberColumn::new('price', 'Price');
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'    => $item->getId(),
            'name'  => $item->getName(),
            'stock' => $item->getStock(),
            'price' => $item->getPrice(),
        ];
    }
}
```

--------------------------------

### Implement Manual Data Provider

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/data-providers-row-mappers.mdx

Example of creating a custom data provider using ArrayDataProvider. It ensures the same mapping, template rendering, and action resolution behavior is preserved by calling createRowMapper.

```php
use Pentiminax\UX\DataTables\Contracts\DataProviderInterface;
use Pentiminax\UX\DataTables\DataProvider\ArrayDataProvider;

protected function createDataProvider(): ?DataProviderInterface
{
    return new ArrayDataProvider($this->rows, $this->createRowMapper());
}
```

--------------------------------

### Configure DataTable with AsDataTable Attribute

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/attributes.mdx

Use the `#[AsDataTable]` attribute on a class to configure a data table. This example shows basic configuration with entity class, serialization groups, Mercure, and API Platform integration.

```php
#[AsDataTable(User::class, serializationGroups: ['user:list'], mercure: true, apiPlatform: true)]
```

--------------------------------

### Configure UrlColumn with openInNewTab and showExternalIcon

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/url-column.mdx

Configure the UrlColumn to open links in a new tab and display an external icon. This is useful for external links or when you want to guide users to a new page without leaving the current one.

```php
yield UrlColumn::new('website', 'Website')
    ->openInNewTab()
    ->showExternalIcon();
```

--------------------------------

### Complete Email Column Example in DataTable

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/email-column.mdx

Demonstrates integrating an EmailColumn with both obfuscation and masking within a complete DataTable configuration. Note that searching and sorting operate on the raw email value.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\EmailColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('name', 'Name');
        yield EmailColumn::new('email', 'Email Address')
            ->obfuscate()
            ->mask();
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'    => $item->getId(),
            'name'  => $item->getName(),
            'email' => $item->getEmail(),
        ];
    }
}
```

--------------------------------

### Initialize Buttons Extension with Button Types

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/extensions.md

Shows how to initialize the Buttons extension with an array of predefined ButtonType cases. The constructor also accepts strings or Button objects.

```php
use Pentiminax\UX\DataTables\Enum\ButtonType;
use Pentiminax\UX\DataTables\Model\Extensions\{ButtonsExtension, Button};

new ButtonsExtension([
    ButtonType::COPY, ButtonType::CSV, ButtonType::EXCEL,
    ButtonType::PDF, ButtonType::PRINT, ButtonType::COLUMN_VISIBILITY,
]);
```

--------------------------------

### Example JSON Payload for AJAX

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/client-side-processing.mdx

This is an example of the JSON structure expected from an AJAX endpoint when `dataSrc` is not explicitly set (defaults to 'data').

```json
{
  "data": [
    {
      "firstName": "Ada",
      "lastName": "Lovelace",
      "email": "ada@example.com",
      "role": "Administrator"
    },
    {
      "firstName": "Grace",
      "lastName": "Hopper",
      "email": "grace@example.com",
      "role": "Manager"
    }
  ]
}
```

--------------------------------

### Initialize FixedColumns Extension

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/extensions.md

Shows how to initialize the FixedColumns extension to freeze a specified number of leftmost or rightmost columns.

```php
new FixedColumnsExtension(start: 1, end: 0);  // freeze N leftmost / rightmost
```

--------------------------------

### Complete Boolean Column Example in DataTable

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/boolean-column.mdx

A full example demonstrating the usage of BooleanColumn within a DataTable class, including other column types and the mapRow method.

```php
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\BooleanColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield NumberColumn::new('id', 'ID');
        yield TextColumn::new('email', 'Email');
        yield BooleanColumn::new('active', 'Active')
            ->renderAsSwitch();
        // Entity class is injected automatically from #[AsDataTable(User::class)]
    }

    protected function mapRow(mixed $item): array
    {
        return [
            'id'     => $item->getId(),
            'email'  => $item->getEmail(),
            'active' => $item->isActive(),
        ];
    }
}
```

--------------------------------

### Configure Select Extension with Multi-Select Style

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/extensions.md

Demonstrates initializing the Select extension with a multi-select style and enabling header checkboxes. The constructor supports various other options for customization.

```php
use Pentiminax\UX\DataTables\Enum\SelectStyle;
use Pentiminax\UX\DataTables\Model\Extensions\SelectExtension;

(new SelectExtension(style: SelectStyle::MULTI))   // SINGLE | MULTI
    ->withCheckbox(true)
    ->headerCheckbox(true);
```

--------------------------------

### Configure NumberColumn and MoneyColumn Variants

Source: https://github.com/pentiminax/ux-datatables/blob/main/README.md

Shows fluent configuration for NumberColumn and MoneyColumn, including formatting and currency settings.

```php
NumberColumn::new('price')->formatted();
MoneyColumn::new('price')->currency('EUR')->storedAsCents();
```

--------------------------------

### Inline Arrays With data()

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/client-side-processing.mdx

Use `data()` when your controller already has the rows in array form for the smallest possible setup. This setup is ideal when the page already owns the dataset and no extra HTTP request is needed.

```php
namespace App\Controller;

use Pentiminax\UX\DataTables\Column\EmailColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Contracts\DataTableBuilderInterface;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

final class UserController extends AbstractController
{
    #[Route('/admin/users', name: 'app_admin_users')]
    public function index(DataTableBuilderInterface $builder): Response
    {
        $table = $builder
            ->createDataTable('users')
            ->columns([
                TextColumn::new('firstName', 'First name'),
                TextColumn::new('lastName', 'Last name'),
                EmailColumn::new('email', 'Email'),
                TextColumn::new('role', 'Role'),
            ])
            ->data([
                [
                    'firstName' => 'Ada',
                    'lastName' => 'Lovelace',
                    'email' => 'ada@example.com',
                    'role' => 'Administrator',
                ],
                [
                    'firstName' => 'Grace',
                    'lastName' => 'Hopper',
                    'email' => 'grace@example.com',
                    'role' => 'Manager',
                ],
            ]);

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

--------------------------------

### List Available Entities for DataTable Generation

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/maker.mdx

Run this command without arguments to list all available entities and be prompted to select one for DataTable generation. This is useful when you don't want to specify the entity directly in the command.

```bash
php bin/console make:datatable
```

--------------------------------

### Shared Column Configuration Methods

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/columns.md

Demonstrates various shared methods available on all column types for configuration, including width, class, ordering, searching, and data source.

```php
TextColumn::new('email', 'Email')
    ->setWidth('200px')            // any CSS unit
    ->setClassName('text-truncate')
    ->setCellType('th')            // 'td' (default) or 'th'
    ->setVisible(true)
    ->setOrderable(false)          // disable sorting on this column
    ->setSearchable(false)         // disable per-column search
    ->disableGlobalSearch()        // keep searchable but exclude from the global box
    ->setOrderExpression('invoiceCount')  // raw ORDER BY (DQL/SELECT alias) for a computed column — see server-side.md
    ->setData('user.email')        // data source path (client-side rows)
    ->setField('user.email')       // entity property path (server-side query/sort)
    ->setDefaultContent('—')       // fallback when value is null/missing
    ->setExportable(false)         // exclude from export (adds 'not-exportable' class)
    ->hideWhenUpdating()           // hide field in the edit modal
    ->permission('ROLE_ADMIN')     // hide column unless granted (evaluated server-side, never sent to client)
    ->setCustomOption('key', 'value');
```

--------------------------------

### Disable Column Control for a TextColumn

Source: https://github.com/pentiminax/ux-datatables/blob/main/README.md

Example of disabling column control features for a specific TextColumn while maintaining search processing.

```php
TextColumn::new('internalCode')->disableColumnControl();
```

--------------------------------

### Configure TextColumn Variants

Source: https://github.com/pentiminax/ux-datatables/blob/main/README.md

Demonstrates fluent configuration options for TextColumn, including UTF8 encoding and HTML rendering.

```php
TextColumn::new('name')->utf8();
TextColumn::new('content')->html()->utf8();
```

--------------------------------

### Custom Stage Example

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/data-providers-row-mappers.mdx

Demonstrates how to implement a custom `RowStageInterface` to modify row data, such as converting a 'title' field to uppercase.

```APIDOC
## Custom Stage Example

### Description
Example of a custom row stage that converts the 'title' field to uppercase.

### Class Definition
```php
use Pentiminax\UX\DataTables\Contracts\RowStageInterface;

final class UpperCaseTitleStage implements RowStageInterface
{
    public function process(array $mappedRow, mixed $originalRow, array $columns): array
    {
        if (isset($mappedRow['title'])) {
            $mappedRow['title'] = strtoupper($mappedRow['title']);
        }

        return $mappedRow;
    }
}
```

### Usage Example
```php
protected function createRowMapper(): RowMapperInterface
{
    return parent::createRowMapper()->add(new UpperCaseTitleStage());
}
```
```

--------------------------------

### Run Project Tests

Source: https://github.com/pentiminax/ux-datatables/blob/main/AGENTS.md

Execute all project tests using PHPUnit. Ensure the project is functioning as expected.

```bash
vendor/bin/phpunit
```

--------------------------------

### Excluding Columns from Edit Form

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/edit-modal.mdx

Use `hideWhenUpdating()` on a column to exclude it from the edit modal form. This example excludes the 'createdAt' column.

```php
public function configureColumns(): iterable
{
    yield NumberColumn::new('id', 'ID');
    yield TextColumn::new('name', 'Name');
    yield DateColumn::new('createdAt', 'Created')
        ->hideWhenUpdating();  // Excluded from the edit form
}
```

--------------------------------

### Generated UserDataTable Class Structure

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/maker.mdx

This is an example of the DataTable class generated by the maker command. It includes column definitions and row mapping.

```php
// src/DataTables/UserDataTable.php
namespace App\DataTables;

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

#[AsDataTable(User::class)]
final class UserDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield TextColumn::new('id', 'Id');
        yield TextColumn::new('email', 'Email');
        yield TextColumn::new('firstName', 'First Name');
        yield TextColumn::new('lastName', 'Last Name');
        // Add more columns as needed
    }

    protected function mapRow(mixed $item): array
    {
        /** @var User $item */
        return [
            'id' => $item->getId(),
            'email' => $item->getEmail(),
            'firstName' => $item->getFirstName(),
            'lastName' => $item->getLastName(),
        ];
    }
}
```

--------------------------------

### Fluent Action Configuration

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/actions.md

Configure an action fluently with various options including label, class, icon, ID field, HTML attributes, confirmation prompts, conditional display, URL linking, entity class, and permissions.

```php
Action::detail()
    ->setLabel('View')
    ->setClassName('btn btn-sm btn-primary')
    ->setIcon('bi bi-eye')
    ->setIdField('uuid')                       // ID field used in URLs (default 'id')
    ->setHtmlAttributes(['data-turbo' => 'false'])
    ->askConfirmation('Sure?')                 // confirmation button label
    ->displayIf('status', 'draft')             // show only when row.status === 'draft'
    ->linkToUrl(fn (User $u) => '/users/'.$u->getId())  // string | callable
    ->setEntityClass(User::class)              // entity for permission subject
    ->permission('EDIT', fn (User $u) => $u->getId() !== 1);
```

--------------------------------

### Basic Usage of TemplateColumn

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/template-column.mdx

Demonstrates how to create and configure a basic TemplateColumn, specifying the field to use and the Twig template for rendering.

```APIDOC
## Basic Usage

```php
use Pentiminax\UX\DataTables\Column\TemplateColumn;

TemplateColumn::new('status_display', 'Status')
    ->setField('status')
    ->setTemplate('datatable/columns/user_status.html.twig');
```

The column name (`status_display`) is the key used in `mapRow()`. `setField()` tells the row mapper which property to read from the entity.
```

--------------------------------

### UrlColumn::new

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/url-column.mdx

Creates a new UrlColumn instance. The first argument is the data name, and the second is the column title.

```APIDOC
## UrlColumn::new

### Description
Creates a new UrlColumn (type: `html`).

### Method
`UrlColumn::new(string $name, string $title = '')`

### Parameters
- **name** (string) - The data name for the column.
- **title** (string) - The title to display for the column.
```

--------------------------------

### Create Basic Email Column

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/email-column.mdx

Instantiate a new EmailColumn for rendering email addresses. This sets up the basic column with a mailto link.

```php
use Pentiminax\UX\DataTables\Column\EmailColumn;

EmailColumn::new('email', 'Email Address');
```

--------------------------------

### Enable Responsive Extension (Minimal)

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/extensions/responsive.mdx

Call the `responsive()` method on your DataTable instance to enable the Responsive Extension with default settings.

```php
$dataTable->responsive();
```

--------------------------------

### Configure Column Display

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/overview.mdx

Set the header label, CSS class, width, visibility, and default content for a column using fluent methods.

```php
$column
    ->setTitle('Full Name')           // Header label
    ->setClassName('text-primary')    // CSS class on each cell
    ->setWidth('200px')               // Column width
    ->setVisible(false)               // Hide the column
    ->setDefaultContent('N/A');       // Fallback for null values
```

--------------------------------

### DataTableResult Instantiation

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/abstract-datatable.mdx

Example of creating a DataTableResult object to wrap data with pagination counts. Use this to return structured results from your data table processing.

```php
new DataTableResult(
    recordsTotal: 1000,
    recordsFiltered: 150,
    data: $rows
);
```

--------------------------------

### Configure BooleanColumn Variant

Source: https://github.com/pentiminax/ux-datatables/blob/main/README.md

Illustrates how to configure a BooleanColumn to render as a switch.

```php
BooleanColumn::new('active')->renderAsSwitch();
```

--------------------------------

### Create Columns

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/overview.mdx

Use the static `::new()` factory method on concrete column classes to create new column instances. The first argument is the data key, and the second is the display header.

```php
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Column\NumberColumn;
use Pentiminax\UX\DataTables\Column\DateColumn;

TextColumn::new('firstName', 'First Name');
NumberColumn::new('age', 'Age');
DateColumn::new('createdAt', 'Created');
```

--------------------------------

### Action Fluent Configuration

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/action-column.mdx

Customize the behavior and appearance of individual actions using these fluent methods.

```APIDOC
## Action Fluent Configuration

### `setLabel(string $label)`

Override the button label.

### `setClassName(string $className)`

Customize button classes.

### `setIcon(string $icon)`

Render an icon before the label.

### `askConfirmation(string $message)`

Display a browser confirmation prompt before the action.

### `displayIf(string $field, mixed $value)`

Show the action only when `row[field] === value`.

### `setIdField(string $idField)`

Use another row key instead of `id`.

### `setEntityClass(string $entityClass)`

Set the Doctrine entity class explicitly.

### `linkToUrl(string|callable $url)`

Set the URL for detail actions (static string or per-row callable).

When `linkToUrl()` receives a callable, the argument depends on how the row was produced:

- `AbstractDataTable` + provider or `setData($objects)`: the callable receives the original source object
- manual `DataTable::data([...])` inline rows: the callable receives the row array
```

--------------------------------

### Minimal User Data Table Configuration

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/SKILL.md

Defines a DataTables class for the User entity, including columns, server-side processing, and row actions. Use this as a starting point for your own DataTables.

```php
use App\Entity\User;
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\{DateColumn, NumberColumn, TextColumn};
use Pentiminax\UX\DataTables\Model\{AbstractDataTable, Action, Actions, DataTable};

#[AsDataTable(User::class)]
final class UserDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        return [
            NumberColumn::new('id', 'ID'),
            TextColumn::new('email', 'Email'),
            DateColumn::new('createdAt', 'Created')->setFormat('d/m/Y'),
        ];
    }

    public function configureDataTable(DataTable $table): DataTable
    {
        return $table->serverSide()->processing()->pageLength(25);
    }

    public function configureActions(Actions $actions): Actions
    {
        return $actions->add(Action::edit())->add(Action::delete()->askConfirmation('Delete?'));
    }
}
```

--------------------------------

### Enable Bulma Styling with AssetMapper

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/styling.mdx

Configure `assets/controllers.json` to use Bulma CSS. Ensure Bulma CSS is enabled and default CSS is disabled. Install the necessary packages separately.

```json
{
  "controllers": {
    "@pentiminax/ux-datatables": {
      "datatable": {
        "enabled": true,
        "autoimport": {
          "datatables.net-dt/css/dataTables.dataTables.min.css": false,
          "datatables.net-bm/css/dataTables.bulma.min.css": true
        }
      }
    }
  }
}
```

--------------------------------

### Define Column with Column Attribute

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/attributes.mdx

Use the `#[Column]` attribute on a property to define column metadata. This example shows a basic column definition for an email property, enabling searching and ordering.

```php
#[Column(title: 'Email', searchable: true, orderable: true)]
private string $email;
```

--------------------------------

### Manual Usage with DataTableBuilderInterface

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/columns/action-column.mdx

Demonstrates how to manually create and configure an ActionColumn with various actions, such as delete, using the DataTableBuilderInterface.

```APIDOC
## Manual Usage with `DataTableBuilderInterface`

If you build tables manually, create an `Actions` collection and wrap it with `ActionColumn::fromActions()`:

```php
use App\Entity\User;
use Pentiminax\UX\DataTables\Column\ActionColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\Action;
use Pentiminax\UX\DataTables\Model\Actions;

$actions = (new Actions())
    ->setColumnLabel('Operations')
    ->add(
        Action::delete()
            ->setEntityClass(User::class)
            ->setIdField('uuid')
            ->askConfirmation('Delete this user?')
    );

$table = $builder
    ->createDataTable('users')
    ->columns([
        TextColumn::new('email', 'Email'),
        ActionColumn::fromActions('actions', 'Operations', $actions),
    ])
    ->data([
        ['uuid' => '8f9f0c31', 'email' => 'john@example.com'],
    ]);
```

Manual tables must provide the entity class themselves because there is no `#[AsDataTable]` attribute to infer it from.
```

--------------------------------

### Basic Maker Command Usage

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/reference/maker.mdx

The most basic usage of the `make:datatable` command requires only the entity name.

```bash
php bin/console make:datatable EntityName
```

--------------------------------

### Configure User Data Table with Domain Objects

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/guide/client-side-processing.mdx

Define columns and actions for a data table that processes domain objects. Use `setData()` in the controller to provide the domain objects.

```php
namespace App\DataTables;

use App\Entity\User;
use Pentiminax\UX\DataTables\Attribute\AsDataTable;
use Pentiminax\UX\DataTables\Column\EmailColumn;
use Pentiminax\UX\DataTables\Column\TextColumn;
use Pentiminax\UX\DataTables\Model\AbstractDataTable;
use Pentiminax\UX\DataTables\Model\Action;
use Pentiminax\UX\DataTables\Model\Actions;

#[AsDataTable(User::class)]
final class UsersDataTable extends AbstractDataTable
{
    public function configureColumns(): iterable
    {
        yield TextColumn::new('fullName', 'Name');
        yield EmailColumn::new('email', 'Email');
        yield TextColumn::new('role', 'Role');
    }

    protected function mapRow(mixed $item): array
    {
        /** @var User $item */
        return [
            'fullName' => $item->getFirstName().' '.$item->getLastName(),
            'email' => $item->getEmail(),
            'role' => $item->getRole()->value,
        ];
    }

    public function configureActions(Actions $actions): Actions
    {
        $detailAction = Action::detail()->linkToUrl(static fn (User $user): string => '/admin/users/'.$user->getId()):

        return $actions->add($detailAction);
    }
}
```

```php
namespace App\Controller;

use App\DataTables\UsersDataTable;
use App\Repository\UserRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

final class UserController extends AbstractController
{
    #[Route('/admin/users', name: 'app_admin_users')]
    public function index(UsersDataTable $table, UserRepository $users): Response
    {
        $data = $users->findBy([], ['lastName' => 'ASC'])

        $table->setData($data);

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

--------------------------------

### Enable Responsive Extension (Advanced)

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/extensions/responsive.mdx

Add the `ResponsiveExtension` to your DataTable using the `addExtension` method for more control over its configuration.

```php
use Pentiminax\UX\DataTables\Model\Extensions\ResponsiveExtension;

$dataTable->addExtension(new ResponsiveExtension());
```

--------------------------------

### Configure Fixed Columns Extension

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/extensions/fixed-columns.mdx

Customize the Fixed Columns extension by specifying the number of columns to fix at the start and end of the table. Use this for more granular control over which columns remain visible during scrolling.

```php
$dataTable->addExtension(new FixedColumnsExtension(start: 2, end: 1));
```

--------------------------------

### Enable API Platform Integration via Attribute

Source: https://github.com/pentiminax/ux-datatables/blob/main/skills/ux-datatables/references/api-platform.md

Use the `#[AsDataTable]` attribute with `apiPlatform: true` to enable API Platform integration and automatic URL resolution/column detection.

```php
#[AsDataTable(Book::class, apiPlatform: true)]
final class BookDataTable extends AbstractDataTable {}
```

--------------------------------

### Publish Mercure Update Payload

Source: https://github.com/pentiminax/ux-datatables/blob/main/docs/src/content/docs/integrations/mercure.mdx

Example JSON payload for a Mercure update when using inline editing with topics. This structure is published by the Ajax edit controller when boolean inline edit is called.

```json
{
  "type": "edit",
  "id": "...",
  "field": "..."
}
```