From 9d5ad5b4ff4a5eb9fdecf7e6778e4c03a47f58c6 Mon Sep 17 00:00:00 2001
From: Dmytro Trotsko <dmytrotsko@gmail.com>
Date: Tue, 24 Dec 2024 01:46:56 +0200
Subject: [PATCH] Changed table view. Added column hide option

---
 src/assets/css/style.css                   |  9 +++++++++
 src/templates/signal_sets/signal_sets.html | 20 +++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 45b07af..0e905aa 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1386,3 +1386,12 @@ h6 {
 .form-check > label.form-check-label {
     display: block!important; /* Ensure the label takes up the full width */
 }
+
+.min-w-300 {
+    content: '';
+    min-width: 300px;
+}
+
+div.dt-button-collection {
+    width: 265px!important;
+}
\ No newline at end of file
diff --git a/src/templates/signal_sets/signal_sets.html b/src/templates/signal_sets/signal_sets.html
index 23a7e60..68aa4d8 100644
--- a/src/templates/signal_sets/signal_sets.html
+++ b/src/templates/signal_sets/signal_sets.html
@@ -240,8 +240,8 @@ <h2 class="accordion-header" id="flush-heading_{{ form.data_source.auto_id }}">
             </div>
     </div>
     <div class="col-10">
-        <div class="row">
-            <table id="signalSetsTable" class="display" width="100%">
+        <div class="row table-responsive">
+            <table id="signalSetsTable" class="display cell-border" width="100%">
                 <thead>
                     <tr>
                         <th></th>
@@ -260,9 +260,9 @@ <h2 class="accordion-header" id="flush-heading_{{ form.data_source.auto_id }}">
                         <th>Demographic Granularity</th>                              
                         <th>Severity Pyramid Rung(s)</th>
                         <th>Data Source</th>
-                        <th>Pre-processing</th>
+                        <th class="min-w-300">Pre-processing</th>
                         <th>Censoring</th>
-                        <th>Missingness</th>
+                        <th class="min-w-300">Missingness</th>
                         <th>DUA required</th>
                         <th>License</th>
                         <th>Documentation</th>
@@ -537,12 +537,22 @@ <h2 class="accordion-header" id="flush-heading_{{ form.data_source.auto_id }}">
         paging: false,
         scrollCollapse: true,
         scrollX: true,
-        scrollY: 600,
+        scrollY: 550,
         fixedColumns: {
             left: 2
         },
         ordering: false,
         mark: true,
+        layout: {
+            topStart: {
+                buttons: [
+                    {
+                        extend: 'colvis',
+                        columns: 'th:nth-child(n+3)'
+                    }
+                ]
+            }
+        },
         language: {
             "info":           "Showing _TOTAL_ / _MAX_ Signal Sets",
             "infoEmpty":      "",