Pole position on the grid

Loïc and Estelle will guide you through the Sylius Grid, the powerful, flexible way to display and filter data in any Symfony application. In a deep dive that leaves eCommerce behind, they will show how data providers let you pull records from a database or an external API without altering your presentation layer. You will explore the brand‑new #[AsGrid] and #[AsFilter] PHP attributes that slash boilerplate and improve developer experience, then see a DataTable Component built on Symfony UX LiveComponent deliver reactive grid updates with zero JavaScript. Whether you maintain a complex admin panel or craft custom back‑office tools, you will be ready to harness the full potential of the Sylius Grid.

Transcript

1. 🏎️ Pole position on the grid 🏁 Awesome new Sylius Grid features to put you in the driver’s seat
2. Estelle Gaits Web developer @Akawaka Sylius Key Contributor In June 2016, I was there :
3. Loïc Frémont Technical Expert @Akawaka Sylius Key Contributor Sylius Stack Main Maintainer
4. 1. Akawaka & Sylius ❤️ 2. What’s under the hood of the Sylius Stack? 3. What if… you were Toto Wolff? 🏎️ 4. New Live Component Grid 🧟 5. Quick practice before it’s your time to shine! 6. Conclusion
5. Akawaka & Sylius a true 💖 story
6. Akawaka & Sylius a true 💖 story Sylius Partner since 2022
7. Akawaka & Sylius a true 💖 story Sylius Partner since 2022 4 amazing Sylius Key Contributors : Loïc Frémont Valentin Silvestre Florian Merle Estelle Gaits
10. What’s under the hood of the Sylius Stack? Create a lean & mean back-office in no time with :
11. What’s under the hood of the Sylius Stack? Sylius Grid bundle Create a lean & mean back-office in no time with :
12. What’s under the hood of the Sylius Stack? Sylius Grid bundle Sylius Resource bundle Create a lean & mean back-office in no time with :
13. What’s under the hood of the Sylius Stack? Sylius Grid bundle Sylius Resource bundle Doctrine ORM & DBAL drivers Create a lean & mean back-office in no time with :
14. What’s under the hood of the Sylius Stack? Sylius Grid bundle Sylius Resource bundle Doctrine ORM & DBAL drivers Providers/processors system Create a lean & mean back-office in no time with :
15. What’s under the hood of the Sylius Stack? Sylius Grid bundle Sylius Resource bundle Doctrine ORM & DBAL drivers Providers/processors system Bootstrap Admin UI Create a lean & mean back-office in no time with :
16. What’s under the hood of the Sylius Stack? Sylius Grid bundle Sylius Resource bundle Doctrine ORM & DBAL drivers Providers/processors system Bootstrap Admin UI Symfony UX, AssetMapper and more ! Create a lean & mean back-office in no time with :
17. What if… you were Toto Wolff? 🏎️ the OpenF1 API the Sylius Stack boosted make:grid command new Sylius Grid Attributes #[AsGrid] #[AsFilter] Let’s create a Formula 1 admin panel using :
18. Starting slowly
19. Practice 1: let’s generate a simple grid view
20. What do we need to generate an index grid? routing & operations (Sylius Resource attributes) a data model (can be a Sylius Resource) a data provider (Doctrine, API repo, etc) a Sylius Grid definition (structure: fields, filters, sorting, pagination and actions)
21. 1- Create a Resource #[AsResource( templatesDir: '@SyliusAdminUi/crud', operations: [ new Index(grid: DriverGrid::class), ], )] final readonly class DriverResource implements ResourceInterface { public function __construct( public int $number, public string $firstName, public string $lastName, public string $countryCode, public string $teamName, public string|null $image = null, ) { } public function getId(): int { return $this->number; } }
22. 1- Create a Resource operations: [ new Index(grid: DriverGrid::class), ], #[AsResource( templatesDir: '@SyliusAdminUi/crud', )] final readonly class DriverResource implements ResourceInterface { public function __construct( public int $number, public string $firstName, public string $lastName, public string $countryCode, public string $teamName, public string|null $image = null, ) { } public function getId(): int { return $this->number; } }
23. 1- Create a Resource #[AsResource( templatesDir: '@SyliusAdminUi/crud', operations: [ new Index(grid: DriverGrid::class), ], )] final readonly class DriverResource implements ResourceInterface { public function __construct( public int $number, public string $firstName, public string $lastName, public string $countryCode, public string $teamName, public string|null $image = null, ) { } public function getId(): int { return $this->number; } }
24. 𝄜 Improved make:grid console command
25. 2- Create a Grid
26. 2- Create a Grid 💡 Now you can also create a grid based on a non-Doctrine entity, including… Sylius Resources !
27. 2- Create a Grid 💡 Now you can also create a grid based on a non-Doctrine entity, including… Sylius Resources ! symfony console make:grid 'App\Resource\DriverResource'
28. 2- Create a Grid 💡 Now you can also create a grid based on a non-Doctrine entity, including… Sylius Resources ! symfony console make:grid 'App\Resource\DriverResource'
29. 2- Create a Grid #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', )] final class DriverResourceGrid extends AbstractGrid { public function __construct() { // TODO inject services if required } public function __invoke(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addField(StringField::create('firstName')->setLabel('FirstName')->setSortable(true)) // ... all fields are added except "id" ->addActionGroup(MainActionGroup::create( CreateAction::create() )) ->addActionGroup(BulkActionGroup::create( DeleteAction::create() )) ->addActionGroup(ItemActionGroup::create( // ShowAction::create(), UpdateAction::create(), DeleteAction::create()) ) ;
30. 2- Create a Grid public function __invoke(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addField(StringField::create('firstName')->setLabel('FirstName')->setSortable(true)) // ... all fields are added except "id" ->addActionGroup(MainActionGroup::create( CreateAction::create() )) ->addActionGroup(BulkActionGroup::create( DeleteAction::create() )) ->addActionGroup(ItemActionGroup::create( // ShowAction::create(), UpdateAction::create(), DeleteAction::create()) ) ; #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', )] final class DriverResourceGrid extends AbstractGrid { public function __construct() { // TODO inject services if required }
31. 2- Create a Grid #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', )] final class DriverResourceGrid extends AbstractGrid { public function __construct() { // TODO inject services if required } public function __invoke(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addField(StringField::create('firstName')->setLabel('FirstName')->setSortable(true)) // ... all fields are added except "id" ->addActionGroup(MainActionGroup::create( CreateAction::create() )) ->addActionGroup(BulkActionGroup::create( DeleteAction::create() )) ->addActionGroup(ItemActionGroup::create( // ShowAction::create(), UpdateAction::create(), DeleteAction::create()) ) ;
33. 3- Add provider to grid #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', provider: DriverGridProvider::class, )]
34. 3- Add provider to grid provider: DriverGridProvider::class, #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', )]
35. 3- Add provider to grid #[AsGrid( resourceClass: DriverResource::class, name: 'app_driver_resource', provider: DriverGridProvider::class, )]
36. 4- Create a custom Grid Data Provider 👶 3 Baby steps
37. 4- Create a custom Grid Data Provider 👶 3 Baby steps 1. Without any data
38. 4- Create a custom Grid Data Provider 👶 3 Baby steps 1. Without any data 2. With hardcoded data
39. 4- Create a custom Grid Data Provider 👶 3 Baby steps 1. Without any data 2. With hardcoded data 3. With data from the F1 API
40. 1. Without any data namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; final readonly class DriverGridProvider implements DataProviderInterface { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); } }
41. 1. Without any data final readonly class DriverGridProvider implements DataProviderInterface namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); } }
42. 1. Without any data use Sylius\Component\Grid\Data\DataProviderInterface; final readonly class DriverGridProvider implements DataProviderInterface namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); } }
43. 1. Without any data public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; final readonly class DriverGridProvider implements DataProviderInterface { { // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); } }
44. 1. Without any data use Pagerfanta\PagerfantaInterface; public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; final readonly class DriverGridProvider implements DataProviderInterface { { // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); } }
45. 1. Without any data // start with an empty paginator return new Pagerfanta(new FixedAdapter(0, [])); namespace App\Grid; use Pagerfanta\Adapter\FixedAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; final readonly class DriverGridProvider implements DataProviderInterface { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { } }
47. 2. Use hardcoded data // ... final readonly class DriverGridProvider implements DataProviderInterface { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { // start with a fixed data paginator return new Pagerfanta(new FixedAdapter(4, $this->getDrivers())); } private function getDrivers(): iterable { yield new DriverResource(number: 1, firstName: 'Max', lastName: 'Verstappen', countryCode: 'NED', teamName: 'Red Bu yield new DriverResource(number: 2, firstName: 'Logan', lastName: 'Sargeant', countryCode: 'USA', teamName: 'Willia yield new DriverResource(number: 4, firstName: 'Lando', lastName: 'Norris', countryCode: 'GBR', teamName: 'McLaren' yield new DriverResource(number: 44, firstName: 'Lewis', lastName: 'Hamilton', countryCode: 'GBR', teamName: 'Merce } }
48. 2. Use hardcoded data // start with a fixed data paginator return new Pagerfanta(new FixedAdapter(4, $this->getDrivers())); // ... final readonly class DriverGridProvider implements DataProviderInterface { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { } private function getDrivers(): iterable { yield new DriverResource(number: 1, firstName: 'Max', lastName: 'Verstappen', countryCode: 'NED', teamName: 'Red Bu yield new DriverResource(number: 2, firstName: 'Logan', lastName: 'Sargeant', countryCode: 'USA', teamName: 'Willia yield new DriverResource(number: 4, firstName: 'Lando', lastName: 'Norris', countryCode: 'GBR', teamName: 'McLaren' yield new DriverResource(number: 44, firstName: 'Lewis', lastName: 'Hamilton', countryCode: 'GBR', teamName: 'Merce } }
49. 2. Use hardcoded data private function getDrivers(): iterable { yield new DriverResource(number: 1, firstName: 'Max', lastName: 'Verstappen', countryCode: 'NED', teamName: 'Red Bu yield new DriverResource(number: 2, firstName: 'Logan', lastName: 'Sargeant', countryCode: 'USA', teamName: 'Willia yield new DriverResource(number: 4, firstName: 'Lando', lastName: 'Norris', countryCode: 'GBR', teamName: 'McLaren' yield new DriverResource(number: 44, firstName: 'Lewis', lastName: 'Hamilton', countryCode: 'GBR', teamName: 'Merce } // ... final readonly class DriverGridProvider implements DataProviderInterface { public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { // start with a fixed data paginator return new Pagerfanta(new FixedAdapter(4, $this->getDrivers())); } }
51. 3. Now, let’s use real data from the API!
52. namespace App\Grid\Provider; use Pagerfanta\Adapter\ArrayAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; use Symfony\Contracts\HttpClient\HttpClientInterface; final readonly class DriverGridProvider implements DataProviderInterface { public function __construct( private HttpClientInterface $openF1Client, ) {} public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { return new Pagerfanta(new ArrayAdapter(iterator_to_array($this->getDrivers()))); } private function getDrivers(): iterable { // ... } }
53. use Symfony\Contracts\HttpClient\HttpClientInterface; private HttpClientInterface $openF1Client, namespace App\Grid\Provider; use Pagerfanta\Adapter\ArrayAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; final readonly class DriverGridProvider implements DataProviderInterface { public function __construct( ) {} public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { return new Pagerfanta(new ArrayAdapter(iterator_to_array($this->getDrivers()))); } private function getDrivers(): iterable { // ... } }
54. public function getData(Grid $grid, Parameters $parameters): PagerFantaInterface { return new Pagerfanta(new ArrayAdapter(iterator_to_array($this->getDrivers()))); } namespace App\Grid\Provider; use Pagerfanta\Adapter\ArrayAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; use Symfony\Contracts\HttpClient\HttpClientInterface; final readonly class DriverGridProvider implements DataProviderInterface { public function __construct( private HttpClientInterface $openF1Client, ) {} private function getDrivers(): iterable { // ... } }
55. private function getDrivers(): iterable { // ... } namespace App\Grid\Provider; use Pagerfanta\Adapter\ArrayAdapter; use Pagerfanta\Pagerfanta; use Pagerfanta\PagerfantaInterface; use Sylius\Component\Grid\Data\DataProviderInterface; use Sylius\Component\Grid\Definition\Grid; use Sylius\Component\Grid\Parameters; use Symfony\Contracts\HttpClient\HttpClientInterface; final readonly class DriverGridProvider implements DataProviderInterface { public function __construct( private HttpClientInterface $openF1Client ) {} // ... }
56. use Sylius\Component\Grid\Data\DataProviderInterface; use Symfony\Contracts\HttpClient\HttpClientInterface; final readonly class DriverGridProvider implements DataProviderInterface { // ... private function getDrivers(): iterable { $responseData = $this->openF1Client->request('GET', '/v1/drivers?session_key=9158')->toArray(); foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], firstName: $row['first_name'], lastName: $row['last_name'], countryCode: $row['country_code'], teamName: $row['team_name'], image: $row['headshot_url'], ); } } }
57. $responseData = $this->openF1Client->request('GET', '/v1/drivers?session_key=9158')->toArray(); foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], firstName: $row['first_name'], lastName: $row['last_name'], countryCode: $row['country_code'], teamName: $row['team_name'], image: $row['headshot_url'], ); } use Sylius\Component\Grid\Data\DataProviderInterface; use Symfony\Contracts\HttpClient\HttpClientInterface; final readonly class DriverGridProvider implements DataProviderInterface { // ... private function getDrivers(): iterable { } }
59. Practice 2: 𝄜 The brand new #[AsGrid] attribute
60. Resource class & provider arguments use App\Entity\Meeting; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( provider: MeetingGridProvider::class, resourceClass: Meeting::class, // any PHP object, including a Sylius resource )] final class MeetingGrid extends AbstractGrid { public function __invoke( GridBuilderInterface $gridBuilder, ): void // ... } }
61. Resource class & provider arguments provider: MeetingGridProvider::class, use App\Entity\Meeting; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( resourceClass: Meeting::class, // any PHP object, including a Sylius resource )] final class MeetingGrid extends AbstractGrid { public function __invoke( GridBuilderInterface $gridBuilder, ): void // ... } }
62. Resource class & provider arguments resourceClass: Meeting::class, // any PHP object, including a Sylius resource use App\Entity\Meeting; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( provider: MeetingGridProvider::class, )] final class MeetingGrid extends AbstractGrid { public function __invoke( GridBuilderInterface $gridBuilder, ): void // ... } }
63. Resource class & provider arguments public function __invoke( GridBuilderInterface $gridBuilder, ): void // ... } use App\Entity\Meeting; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( provider: MeetingGridProvider::class, resourceClass: Meeting::class, // any PHP object, including a Sylius resource )] final class MeetingGrid extends AbstractGrid { }
64. Resource class & provider arguments use App\Entity\Meeting; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( provider: MeetingGridProvider::class, resourceClass: Meeting::class, // any PHP object, including a Sylius resource )] final class MeetingGrid extends AbstractGrid { public function __invoke( GridBuilderInterface $gridBuilder, ): void // ... } }
65. build method and name arguments use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( buildMethod: 'customBuildMethod', name: 'meeting', // optional - FQCN by default // ... )] final class MeetingGrid extends AbstractGrid { public function customBuildMethod( GridBuilderInterface $gridBuilder, ): void // ... } }
66. build method and name arguments buildMethod: 'customBuildMethod', public function customBuildMethod( use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( name: 'meeting', // optional - FQCN by default // ... )] final class MeetingGrid extends AbstractGrid { GridBuilderInterface $gridBuilder, ): void // ... } }
67. build method and name arguments name: 'meeting', // optional - FQCN by default use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( buildMethod: 'customBuildMethod', // ... )] final class MeetingGrid extends AbstractGrid { public function customBuildMethod( GridBuilderInterface $gridBuilder, ): void // ... } }
68. build method and name arguments use Sylius\Bundle\GridBundle\Grid\AbstractGrid; #[AsGrid( buildMethod: 'customBuildMethod', name: 'meeting', // optional - FQCN by default // ... )] final class MeetingGrid extends AbstractGrid { public function customBuildMethod( GridBuilderInterface $gridBuilder, ): void // ... } }
69. [#AsGrid]
70. [#AsGrid] __invoke() instead of buildGrid() - but buildGrid still supported by default if no __invoke()
71. [#AsGrid] __invoke() instead of buildGrid() - but buildGrid still supported by default if no __invoke() buildMethod argument to declare custom build method
72. [#AsGrid] __invoke() instead of buildGrid() - but buildGrid still supported by default if no __invoke() buildMethod argument to declare custom build method provider argument instead of ->setProvider()
73. [#AsGrid] __invoke() instead of buildGrid() - but buildGrid still supported by default if no __invoke() buildMethod argument to declare custom build method provider argument instead of ->setProvider() resourceClass argument instead of getResourceClass()
74. [#AsGrid] __invoke() instead of buildGrid() - but buildGrid still supported by default if no __invoke() buildMethod argument to declare custom build method provider argument instead of ->setProvider() resourceClass argument instead of getResourceClass() name argument (FQCN by default) instead of getName()
76. Practice 3 : 🔎 Filter for specific drivers using the brand new #[AsFilter] attribute
77. Built-in filter types: String filter example
78. Built-in filter types: String String filter example
79. Built-in filter types: String Boolean String filter example
80. Built-in filter types: String Boolean Date String filter example
81. Built-in filter types: String Boolean Date Entity String filter example
82. Built-in filter types: String Boolean Date Entity Money String filter example
83. Built-in filter types: String Boolean Date Entity Money Exists String filter example
84. Built-in filter types: String Boolean Date Entity Money Exists Select String filter example
85. Built-in filter types: String Boolean Date Entity Money Exists Select Custom String filter example
86. #[AsFilter] Creating your own filter type namespace App\Grid\Filter; use Sylius\Component\Grid\Attribute\AsFilter; use Sylius\Component\Grid\Data\DataSourceInterface; use Sylius\Component\Grid\Filtering\FilterInterface; use Symfony\Component\Form\Extension\Core\Type\CountryType; #[AsFilter( formType: CountryType::class, // Symfony Form Type to use template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template )] final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } }
87. #[AsFilter] Creating your own filter type use Sylius\Component\Grid\Attribute\AsFilter; #[AsFilter( namespace App\Grid\Filter; use Sylius\Component\Grid\Data\DataSourceInterface; use Sylius\Component\Grid\Filtering\FilterInterface; use Symfony\Component\Form\Extension\Core\Type\CountryType; formType: CountryType::class, // Symfony Form Type to use template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template )] final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } }
88. #[AsFilter] Creating your own filter type use Symfony\Component\Form\Extension\Core\Type\CountryType; formType: CountryType::class, // Symfony Form Type to use namespace App\Grid\Filter; use Sylius\Component\Grid\Attribute\AsFilter; use Sylius\Component\Grid\Data\DataSourceInterface; use Sylius\Component\Grid\Filtering\FilterInterface; #[AsFilter( template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template )] final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } }
89. #[AsFilter] Creating your own filter type template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template namespace App\Grid\Filter; use Sylius\Component\Grid\Attribute\AsFilter; use Sylius\Component\Grid\Data\DataSourceInterface; use Sylius\Component\Grid\Filtering\FilterInterface; use Symfony\Component\Form\Extension\Core\Type\CountryType; #[AsFilter( formType: CountryType::class, // Symfony Form Type to use )] final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } }
90. #[AsFilter] Creating your own filter type use Sylius\Component\Grid\Filtering\FilterInterface; final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } } namespace App\Grid\Filter; use Sylius\Component\Grid\Attribute\AsFilter; use Sylius\Component\Grid\Data\DataSourceInterface; use Symfony\Component\Form\Extension\Core\Type\CountryType; #[AsFilter( formType: CountryType::class, // Symfony Form Type to use template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template )]
91. #[AsFilter] Creating your own filter type namespace App\Grid\Filter; use Sylius\Component\Grid\Attribute\AsFilter; use Sylius\Component\Grid\Data\DataSourceInterface; use Sylius\Component\Grid\Filtering\FilterInterface; use Symfony\Component\Form\Extension\Core\Type\CountryType; #[AsFilter( formType: CountryType::class, // Symfony Form Type to use template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', // The Twig template )] final class CountryFilter implements FilterInterface { public function apply(DataSourceInterface $dataSource, string $name, $data, array $options): void { // We handle the filtering part in the DriverGridProvider } }
92. Insert the filter into our Grid #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addFilter( Filter::create('country', CountryFilter::class) ->setFormOptions([ 'alpha3' => true, 'autocomplete' => true, ]) ->setLabel('app.ui.country') ) // ... ; } }
93. Insert the filter into our Grid ->addFilter( ) #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder Filter::create('country', CountryFilter::class) ->setFormOptions([ 'alpha3' => true, 'autocomplete' => true, ]) ->setLabel('app.ui.country') // ... ; } }
94. Insert the filter into our Grid Filter::create('country', CountryFilter::class) ->setFormOptions([ 'alpha3' => true, 'autocomplete' => true, ]) #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addFilter( ->setLabel('app.ui.country') ) // ... ; } }
95. Insert the filter into our Grid #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addFilter( Filter::create('country', CountryFilter::class) ->setFormOptions([ 'alpha3' => true, 'autocomplete' => true, ]) ->setLabel('app.ui.country') ) // ... ; } }
96. Actual filtering logic inside the provider final readonly class DriverApiGridProvider implements DataProviderInterface { // ... private function getDrivers(array $criteria): iterable { $query = ['session_key' => 9158]; if (!empty($criteria['country'] ?? null)) { $query['country_code'] = $criteria['country']; } $responseData = $this->openF1Client ->request(method: 'GET', url: '/v1/drivers', options: ['query' => $query]) ->toArray() ; foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], // ... ); } } }
97. Actual filtering logic inside the provider if (!empty($criteria['country'] ?? null)) { $query['country_code'] = $criteria['country']; } final readonly class DriverApiGridProvider implements DataProviderInterface { // ... private function getDrivers(array $criteria): iterable { $query = ['session_key' => 9158]; $responseData = $this->openF1Client ->request(method: 'GET', url: '/v1/drivers', options: ['query' => $query]) ->toArray() ; foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], // ... ); } } }
98. Actual filtering logic inside the provider ->request(method: 'GET', url: '/v1/drivers', options: ['query' => $query]) final readonly class DriverApiGridProvider implements DataProviderInterface { // ... private function getDrivers(array $criteria): iterable { $query = ['session_key' => 9158]; if (!empty($criteria['country'] ?? null)) { $query['country_code'] = $criteria['country']; } $responseData = $this->openF1Client ->toArray() ; foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], // ... ); } } }
99. Actual filtering logic inside the provider yield new DriverResource( number: $row['driver_number'], // ... ); final readonly class DriverApiGridProvider implements DataProviderInterface { // ... private function getDrivers(array $criteria): iterable { $query = ['session_key' => 9158]; if (!empty($criteria['country'] ?? null)) { $query['country_code'] = $criteria['country']; } $responseData = $this->openF1Client ->request(method: 'GET', url: '/v1/drivers', options: ['query' => $query]) ->toArray() ; foreach ($responseData as $row) { } } }
100. Actual filtering logic inside the provider final readonly class DriverApiGridProvider implements DataProviderInterface { // ... private function getDrivers(array $criteria): iterable { $query = ['session_key' => 9158]; if (!empty($criteria['country'] ?? null)) { $query['country_code'] = $criteria['country']; } $responseData = $this->openF1Client ->request(method: 'GET', url: '/v1/drivers', options: ['query' => $query]) ->toArray() ; foreach ($responseData as $row) { yield new DriverResource( number: $row['driver_number'], // ... ); } } }
103. [#AsFilter]
104. [#AsFilter] formType argument instead of getFormType()
105. [#AsFilter] formType argument instead of getFormType() template argument instead of defining in config/packages/sylius_grid.php
106. [#AsFilter] formType argument instead of getFormType() template argument instead of defining in config/packages/sylius_grid.php type argument for the name of your custom filter type (FQCN by default) default ones are string , boolean , money , date …
107. Connect Grids together Add a link to another grid with filtered data
109. namespace App\Grid; use Sylius\Bundle\GridBundle\Builder\Filter\StringFilter; use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; use Sylius\Component\Grid\Attribute\AsGrid; #[AsGrid] final class TeamRadioGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder // ... ->addFilter( StringFilter::create(name: 'driver_number', type: 'equal') ->setLabel('app.ui.driver_number') ) // ... ; } }
110. StringFilter::create(name: 'driver_number', type: 'equal') ->setLabel('app.ui.driver_number') namespace App\Grid; use Sylius\Bundle\GridBundle\Builder\Filter\StringFilter; use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; use Sylius\Component\Grid\Attribute\AsGrid; #[AsGrid] final class TeamRadioGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder // ... ->addFilter( ) // ... ; } }
111. namespace App\Grid; use Sylius\Bundle\GridBundle\Builder\Filter\StringFilter; use Sylius\Bundle\GridBundle\Builder\GridBuilderInterface; use Sylius\Bundle\GridBundle\Grid\AbstractGrid; use Sylius\Component\Grid\Attribute\AsGrid; #[AsGrid] final class TeamRadioGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder // ... ->addFilter( StringFilter::create(name: 'driver_number', type: 'equal') ->setLabel('app.ui.driver_number') ) // ... ; } }
112. use Sylius\Bundle\GridBundle\Builder\Action\Action; use Sylius\Bundle\GridBundle\Builder\ActionGroup\ItemActionGroup; #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addActionGroup( ItemActionGroup::create( Action::create('team_radios', 'show') ->setOptions([ 'link' => [ 'route' => 'app_admin_team_radio_index', 'parameters' => [ 'criteria' => [ 'driver_number' => [ 'value' => 'resource.number', // driverResource->number ], ], ], ], ]) ->setLabel('app.ui.show_team_radios') ->setIcon('tabler:radio'), )
113. use Sylius\Bundle\GridBundle\Builder\Action\Action; Action::create('team_radios', 'show') use Sylius\Bundle\GridBundle\Builder\ActionGroup\ItemActionGroup; #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addActionGroup( ItemActionGroup::create( ->setOptions([ 'link' => [ 'route' => 'app_admin_team_radio_index', 'parameters' => [ 'criteria' => [ 'driver_number' => [ 'value' => 'resource.number', // driverResource->number ], ], ], ], ]) ->setLabel('app.ui.show_team_radios') ->setIcon('tabler:radio'), )
114. ->setOptions([ 'link' => [ 'route' => 'app_admin_team_radio_index', 'parameters' => [ 'criteria' => [ 'driver_number' => [ 'value' => 'resource.number', // driverResource->number ], ], ], ], ]) use Sylius\Bundle\GridBundle\Builder\Action\Action; use Sylius\Bundle\GridBundle\Builder\ActionGroup\ItemActionGroup; #[AsGrid] final class DriverGrid extends AbstractGrid { public function buildGrid(GridBuilderInterface $gridBuilder): void { $gridBuilder ->addActionGroup( ItemActionGroup::create( Action::create('team_radios', 'show') ->setLabel('app.ui.show_team_radios') ->setIcon('tabler:radio'), )
118. Push, Push, Push!
119. 🧟 New Live Component Grid it’s alive…
121. Twig hooks overview index operation Index template Hook 'index' Sidebar Navbar Content Hook 'content' Flashes Header Grid
122. Twig hooks overview index operation Index template Hook 'index' Sidebar Navbar Content Hook 'content' Flashes Header Grid
123. Twig hooks overview index operation Index template Hook 'index' Sidebar Navbar Content Hook 'content' Flashes Header Grid
124. Twig hooks overview index operation
125. Twig hooks updated index operation
126. Overview of the new DataTableComponent Transform your grid into a Live Component #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] public string|null $grid = null; #[LiveProp(writable: true)] public int $page = 1; #[LiveProp(writable: true)] public array|null $criteria = null; #[LiveProp(writable: true)] public array|null $sorting = null; #[LiveProp(writable: true)] public int|null $limit = null; } sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': data_table: component: 'sylius:grid:data_table' props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
127. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': data_table: component: 'sylius:grid:data_table' props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
128. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': data_table: component: 'sylius:grid:data_table' props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
129. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } 'sylius_admin.grid.index.content.grid': sylius_twig_hooks: hooks: data_table: component: 'sylius:grid:data_table' props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
130. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } data_table: sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': component: 'sylius:grid:data_table' props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
131. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } component: 'sylius:grid:data_table' sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': data_table: props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit'
132. Overview of the new DataTableComponent Transform your grid into a Live Component public string|null $grid = null; public int $page = 1; public array|null $criteria = null; public array|null $sorting = null; public int|null $limit = null; #[AsLiveComponent(name: 'sylius:grid:data_table')] final class DataTableComponent { #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] #[LiveProp(writable: true)] } props: grid: '@=_context.grid' page: '@=_context.page' criteria: '@=_context.criteria' sorting: '@=_context.sorting' limit: '@=_context.limit' sylius_twig_hooks: hooks: 'sylius_admin.grid.index.content.grid': data_table: component: 'sylius:grid:data_table'
133. 0:00 / 0:09
134. Use it in any template Including your grid in a details page. <!-- templates/session/show/body.html.twig --> {{ component('sylius_grid_data_table', { grid: 'driver', criteria: { session: session.id, }, }) }}
135. Use it in any template Including your grid in a details page. grid: 'driver', <!-- templates/session/show/body.html.twig --> {{ component('sylius_grid_data_table', { criteria: { session: session.id, }, }) }}
136. Use it in any template Including your grid in a details page. criteria: { session: session.id, }, <!-- templates/session/show/body.html.twig --> {{ component('sylius_grid_data_table', { grid: 'driver', }) }}
137. 0:00 / 0:06
138. Can we go further?
139. 0:00 / 0:32
140. Live Component Filters final class SelectFilterComponent { #[LiveProp(writable: true)] public string|null $selectedValue = null; // selected value of the select input } final class StringFilterComponent { #[LiveProp(writable: true)] public string|null $value = null; // query string of the text input } final class DateFilterComponent { #[LiveProp(writable: true)] public string|null $fromDate = null; #[LiveProp(writable: true)] public string|null $fromTime = null; #[LiveProp(writable: true)] public string|null $toDate = null; #[LiveProp(writable: true)] public string|null $toTime = null;
141. Quick practice before it’s your time to shine! Q1: Find the odd one out.
142. Quick practice before it’s your time to shine! #[AsFilter] Q1: Find the odd one out.
143. Quick practice before it’s your time to shine! #[AsFilter] #[AsGrid] Q1: Find the odd one out.
144. Quick practice before it’s your time to shine! #[AsFilter] #[AsGrid] #[AsProvider] Q1: Find the odd one out.
145. Quick practice before it’s your time to shine! #[AsFilter] #[AsGrid] #[AsProvider] #[AsResource] Q1: Find the odd one out.
146. Quick practice before it’s your time to shine! #[AsFilter] #[AsGrid] #[AsProvider] #[AsResource] Q1: Find the odd one out.
147. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix?
148. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix? Ferrari
149. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix? Ferrari Mercedes
150. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix? Ferrari Mercedes Red Bull Racing
151. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix? Ferrari Mercedes Red Bull Racing Scuderia Toro Rosso
152. Q2: Which team did Max Verstappen race for when he won his first Formula One Grand Prix? Ferrari Mercedes Red Bull Racing Scuderia Toro Rosso
153. Q3: The OpenF1 API does not include a /teams endpoint, but you would like to create a grid listing all teams. You’ve created this simple model … : final readonly class Team { public function __construct( public string $id, public string $name, public string|null $color = null, ) { } }
154. Q3: What command could you run to generate the missing grid?
155. Q3: What command could you run to generate the missing grid? symfony console create:grid 'App\Model\Team'
156. Q3: What command could you run to generate the missing grid? symfony console create:grid 'App\Model\Team' symfony console make:resource 'App\Model\Team'
157. Q3: What command could you run to generate the missing grid? symfony console create:grid 'App\Model\Team' symfony console make:resource 'App\Model\Team' symfony console make:grid 'App\Model\Team'
158. Q3: What command could you run to generate the missing grid? symfony console create:grid 'App\Model\Team' symfony console make:resource 'App\Model\Team' symfony console make:grid 'App\Model\Team' symfony console make:grid 'App\Resource\TeamResource'
159. Q3: What command could you run to generate the missing grid? symfony console create:grid 'App\Model\Team' symfony console make:resource 'App\Model\Team' symfony console make:grid 'App\Model\Team' symfony console make:grid 'App\Resource\TeamResource'
160. symfony console make:grid 'App\Model\Team'
161. Q4: How can you create a Team filter to use it on the F1 drivers’ grid? We’ve added the following filter on the grid configuration: Now, what should our filter look like? ->addFilter(Filter::create('teamName', TeamFilter::class))
162. Q4: How can you create a Team filter to use it on the F1 drivers’ grid? We’ve added the following filter on the grid configuration: Now, what should our filter look like? #[AsFilter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig',)] final class TeamFilter implements FilterInterface ->addFilter(Filter::create('teamName', TeamFilter::class))
163. Q4: How can you create a Team filter to use it on the F1 drivers’ grid? We’ve added the following filter on the grid configuration: Now, what should our filter look like? #[AsFilter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig',)] final class TeamFilter implements FilterInterface #[AsGridFilter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', final class TeamFilter implements FilterInterface ->addFilter(Filter::create('teamName', TeamFilter::class))
164. Q4: How can you create a Team filter to use it on the F1 drivers’ grid? We’ve added the following filter on the grid configuration: Now, what should our filter look like? #[AsFilter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig',)] final class TeamFilter implements FilterInterface #[AsGridFilter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig', final class TeamFilter implements FilterInterface #[Filter(formType: TeamFilterType::class, template: '@SyliusBootstrapAdminUi/shared/grid/filter/select.html.twig',)] final class TeamFilter implements FilterInterface ->addFilter(Filter::create('teamName', TeamFilter::class))
165. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo?
166. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo? Alfredo Ferrari
167. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo? Alfredo Ferrari Tazio Nuvolari
168. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo? Alfredo Ferrari Tazio Nuvolari Enzo Ferrari
169. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo? Alfredo Ferrari Tazio Nuvolari Enzo Ferrari Francesco Baracca
170. Q5: During 1st World War, whose fighter plane used the horse 🐴 symbol that became Ferrari’s logo? Alfredo Ferrari Tazio Nuvolari Enzo Ferrari Francesco Baracca
171. Conclusion
172. Congratulations Pole position, baby!
173. Name Link Sylius Stack (docs) https://stack.sylius.com/ Sylius Stack (Github) https://github.com/Sylius/Stack Grid (Github) https://github.com/Sylius/SyliusGridBundle Open F1 API by br-g (Bruno Godefroy) https://openf1.org/ Demo project https://github.com/loic425/openf1