[Feature] Twig helper function "data_table_form_aware"

docs/advanced/integration-with-symfony-forms.md

@@ -102,23 +102,32 @@ class ProductController extends AbstractController
 
 Now, let's handle the templating part:
 
+```twig
+{# templates/product/index.html.twig #}
+
+{{ data_table_form_aware(data_table, form, form_variables={ attr: { id: form.vars.id } }) }}
+
+<input type="submit" form="{{ form.vars.id }}" value="Submit"/>
+```
+
+Notice the use of [data_table_form_aware() function](../reference/twig.md#datatableformawaredatatableview-formview-datatablevariables-formvariables).
+This takes care of wrapping only the table part in the form. 
+Because we are rendering the submit button outside the form, the `form` attribute is used on the submit button, which links to the form by `id`.
+
+## Rendering without helper function
+
 If your data table is **NOT** using neither filtration, exporting nor personalization features, 
 you can use the [data_table() function](../reference/twig.md#data_tabledata_table_view-variables) as usual, wrapping it in the form:
-
 ```twig
 {# templates/product/index.html.twig #}
-{% extends 'base.html.twig' %}
-
-{% block content %}
-    {{ form_start(form) }}
-        {{ data_table(data_table) }}
-
-        <div class="mt-2">
-            <button class="btn btn-primary">Update</button>
-        </div>
-    {# Important: notice the "render_rest" option! #}
-    {{ form_end(form, { render_rest: false }) }}
-{% endblock %}
+
+{{ form_start(form) }}
+    {{ data_table(data_table) }}
+
+    <div class="mt-2">
+        <button class="btn btn-primary">Update</button>
+    </div>
+{{ form_end(form, { render_rest: false }) }} {# Important: notice the "render_rest" option! #}
 ```
 
 !!! Warning
@@ -132,22 +141,18 @@ renders out whole data table with corresponding feature form, and HTML forms can
 
 ```twig
 {# templates/product/index.html.twig #}
-{% extends 'base.html.twig' %}
 
-{% block content %}
-    {{ data_table_action_bar(data_table) }}
+{{ data_table_action_bar(data_table) }}
 
-    {{ form_start(form) }}
-        {{ data_table_table(data_table) }}
+{{ form_start(form) }}
+    {{ data_table_table(data_table) }}
 
-        <div class="mt-2">
-            <button class="btn btn-primary">Update</button>
-        </div>
-    {# Important: notice the "render_rest" option! #}
-    {{ form_end(form, { render_rest: false }) }}
+    <div class="mt-2">
+        <button class="btn btn-primary">Update</button>
+    </div>
+{{ form_end(form, { render_rest: false }) }} {# Important: notice the "render_rest" option! #}
 
-    {{ data_table_pagination(data_table) }}
-{% endblock %}
+{{ data_table_pagination(data_table) }}
 ```
 
 !!! Warning
@@ -156,6 +161,11 @@ renders out whole data table with corresponding feature form, and HTML forms can
     otherwise all the form fields will be rendered again below the table. This is because the Symfony Forms have no way 
     of knowing the data table has rendered its form fields, because the bundle manually creates each field `FormView` in the background.
 
+!!! Note
+
+    If your application uses [Symfony UX Turbo](https://symfony.com/bundles/ux-turbo/current/index.html#usage), remember to wrap
+    the whole data table in `<turbo-frame>` like in the base HTML template!
+
 ## Passing the form to the data table type class
 
 While the above example is simple, it's not really re-usable, due to the usage of data table builder in the controller. 

docs/reference/twig.md

@@ -18,6 +18,16 @@ You will mostly use this helper for prototyping or if you use custom theme.
 If you need more flexibility in rendering the data table, you should use the other helpers 
 to render individual parts of the data table instead.
 
+### `data_table_form_aware(data_table_view, form_view, data_table_variables, form_variables)`
+
+Renders the HTML of the data table with table part wrapped in the given form.
+
+```twig
+{# render the data table wrapped in form and display a submit button next to it #}
+{{ data_table_form_aware(data_table, form, form_variables={ attr: { id: form.vars.id } }) }}
+<input type="submit" form="{{ form.vars.id }}" value="Submit"/>
+```
+
 ### `data_table_table(data_table_view, variables)`
 
 Renders the HTML of the data table.

src/Resources/views/themes/base.html.twig

@@ -11,6 +11,19 @@
     </turbo-frame>
 {% endblock %}
 
+{% block kreyu_data_table_form_aware %}
+    <turbo-frame id="kreyu_data_table_{{ name }}">
+        {{ block('stylesheets') }}
+        {{ block('action_bar') }}
+
+        {{ form_start(form, form_variables) }}
+            {{ block('table') }}
+        {{ form_end(form, { render_rest: false }) }}
+
+        {{ block('pagination') }}
+    </turbo-frame>
+{% endblock %}
+
 {% block kreyu_data_table_table %}
     {{ block('table') }}
 {% endblock %}

src/Twig/DataTableExtension.php

@@ -28,6 +28,7 @@ public function getFunctions(): array
     {
         $definitions = [
             'data_table' => $this->renderDataTable(...),
+            'data_table_form_aware' => $this->renderDataTableFormAware(...),
             'data_table_table' => $this->renderDataTableTable(...),
             'data_table_action_bar' => $this->renderDataTableActionBar(...),
             'data_table_headers_row' => $this->renderHeadersRow(...),
@@ -65,6 +66,18 @@ public function renderDataTable(Environment $environment, DataTableView $view, a
         );
     }
 
+    /**
+     * @throws TwigException|\Throwable
+     */
+    public function renderDataTableFormAware(Environment $environment, DataTableView $view, FormView $formView, array $dataTableVariables = [], array $formVariables = []): string
+    {
+        return $this->renderBlock(
+            environment: $environment,
+            blockName: 'kreyu_data_table_form_aware',
+            context: array_merge($view->vars, $dataTableVariables, ['form' => $formView, 'form_variables' => $formVariables]),
+        );
+    }
+
     /**
      * @throws TwigException|\Throwable
      */