Asynchronicity

Symfony UX Turbo is a Symfony bundle integrating the Hotwire Turbo library in Symfony applications. It allows having the same user experience as with Single Page Apps but without having to write a single line of JavaScript!

This bundle provides integration that works out-of-the-box.

The magic part

Make sure your application uses the Symfony UX Turbo. You don't have to configure anything extra, your data tables automatically work asynchronously! The magic comes from the base template, which wraps the whole table in the <turbo-frame> tag:

{# @KreyuDataTable/themes/base.html.twig #}
{% block kreyu_data_table %}
    <turbo-frame id="kreyu_data_table_{{ name }}">
        {# ... #}
    </turbo-frame>
{% endblock %}

This ensures every data table is wrapped in its own frame, making them work asynchronously.

This integration also works on other built-in templates, because they all extend the base one. If you're making a data table theme from scratch, make sure the table is wrapped in the Turbo frame, as shown above.

For more information, see official documentation about the Turbo frames.

Prefetching

Since Turbo v8, hovering over the links for more than 100ms will prefetch their content. This is enabled by default, and this bundle is no exception. If you wish to disable prefetching for a specific link (e.g. pages with expensive rendering), you can set the data-turbo-prefetch attribute to false, for example:

$builder->addRowAction('show', ButtonActionType::class, [
    'attr' => [
        // note that this "false" should be string, not a boolean
        'data-turbo-prefetch' => 'false',
    ],
]);

Alternatively you can disable it application wide using a meta tag:

<meta name="turbo-prefetch" content="false">

For more information, see official documentation about the prefetching links on hover.