Add col-X classes to HTML table on custom query page

simonw · Apr 19, 2018 · e2750c7 · e2750c7
1 parent 1e4c295
commit e2750c7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/datasette/app.py b/datasette/app.py
@@ -79,6 +79,7 @@ def render(self, templates, **context):
                 **context, **{
                     'app_css_hash': self.ds.app_css_hash(),
                     'select_templates': select_templates,
+                    'zip': zip,
                 }
             })
         )

diff --git a/datasette/templates/query.html b/datasette/templates/query.html
@@ -44,14 +44,14 @@ <h3>Query parameters</h3>
 <table>
     <thead>
         <tr>
-            {% for column in columns %}<th scope="col">{{ column }}</th>{% endfor %}
+            {% for column in columns %}<th class="col-{{ column|to_css_class }}" scope="col">{{ column }}</th>{% endfor %}
         </tr>
     </thead>
     <tbody>
     {% for row in rows %}
         <tr>
-            {% for td in row %}
-                <td>{% if td == None %}{{ "&nbsp;"|safe }}{% else %}{{ td }}{% endif %}</td>
+            {% for column, td in zip(columns, row) %}
+                <td class="col-{{ column|to_css_class }}">{% if td == None %}{{ "&nbsp;"|safe }}{% else %}{{ td }}{% endif %}</td>
             {% endfor %}
         </tr>
     {% endfor %}