Use responsive feature of DataTables

Author: coudot

composer.json

@@ -3,6 +3,7 @@
         "components/jquery": "v3.7.1",
         "datatables.net/datatables.net-bs5": "2.0.8",
         "datatables.net/datatables.net-buttons-bs5": "3.0.2",
+        "datatables.net/datatables.net-responsive-bs5": "3.0.2",
         "fortawesome/font-awesome": "v6.5.2",
         "ltb-project/ltb-common": "dev-main",
         "twbs/bootstrap": "v5.3.6"
@@ -28,8 +29,11 @@
             "cp vendor/datatables.net/datatables.net-buttons/js/buttons.colVis.min.js htdocs/vendor/datatables/",
             "cp vendor/datatables.net/datatables.net-buttons/js/buttons.html5.min.js htdocs/vendor/datatables/",
             "cp vendor/datatables.net/datatables.net-buttons/js/buttons.print.min.js htdocs/vendor/datatables/",
+            "cp vendor/datatables.net/datatables.net-responsive/js/dataTables.responsive.min.js htdocs/vendor/datatables/",
             "cp vendor/datatables.net/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css htdocs/vendor/datatables/",
             "cp vendor/datatables.net/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js htdocs/vendor/datatables/",
+            "cp vendor/datatables.net/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css htdocs/vendor/datatables/",
+            "cp vendor/datatables.net/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js htdocs/vendor/datatables/",
             "rm -rf vendor/datatables.net",
 
             "rm -rf htdocs/vendor/font-awesome/*",

templates/footer.tpl

@@ -10,10 +10,12 @@
 <script src="vendor/datatables/dataTables.min.js"></script>
 <script src="vendor/datatables/dataTables.bootstrap5.min.js"></script>
 <script src="vendor/datatables/dataTables.buttons.min.js"></script>
+<script src="vendor/datatables/dataTables.responsive.min.js"></script>
 <script src="vendor/datatables/buttons.colVis.min.js"></script>
 <script src="vendor/datatables/buttons.html5.min.js"></script>
 <script src="vendor/datatables/buttons.print.min.js"></script>
 <script src="vendor/datatables/buttons.bootstrap5.min.js"></script>
+<script src="vendor/datatables/responsive.bootstrap5.min.js"></script>
 {/if}
 <script>
 const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -56,6 +58,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra
       language: {
         url: "vendor/datatables/i18n/{/literal}{$lang|default:'en'}{literal}.json"
       },
+      responsive: true,
       initComplete: function () {
         $("#spinner").hide();
         $('table.dataTable').show();

templates/header.tpl

@@ -13,6 +13,7 @@
 {if $use_datatables}
     <link rel="stylesheet" type="text/css" href="vendor/datatables/dataTables.bootstrap5.min.css" />
     <link rel="stylesheet" type="text/css" href="vendor/datatables/buttons.bootstrap5.min.css" />
+    <link rel="stylesheet" type="text/css" href="vendor/datatables/responsive.bootstrap5.min.css" />
 {/if}
 {if $hover_effect}
     <link rel="stylesheet" type="text/css" href="vendor/hover/css/hover-min.css" />