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

Feat: add dropdown menu and adjust column width
VirtualPatientEngine · Mar 26, 2024 · c3d92b3 · c3d92b3
1 parent ed371aa
commit c3d92b3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 92 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,8 +39,7 @@
   new DataTable('#table1', {
     order: [[5, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"},
-        { width: '30%', targets: 0 }
+        {"className": "dt-center", "targets": "_all"}
       ],
     pageLength: 5,
     layout: {
@@ -52,8 +51,7 @@
   new DataTable('#table2', {
     order: [[3, 'desc']],
     "columnDefs": [
-        {"className": "dt-center", "targets": "_all"},
-        { width: '30%', targets: 0 }
+        {"className": "dt-center", "targets": "_all"}
       ],
     pageLength: 5,
     layout: {
@@ -63,41 +61,9 @@
     }
   });
   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"},
-        { width: '25%', targets: 1 }
+        {"className": "dt-center", "targets": "_all"}
       ],
     pageLength: 5,
     layout: {
@@ -107,41 +73,9 @@
     }
   });
   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"},
-        { width: '30%', targets: 0 }
+        {"className": "dt-center", "targets": "_all"}
       ],
     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></td>
+        <td><a href="{{article.url}}">{{article.title}}</a><br></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></td>
+        <td><a href="{{article.url}}">{{article.title}}</a><br></td>
         <td>{{ article.authors}}</td>
         <td>{{ article.publicationDate}}</td>
         <td>{{ article.journal}}</td>
@@ -125,24 +125,14 @@
     {% for article in manually_curated_articles %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.url}}">{{article.title}}</a></td>
+        <td><a href="{{article.url}}">{{article.title}}</a><br></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>
 
@@ -159,16 +149,10 @@
     {% for article in additional_reading %}
       <tr>
         <td>{{ article.topic}}</td>
-        <td><a href="{{article.link}}">{{article.name}}</a></td>
+        <td><a href="{{article.link}}">{{article.name}}</a><br></td>
       </tr>
     {% endfor %}
   </tbody>
-  <tfoot>
-    <tr>
-        <th>Topic</th>
-        <th>Title</th>
-    </tr>
-  </tfoot>
   </table>
   </p>