[{"data":1,"prerenderedAt":42},["ShallowReactive",2],{"$f3bhqt2jh05fdt":3,"$f1nr35r71cla4i":30},{"content":4,"canonicalPath":5,"package":6,"version":29},"# Live Components\n\n::div{class=\"docs-note docs-note--new-feature\"}\nLive component support was introduced in PagerfantaBundle 4.8.\n::\nThe bundle integrates with [Symfony UX Live Components](https:\u002F\u002Fsymfony.com\u002Fbundles\u002Fux-live-component\u002Fcurrent\u002Findex.html), allowing a live component to change pages without reloading the whole page. The links of the pager keep their URLs, so they also work when the component is not connected, and the URL of the page is kept in sync with the current page.\n\nTo use this integration, install the `symfony\u002Fux-live-component` package (version 2.36 or later on the 2.x branch, or 3.1 or later) and the `pagerfanta\u002Ftwig` package.\n\nFor lists which do not need a component, such as a list without filters, [Turbo Frames](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Frendering-pagerfantas#turbo) can also change pages without reloading the whole page.\n\n## Creating The Component\n\nAdd the `BabDev\\PagerfantaBundle\\LiveComponent\\ComponentWithPagerfantaTrait` to your live component and implement the `createPager()` method, which returns a pager for the component. Both offset pagers (`Pagerfanta\\PagerfantaInterface`) and cursor pagers (`Pagerfanta\\CursorPagerInterface`) are supported, the trait sets the position of the pager from the state of the component.\n\n::div{class=\"docs-note\"}\nCursor pagers are moved to the current position with their \u003Ccode>withPosition()\u003C\u002Fcode> method, which is implemented by the cursor pagers provided by Pagerfanta and will be required by the \u003Ccode>Pagerfanta\\CursorPagerInterface\u003C\u002Fcode> in Pagerfanta 5.0. A \u003Ccode>Pagerfanta\\Exception\\LogicException\u003C\u002Fcode> is thrown when a custom cursor pager does not implement it.\n::\n```php\n\u003C?php\n\nnamespace App\\Twig\\Components;\n\nuse App\\Repository\\BlogPostRepository;\nuse BabDev\\PagerfantaBundle\\LiveComponent\\ComponentWithPagerfantaTrait;\nuse Pagerfanta\\Doctrine\\ORM\\QueryAdapter;\nuse Pagerfanta\\Pagerfanta;\nuse Pagerfanta\\PagerfantaInterface;\nuse Symfony\\UX\\LiveComponent\\Attribute\\AsLiveComponent;\nuse Symfony\\UX\\LiveComponent\\DefaultActionTrait;\n\n#[AsLiveComponent]\nfinal class BlogPostList\n{\n    use ComponentWithPagerfantaTrait;\n    use DefaultActionTrait;\n\n    public function __construct(\n        private readonly BlogPostRepository $blogPostRepository,\n    ) {}\n\n    protected function createPager(): PagerfantaInterface\n    {\n        return (new Pagerfanta(new QueryAdapter($this->blogPostRepository->createQueryBuilder('p'))))->setMaxPerPage(10);\n    }\n}\n```\n\nThe trait receives the services it needs with setter injection, so the component must be autowired, which is typically the default for services in Symfony applications.\n\nThe pager is available in the component's template as `this.pager`. Render it with the `pagerfanta()` Twig function, giving it the `this.pagerfantaOptions` options so the links point to the page the component is rendered on, and compose the `@BabDevPagerfanta\u002Flive_component.html.twig` template with the template for your pager's markup. This template adds the attributes which change the page with a live action to each link.\n\n```twig\n{# templates\u002Fcomponents\u002FBlogPostList.html.twig #}\n\u003Cdiv {{ attributes }}>\n    {% for post in this.pager %}\n        \u003Carticle>{{ post.title }}\u003C\u002Farticle>\n    {% endfor %}\n\n    {{ pagerfanta(this.pager, 'twig', this.pagerfantaOptions|merge({'template': ['@BabDevPagerfanta\u002Flive_component.html.twig', '@BabDevPagerfanta\u002Ftwitter_bootstrap5.html.twig']})) }}\n\u003C\u002Fdiv>\n```\n\nComposing the templates with a list requires Twig 3.29 or later. With older Twig versions, create a template which extends the template for your pager's markup and uses the live component template, and give its name as the `template` option instead.\n\n```twig\n{# templates\u002Fpagination\u002Flive_component.html.twig #}\n{%- extends '@BabDevPagerfanta\u002Ftwitter_bootstrap5.html.twig' -%}\n{%- use '@BabDevPagerfanta\u002Flive_component.html.twig' -%}\n```\n\n::div{class=\"docs-note\"}\nThe live component template works by overriding the \u003Ccode>link_attributes\u003C\u002Fcode> block of the Twig templates, see the \u003Ca href=\"\u002Fopen-source\u002Fpackages\u002Fpagerfanta\u002Fdocs\u002F4.x\u002Fviews#link-attributes\">Pagerfanta documentation\u003C\u002Fa> for more details.\n::\n## Component State\n\nThe trait adds the following properties to the component:\n\n- `page` - The current page of an offset pager, a writable live prop synchronized with the `page` query string parameter\n- `cursor` - The encoded cursor of the current page of a cursor pager, or null for the first page, a writable live prop synchronized with the `cursor` query string parameter\n- `paginationRoute` - The route the links of the pager point to\n- `paginationRouteParams` - The parameters for the route the links of the pager point to\n\nThe current page is changed with the `goToPage` and `goToCursor` live actions, which are used by the links of the pager, and the `resetPage()` method returns the component to the first page.\n\nThe position of the pager is resolved before the component is rendered. When the current page of an offset pager is out of range, such as after a filter reduces the number of results, the component moves to the last page instead of throwing an exception. When a cursor cannot be decoded, such as when it was tampered with, the component returns to the first page.\n\n## Filters\n\nWhen the component has filters, return to the first page when they change, and add them to the parameters of the links by overriding the `getPaginationRouteParams()` method so the links keep the filters when the component is not connected.\n\n```php\n\u003C?php\n\nnamespace App\\Twig\\Components;\n\nuse BabDev\\PagerfantaBundle\\LiveComponent\\ComponentWithPagerfantaTrait;\nuse Symfony\\UX\\LiveComponent\\Attribute\\AsLiveComponent;\nuse Symfony\\UX\\LiveComponent\\Attribute\\LiveProp;\nuse Symfony\\UX\\LiveComponent\\DefaultActionTrait;\n\n#[AsLiveComponent]\nfinal class BlogPostList\n{\n    use ComponentWithPagerfantaTrait;\n    use DefaultActionTrait;\n\n    #[LiveProp(writable: true, url: true, onUpdated: 'onQueryUpdated')]\n    public string $query = '';\n\n    public function onQueryUpdated(): void\n    {\n        $this->resetPage();\n    }\n\n    protected function getPaginationRouteParams(): array\n    {\n        return [...$this->paginationRouteParams, 'query' => $this->query];\n    }\n\n    \u002F\u002F ...\n}\n```\n\n## Link Routes\n\nLive components are rendered again with an internal route, so the route of the links is resolved when the component is first rendered, using the route and route parameters of the page. When the component is first rendered by another live component, the route of the page is not known, so set the `paginationRoute` property (and the `paginationRouteParams` property if the route has required parameters) when rendering the component.\n\n```twig\n\u003Ctwig:BlogPostList paginationRoute=\"app_blog_category\" :paginationRouteParams=\"{category: category.slug}\" \u002F>\n```\n\nThe links use the `page` and `cursor` parameters by default, which match the query string parameters of the component's state. If you change these parameters with the `pageParameter` or `cursorParameter` options, also change the query string parameter of the live prop by redeclaring the property in your component.\n\n```php\nuse Symfony\\UX\\LiveComponent\\Attribute\\LiveProp;\nuse Symfony\\UX\\LiveComponent\\Metadata\\UrlMapping;\n\n#[LiveProp(writable: true, url: new UrlMapping(as: 'p'))]\npublic int $page = 1;\n```\n\n```twig\n{{ pagerfanta(this.pager, 'twig', this.pagerfantaOptions|merge({'pageParameter': '[p]', 'template': ['@BabDevPagerfanta\u002Flive_component.html.twig', '@BabDevPagerfanta\u002Ftwitter_bootstrap5.html.twig']})) }}\n```\n","\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Flive-components",{"name":7,"slug":8,"previousSlugs":9,"description":11,"github":12,"packagistName":14,"packageType":15,"hasDocumentation":16,"supported":16,"visible":16,"versions":17},"PagerfantaBundle","pagerfantabundle",[10],"babdevpagerfantabundle","Integrates Pagerfanta into Symfony applications",{"owner":13,"repo":7},"BabDev","babdev\u002Fpagerfanta-bundle","symfony-bundle",true,[18,21,23,26],{"version":19,"released":20},"5.x",false,{"version":22,"released":16},"4.x",{"version":24,"released":16,"endOfSupport":25},"3.x","2025-11-30T23:59:59.999Z",{"version":27,"released":16,"endOfSupport":28},"2.x","2021-12-31T23:59:59.999Z",{"version":22,"released":16},{"content":31,"canonicalPath":32,"package":33,"version":41},"- [Introduction](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fintro)\n- [Installation & Setup](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Finstallation)\n- [Default Configuration](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fdefault-configuration)\n- [Rendering Pagerfantas](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Frendering-pagerfantas)\n- [Generating Paginated Routes](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fgenerating-paginated-routes)\n- [Cursor Pagination](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fcursor-pagination)\n- [Live Components](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Flive-components)\n- [Available Views](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fviews)\n- [Adding Views](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fadding-views)\n- [Retrieving Views](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fretrieving-views)\n- [Reusable Pagerfanta Configurations](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Freusing-options)\n- [Serializer](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fserializer)\n- [Configuring The Bundle](\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Fconfiguring-the-bundle)\n","\u002Fopen-source\u002Fpackages\u002Fpagerfantabundle\u002Fdocs\u002F4.x\u002Findex",{"name":7,"slug":8,"previousSlugs":34,"description":11,"github":35,"packagistName":14,"packageType":15,"hasDocumentation":16,"supported":16,"visible":16,"versions":36},[10],{"owner":13,"repo":7},[37,38,39,40],{"version":19,"released":20},{"version":22,"released":16},{"version":24,"released":16,"endOfSupport":25},{"version":27,"released":16,"endOfSupport":28},{"version":22,"released":16},1793365933706]