Trong bài trước chúng ta đã tìm hiểu tổng quan về Grid view trong Sylius, cách khai báo grid cơ bản, render dữ liệu và lý do tại sao Grid là công cụ mạnh mẽ trong Sylius.

Ở bài này, chúng ta sẽ đi sâu vào tùy biến Grid để phù hợp hơn với nhu cầu thực tế, bao gồm:

  • Thêm cột (field) mới.

  • Thêm filter nâng cao.

  • Thêm actions (row/bulk).

  • Cấu hình pagination.

1. Thêm cột (fields) vào Grid

Mặc định, grid trong Sylius hiển thị một số cột cơ bản. Nhưng thực tế, bạn thường cần thêm các cột như hình ảnh, trạng thái, hay dữ liệu custom.

Ví dụ: thêm cột Hình ảnh vào grid sản phẩm.

# config/packages/_sylius.yaml
sylius_grid:
    grids:
        app_admin_product:
            driver:
                name: doctrine/orm
                options:
                    class: App\Entity\Product\Product
            fields:
                code:
                    type: string
                    label: Code
                name:
                    type: string
                    label: Name
                image:
                    type: twig
                    label: Image
                    options:
                        template: "Admin/Grid/Field/product_image.html.twig"

File product_image.html.twig:

{% if data and data.firstImage %}
    <img src="{{ asset(data.firstImage.path) }}" alt="{{ data.name }}" width="50">
{% else %}
    <span>No image</span>
{% endif %}

Với type: twig, bạn có thể render bất kỳ logic nào mong muốn.

2. Thêm filter (lọc dữ liệu)

Filter cho phép bạn tìm kiếm nhanh trong grid.

Có nhiều loại filter có sẵn: string, boolean, date, entity.

Ví dụ: Thêm filter tìm kiếm theo category cho sản phẩm:

filters:
    category:
        type: entity
        label: Category
        options:
            fields: [mainTaxon]
            class: App\Entity\Taxonomy\Taxon

  • type: entity: cho phép chọn từ dropdown danh sách entity.

  • fields: [mainTaxon]: map tới quan hệ trong entity Product.

Kết quả: trong grid sẽ có filter dropdown để lọc sản phẩm theo category.

3. Thêm actions

Có 2 loại action trong grid:

  • Main actions: hiển thị trên header (vd: Create new).

  • Item actions: hiển thị ở từng row (vd: Edit/Delete).

  • Bulk actions: thao tác hàng loạt (vd: Xoá nhiều item).

Ví dụ thêm action Duplicate product:

actions:
    item:
        duplicate:
            type: link
            label: Duplicate
            options:
                link:
                    route: app_admin_product_duplicate
                    parameters:
                        id: resource.id

Controller xử lý:

#[Route('/admin/products/{id}/duplicate', name: 'app_admin_product_duplicate')]
public function duplicate(Product $product, EntityManagerInterface $em): Response
{
    $newProduct = clone $product;
    $newProduct->setCode($product->getCode() . '-copy');
    $em->persist($newProduct);
    $em->flush();

    $this->addFlash('success', 'Product duplicated successfully.');

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

Kết quả: mỗi sản phẩm có thêm nút Duplicate.

4. Cấu hình Pagination

Sylius Grid hỗ trợ phân trang tự động. Bạn có thể cấu hình:

  • Giới hạn số item mỗi trang.

  • Các lựa chọn hiển thị (10, 25, 50, 100).

Ví dụ:

limits: [10, 25, 50, 100]

Full ví dụ:

sylius_grid:
    grids:
        app_admin_product:
            driver:
                name: doctrine/orm
                options:
                    class: App\Entity\Product\Product
            limits: [10, 25, 50, 100]   # Cấu hình pagination
            sorting:
                createdAt: desc
            fields:
                code:
                    type: string
                    label: Code
                name:
                    type: string
                    label: Name
                createdAt:
                    type: datetime
                    label: Created At

Khi render grid, ở footer sẽ có dropdown cho phép chọn số lượng record mỗi trang.

5. Best Practices khi tùy biến Grid

  • Dùng type: twig khi cần custom hiển thị phức tạp (hình ảnh, badge, icon).

  • Luôn cấu hình sorting để tránh kết quả random.

  • Với dataset lớn (10k+ record), nên giới hạn limits để tránh query nặng.

  • Tách riêng file twig cho field custom để dễ maintain.

  • Sử dụng bulk actions để thao tác nhanh (xoá nhiều sản phẩm, export).

6. Kết luận

Trong bài này, chúng ta đã học cách tùy biến Grid trong Sylius:

  • Thêm cột mới bằng string, datetime, twig.

  • Thêm filter nâng cao.

  • Thêm actions (item, bulk).

  • Cấu hình pagination để quản lý dữ liệu lớn.

Sau bước này, bạn đã có thể biến grid từ danh sách đơn giản thành một công cụ quản trị mạnh mẽ và phù hợp với business.

 

Dong Nguyen

Let's continue to try our best.