Use a better style for the part table.

assets/css/app.css

@@ -642,3 +642,12 @@ label:not(.form-check-label) {
 .tooltip {
     pointer-events: none;
 }
+
+/* Style datatables */
+.card-footer-table {
+    padding-top: 0;
+}
+
+table.dataTable {
+    margin-top: 0 !important;
+}

assets/ts_src/ajax_ui.ts

@@ -392,7 +392,13 @@ class AjaxUI {
                 });
 
             //Register links.
-            promise.then(ajaxUI.registerLinks);
+            promise.then(function() {
+                ajaxUI.registerLinks();
+
+                //Set the correct title in the table.
+                let title = $('#part-card-header-src');
+                $('#part-card-header').html(title.html());
+            });
         });
 
         console.debug('Datatables inited.');

config/packages/datatables.yaml

@@ -8,6 +8,13 @@ datatables:
         lengthMenu : [10, 25, 50, 100, 250, 500, 1000, 2500]
         pageLength: 50
         #dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
+        dom: "  <'row'<'col mb-2' l> <'col mb-2'<'pull-right' p>>>
+                        <'card border-primary'
+                            <'#part-card-header.card-header bg-primary text-white'>
+                            rt
+                            <'card-footer card-footer-table text-muted' i >
+                        >
+                        <'row'<'col mt-2' l> <'col mt-2'<'pull-right' p>>>"
         pagingType: 'simple_numbers'
         searching: true
 

templates/parts_list.html.twig

@@ -2,16 +2,28 @@
 
 {% block content %}
 
+    {#
     <div class="card border-primary">
         <div class="card-header bg-primary text-white">
             <h6>Bauteile</h6>
         </div>
+
+        </div>
+    </div>
+    #}
+
+    {# Set the title for the table here. It will be inserted into the table later.#}
+    <div style="display:none;" id="part-card-header-src">Test</div>
+
     <div id="part_list" class="table-responsive" data-datatable data-settings='{{ datatable_settings(datatable) }}'>
+        <div class="card-body">
+            <div class="card">
                 <div class="card-body">
                     <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
                     <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
                 </div>
             </div>
         </div>
+    </div>
 
 {% endblock %}