WIP: Add sorting to schema columns table

lsst · Sep 30, 2024 · bb81c85 · bb81c85
1 parent 0f39170
commit bb81c85
Showing 1 changed file with 29 additions and 17 deletions.
diff --git a/browser/_layouts/schema.html b/browser/_layouts/schema.html
@@ -2,6 +2,14 @@
 <html lang="{{ site.lang | default: "en-US" }}">
   <head>
     {% include _header.html %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
+    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
+    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
+    <script>
+    $(document).ready(function() {
+        $('#sortable-table').DataTable();
+    });
+    </script>
   </head>
   <body>
     {%- assign sorted_tables = site.data[page.schema].tables | sort: 'name' %}
@@ -34,29 +42,33 @@ <h1>{{ page.title }}</h1>
           <section id="{{ table['@id'] | remove:'#' }}">
             <h2>{{ table.name }}</h2>
             <p>{{ table.description }}</p>
-            <table class="schema-table">
-              <tr>
+            <table id="sortable-table" class="schema-table">
+              <thead>
+                <tr>
                 <th>Column Name [index]</th>
                 <th>Data Type</th>
                 <th>Unit</th>
                 <th>Description [UCD]</th>
-              </tr>
-              {% assign sorted_by_name = table.columns | sort: 'name' %}
-              {% assign sorted_columns = sorted_by_name | sort: 'tap:column_index' %}
-              {% for col in sorted_columns %}
-              <tr id="{{ col['@id'] | remove:'#' }}">
-                <td class="column-name">
-                    <a href="#{{ col['@id'] | remove:'#' }}">{{ col.name }}</a>
-                    {%- if col['tap:column_index'] %} [{{col['tap:column_index']}}]{% endif -%}
-                </td>
-                <td>{{ col.datatype }}</td>
-                <td>{{ col['ivoa:unit'] | default: col['fits:tunit'] }}</td>
-                <td>
+                </tr>
+              </thead>
+              <tbody>
+                {% assign sorted_by_name = table.columns | sort: 'name' %}
+                {% assign sorted_columns = sorted_by_name | sort: 'tap:column_index' %}
+                {% for col in sorted_columns %}
+                <tr id="{{ col['@id'] | remove:'#' }}">
+                  <td class="column-name">
+                      <a href="#{{ col['@id'] | remove:'#' }}">{{ col.name }}</a>
+                      {%- if col['tap:column_index'] %} [{{col['tap:column_index']}}]{% endif -%}
+                  </td>
+                  <td>{{ col.datatype }}</td>
+                  <td>{{ col['ivoa:unit'] | default: col['fits:tunit'] }}</td>
+                  <td>
                     {{- col.description | escape }}
                     {%- if col['ivoa:ucd'] %} [{{col['ivoa:ucd']}}]{% endif -%}
-                </td>
-              </tr>
-              {%- endfor %}
+                  </td>
+                </tr>
+                {%- endfor %}
+              </tbody>
             </table>
           </section>
           {%- endfor %}