Added Resizable Columns

nilayb12 · Jan 3, 2024 · 1df0430 · 1df0430
1 parent acac1c2
commit 1df0430
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/index.php b/index.php
@@ -27,6 +27,7 @@
     <link href="https://cdn.datatables.net/searchpanes/2.2.0/css/searchPanes.bootstrap5.min.css" rel="stylesheet">
     <link href="https://cdn.datatables.net/select/1.7.0/css/select.bootstrap5.min.css" rel="stylesheet">
     <link href="https://cdn.datatables.net/staterestore/1.3.0/css/stateRestore.bootstrap5.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.css" rel="stylesheet">
     <link rel="icon" href="table1.png">
 </head>
 
@@ -58,8 +59,8 @@
         integrity="sha512-GWzVrcGlo0TxTRvz9ttioyYJ+Wwk9Ck0G81D+eO63BaqHaJ3YZX9wuqjwgfcV/MrB2PhaVX9DkYVhbFpStnqpQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/pdfmake.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.9/vfs_fonts.js"></script>
     <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
     <script src="https://cdn.datatables.net/autofill/2.6.0/js/dataTables.autoFill.min.js"></script>
@@ -86,6 +87,7 @@
     <script src="https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
     <script src="https://cdn.datatables.net/staterestore/1.3.0/js/dataTables.stateRestore.min.js"></script>
     <script src="https://cdn.datatables.net/staterestore/1.3.0/js/stateRestore.bootstrap5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/datatables.net-colresize-unofficial@latest/jquery.dataTables.colResize.js"></script>
 </body>
 
 </html>
diff --git a/style.css b/style.css
@@ -21,7 +21,6 @@ body {
   border-radius: 10px;
   border: 2px dashed #696969;
   color: green;
-  cursor: pointer;
   transition: background .2s ease-in-out, border .2s ease-in-out, color .2s ease-in-out;
 }
 

diff --git a/viewTable.js b/viewTable.js
@@ -125,7 +125,7 @@ function initDataTable() {
         buttons: [
             {
                 extend: 'colvis',
-                // collectionTitle: 'Column Visibility Panel'
+                collectionTitle: 'Column Visibility Panel'
             },
             {
                 extend: 'csv',
@@ -154,6 +154,35 @@ function initDataTable() {
                 });
             $('#tableData_filter input')
                 .after('<span class="fa-icon" /><i class="fa-solid fa-magnifying-glass" />');
+            // table.columns().every( function (colIdx) {
+            //     var columnData = this.columns(colIdx).data().join('');
+            //     if (columnData.length < 1) {
+            //         this.column(colIdx).visible(false);
+            //     }
+            // });
+        },
+        colResize: {
+            isEnabled: true,
+            saveState: false,
+            hoverClass: 'dt-colresizable-hover',
+            hasBoundCheck: true,
+            minBoundClass: 'dt-colresizable-bound-min',
+            maxBoundClass: 'dt-colresizable-bound-max',
+            isResizable: function (column) {
+                return true;
+            },
+            onResizeStart: function (column, columns) {
+            },
+            onResize: function (column) {
+            },
+            onResizeEnd: function (column, columns) {
+            },
+            getMinWidthOf: function ($thNode) {
+            },
+            stateSaveCallback: function (settings, data) {
+            },
+            stateLoadCallback: function (settings) {
+            }
         },
         columnDefs: [
             {