Revert "Feat: add dropdown menu and adjust column width (#25) (#26)"

This reverts commit c3d92b3.
VirtualPatientEngine · Mar 26, 2024 · 284fdcd · 284fdcd
1 parent 71ebd4d
commit 284fdcd
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/docs/custom.css b/docs/custom.css
@@ -21,10 +21,10 @@ table{
 }
 
 /* change the with of first column */
-thead tr th:first-child,
+/* thead tr th:first-child,
 tbody tr td:first-child {
   width: 400px;
   min-width: 300px;
   max-width: 400px;
   word-break: break-all;
-}
+} */
diff --git a/overrides/main.html b/overrides/main.html
@@ -39,7 +39,8 @@
   new DataTable('#table1', {
     order: [[5, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {
@@ -51,7 +52,8 @@
   new DataTable('#table2', {
     order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {
@@ -61,9 +63,41 @@
     }
   });
   new DataTable('#table3', {
+    initComplete: function () {
+        this.api()
+            .columns()
+            .every(function () {
+                let column = this;
+
+                // Create select element
+                let select = document.createElement('select');
+                select.add(new Option(''));
+                column.footer().replaceChildren(select);
+
+                // Apply listener for user change in value
+                select.addEventListener('change', function () {
+                    column
+                        .search(select.value, {exact: true})
+                        .draw();
+                });
+
+                // keep the width of the select element same as the column
+                select.style.width = '100%';
+
+                // Add list of options
+                column
+                    .data()
+                    .unique()
+                    .sort()
+                    .each(function (d, j) {
+                        select.add(new Option(d));
+                    });
+            });
+    },
     // order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '25%', targets: 1 }
       ],
     pageLength: 5,
     layout: {
@@ -73,9 +107,41 @@
     }
   });
   new DataTable('#table4', {
+    initComplete: function () {
+        this.api()
+            .columns()
+            .every(function () {
+                let column = this;
+
+                // Create select element
+                let select = document.createElement('select');
+                select.add(new Option(''));
+                column.footer().replaceChildren(select);
+
+                // Apply listener for user change in value
+                select.addEventListener('change', function () {
+                    column
+                        .search(select.value, {exact: true})
+                        .draw();
+                });
+
+                // keep the width of the select element same as the column
+                select.style.width = '100%';
+
+                // Add list of options
+                column
+                    .data()
+                    .unique()
+                    .sort()
+                    .each(function (d, j) {
+                        select.add(new Option(d));
+                    });
+            });
+    },
     // order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"}
+        {"className": "dt-center", "targets": "_all"},
+        { width: '30%', targets: 0 }
       ],
     pageLength: 5,
     layout: {

diff --git a/templates/overview.txt b/templates/overview.txt
@@ -71,7 +71,7 @@
   <tbody>
     {% for article in most_cited_articles %}
       <tr>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -97,7 +97,7 @@
   <tbody>
     {% for article in most_recent_articles %}
       <tr>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -125,14 +125,24 @@
     {% for article in manually_curated_articles %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
+        <td><a href="{{article.url}}">{{article.title}}</a></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
         <td>{{ article.citationCount}}</td>
       </tr>
     {% endfor %}
   </tbody>
+  <tfoot>
+    <tr>
+        <th>Topic</th>
+        <th>Title</th>
+        <th>Authors</th>
+        <th>Publication Date</th>
+        <th>Journal/Conference</th>
+        <th>Citation count</th>
+    </tr>
+  </tfoot>
   </table>
   </p>
 
@@ -149,10 +159,16 @@
     {% for article in additional_reading %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.link}}">{{article.name}}</a><br></td>
+        <td><a href="{{article.link}}">{{article.name}}</a></td>
       </tr>
     {% endfor %}
   </tbody>
+  <tfoot>
+    <tr>
+        <th>Topic</th>
+        <th>Title</th>
+    </tr>
+  </tfoot>
   </table>
   </p>