Merge pull request #130 from opensafely-core/fast-csv

Faster csv rendering

airlock/templates/file_browser/csv.html

@@ -1,25 +1,22 @@
 {% load airlocktags %}
 {% as_csv_data contents as csv_data %}
 <div class="inline-block min-w-full align-middle max-w-full">
-    {% #table %}
-      {% #table_head class="bg-slate-200" id="csvTable" %}
-        {% #table_row %}
-          {% for header in csv_data.headers %}
-            {% #table_header %}{{ header }}{% /table_header %}
-          {% endfor %}
-        {% /table_row %}
-      {% /table_head %}
-
-      {% #table_body %}
-        {% for row in csv_data.rows %}
-            {% #table_row class="even:bg-slate-50" %}
-            {% for cell in row %}
-                {% #table_cell %}
-                    {{ cell }}
-                {% /table_cell %}
-            {% endfor %}
-            {% /table_row %}
+  <table class="datatable">
+    <thead class="bg-slate-200" id="csvTable">
+      <tr>
+        {% for header in csv_data.headers %}
+        <th>{{ header }}</th>
         {% endfor %}
-      {% /table_body %}
-    {% /table %}
-  </div>
+      </tr>
+    </thead>
+    <tbody>
+      {% for row in csv_data.rows %}
+      <tr class="even:bg-slate-50">
+        {% for cell in row %}
+        <td>{{ cell }}</td>
+        {% endfor %}
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

airlock/templates/file_browser/index.html

@@ -58,6 +58,12 @@
     overflow: scroll;
 }
 
+.datatable thead {
+  position: sticky;
+  top: 0;
+}
+
+
 </style>
 {% endblock extra_styles %}