diff --git a/docs/advanced/integration-with-symfony-forms.md b/docs/advanced/integration-with-symfony-forms.md
index 94fdb6dc..2acf3bb2 100644
--- a/docs/advanced/integration-with-symfony-forms.md
+++ b/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 } }) }}
+
+
+```
+
+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) }}
-
-
+{{ 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 `` 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.
diff --git a/docs/reference/twig.md b/docs/reference/twig.md
index db3f20e3..2ecfc67b 100644
--- a/docs/reference/twig.md
+++ b/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 } }) }}
+
+```
+
### `data_table_table(data_table_view, variables)`
Renders the HTML of the data table.
diff --git a/src/Resources/views/themes/base.html.twig b/src/Resources/views/themes/base.html.twig
index df1ffc2f..fe56c829 100644
--- a/src/Resources/views/themes/base.html.twig
+++ b/src/Resources/views/themes/base.html.twig
@@ -11,6 +11,19 @@
{% endblock %}
+{% block kreyu_data_table_form_aware %}
+
+ {{ block('stylesheets') }}
+ {{ block('action_bar') }}
+
+ {{ form_start(form, form_variables) }}
+ {{ block('table') }}
+ {{ form_end(form, { render_rest: false }) }}
+
+ {{ block('pagination') }}
+
+{% endblock %}
+
{% block kreyu_data_table_table %}
{{ block('table') }}
{% endblock %}
diff --git a/src/Twig/DataTableExtension.php b/src/Twig/DataTableExtension.php
index 896e1cb3..cf723ddf 100644
--- a/src/Twig/DataTableExtension.php
+++ b/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
*/