From bb81c853d1d35fda413365be04ae5c84b3376a0f Mon Sep 17 00:00:00 2001
From: Jeremy McCormick <jeremym@slac.stanford.edu>
Date: Mon, 30 Sep 2024 14:44:08 -0500
Subject: [PATCH] WIP: Add sorting to schema columns table

---
 browser/_layouts/schema.html | 46 +++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 17 deletions(-)
diff --git a/browser/_layouts/schema.html b/browser/_layouts/schema.html
index 1f376415..dd0a5147 100644
--- 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 %}

Column Name [index]	Data Type	Unit	Description [UCD]
- {{ col.name }} - {%- if col['tap:column_index'] %} [{{col['tap:column_index']}}]{% endif -%} -	{{ col.datatype }}	{{ col['ivoa:unit'] \| default: col['fits:tunit'] }}	+
+ {{ col.name }} + {%- if col['tap:column_index'] %} [{{col['tap:column_index']}}]{% endif -%} +	{{ col.datatype }}	{{ col['ivoa:unit'] \| default: col['fits:tunit'] }}	{{- col.description \| escape }} {%- if col['ivoa:ucd'] %} [{{col['ivoa:ucd']}}]{% endif -%} -