fedale/gridview-bundle

Gridview in Yii2 style inside your Symfony projects

Maintainers

Package info

github.com/fedale/gridview-bundle

Type:symfony-bundle

pkg:composer/fedale/gridview-bundle

Statistics

Installs: 9

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

v1.1.0 2026-06-18 21:57 UTC

This package is auto-updated.

Last update: 2026-06-20 06:02:33 UTC


README

A Gridview component for the Symfony framework, inspired by Yii 2 GridView. Main inspirations:

Installation

composer require fedale/gridview-bundle

Requires PHP >= 8.1 and Symfony >= 6.4. The bundle is auto-registered via Symfony Flex; otherwise add Fedale\GridviewBundle\FedaleGridviewBundle to config/bundles.php.

Usage

First of all, this gridview is not automagic: if you are searching something magical like EasyAdmin gridview this project is not for you. You have, at least, configure a Fedale\GridviewBundle\DataProviderInterface and an array of columns to display.

With an Entity having these properties:

  • id
  • code
  • username you can dsplay a grid having these columns configuring this array:

$columns = [ 'id', 'code', 'username' ];

$dataProvider = [ // 'queryBuilder' => $queryBuilder, 'models' => \App\Entity\Customer\Customer::class, ];

$gridview = $this->createGridviewBuilder() ->setDataProvider($dataProvider) ->setColumns($columns) ->renderGridview();

return $gridview->renderGrid('@FedaleGridview/gridview/index.html.twig', []);

For each you can set further configurations, passing each of them as array. In that case you can configure 'attribute', 'filter' (i.e. a query filter, that it needs a searchModel first), 'value' an anonymous function to return specific value, 'twigFilter' that will be applied to value of cell, 'visibile' 'boolean', 'label' (header of the column).

Try to change array $columns in this way: $columns = [ 'id', [ 'attribute' => 'code', 'value' => function (array $data, string $key, ColumnInterface $column) { return '' . $data['code'] . ''; }, 'twigFilter' => 'raw' ], [ 'attribute' =>'username', 'twigFilter' => 'reverse' ]
];

In $dataProvider you can also set 'pagination' and 'sort' parameters:

// be careful that IDs must have same name as columns $sortAttributes = [ 'id' => [ 'asc' => ['c.id' => Sort::ASC], 'desc' => ['c.id' => Sort::DESC], 'default' => Sort::DESC, ], 'code' => [ 'asc' => ['c.code' => Sort::ASC], 'desc' => ['c.code' => Sort::DESC], 'default' => Sort::DESC, ], ];

and Gridview become sortable by 'id' and 'code' columns! With 'pagination' like this: you can set default page size $paginationAttributes = [ 'defaultPageSize' => 10 ];

But the only thing you have to do is to set a config arrays. // Order matters! Try to switch setColumns() / setFilterModel() $gridview = $this->createGridviewBuilder() ->setSearchModel($this->customerSearchModel) ->setDataProvider($dataProvider) ->setColumns($columns) ->setAttributes([ 'class' => 'table table-dark', 'row' => [ 'class' => 'row-class' ], 'header' => [ 'class' => 'row-header' ], 'container' => [ 'class' => 'row-container', 'data-type' => 'my-custom-type' ] ]) ->renderGridview(); ;

where $this->customerSearchModel is a child of Fedale\GridviewBundle\Service\SearchModel $dataProvider represents a way and how to get data from a source like a database $dataProvider = [ // 'queryBuilder' => $queryBuilder, 'models' => \App\Entity\Customer\Customer::class, 'pagination' => $paginationAttributes, 'sort' => $sortAttributes ];

Let's try with one entity.

How to define relations between entitites?

->setColumns($columns) is the place where you set columns from different entities. $columns is an array where each item has these keys: attribute: the name of columnn value: is the value to display, you can use a closure filter: filter to use, like 'text' or 'select' twigFilter: one of twig filter visible: boolean label:

Internationalization (i18n)

The grid supports instant, client-side language switching — changing language rewrites every label in place with no server roundtrip and no page reload.

Translations stay in Symfony YAML (the single source of truth); the bundle ships the full catalog of every enabled locale to the browser and a small headless runtime (window.GridviewI18n) swaps the text. Two domains are used: GridviewBundle for the built-in chrome and a configurable Gridview domain for your column labels.

Any existing language switcher can drive the grid — via a DOM event (gridview:set-locale), the window.GridviewI18n.setLocale() API, or by observing <html lang> — so you never need two switchers. A built-in switcher is available too (opt-in).

# config/packages/gridview.yaml
fedale_gridview:
    i18n:
        locales: [en, it]
        default: en
        client_domain: Gridview

See docs/index.md → Internationalization (i18n) for the full guide (external switchers, server-side persistence, tagging your own templates, dynamic JS strings).