Display 0 results, closes #637

datasette/static/app.css

@@ -327,3 +327,10 @@ a.not-underlined {
 pre.wrapped-sql {
     white-space: pre-wrap;
 }
+
+p.zero-results {
+    border: 2px solid #ccc;
+    background-color: #eee;
+    padding: 0.5em;
+    font-style: italic;
+}

datasette/templates/_table.html

@@ -1,28 +1,32 @@
-<table class="rows-and-columns">
-    <thead>
-        <tr>
-            {% for column in display_columns %}
-                <th class="col-{{ column.name|to_css_class }}" scope="col">
-                    {% if not column.sortable %}
-                        {{ column.name }}
-                    {% else %}
-                        {% if column.name == sort %}
-                            <a href="{{ path_with_replaced_args(request, {'_sort_desc': column.name, '_sort': None, '_next': None}) }}" rel="nofollow">{{ column.name }}&nbsp;▼</a>
+{% if display_rows %}
+    <table class="rows-and-columns">
+        <thead>
+            <tr>
+                {% for column in display_columns %}
+                    <th class="col-{{ column.name|to_css_class }}" scope="col">
+                        {% if not column.sortable %}
+                            {{ column.name }}
                         {% else %}
-                            <a href="{{ path_with_replaced_args(request, {'_sort': column.name, '_sort_desc': None, '_next': None}) }}" rel="nofollow">{{ column.name }}{% if column.name == sort_desc %}&nbsp;▲{% endif %}</a>
+                            {% if column.name == sort %}
+                                <a href="{{ path_with_replaced_args(request, {'_sort_desc': column.name, '_sort': None, '_next': None}) }}" rel="nofollow">{{ column.name }}&nbsp;▼</a>
+                            {% else %}
+                                <a href="{{ path_with_replaced_args(request, {'_sort': column.name, '_sort_desc': None, '_next': None}) }}" rel="nofollow">{{ column.name }}{% if column.name == sort_desc %}&nbsp;▲{% endif %}</a>
+                            {% endif %}
                         {% endif %}
-                    {% endif %}
-                </th>
-            {% endfor %}
-        </tr>
-    </thead>
-    <tbody>
-    {% for row in display_rows %}
-        <tr>
-            {% for cell in row %}
-                <td class="col-{{ cell.column|to_css_class }}">{{ cell.value }}</td>
-            {% endfor %}
-        </tr>
-    {% endfor %}
-    </tbody>
-</table>
+                    </th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+        {% for row in display_rows %}
+            <tr>
+                {% for cell in row %}
+                    <td class="col-{{ cell.column|to_css_class }}">{{ cell.value }}</td>
+                {% endfor %}
+            </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+{% else %}
+    <p class="zero-results">0 records</p>
+{% endif %}

datasette/templates/query.html

@@ -73,6 +73,8 @@
     {% endfor %}
     </tbody>
 </table>
+{% else %}
+    <p class="zero-results">0 results</p>
 {% endif %}
 
 {% include "_codemirror_foot.html" %}

tests/test_html.py

@@ -1059,3 +1059,17 @@ def test_custom_table_include():
             '1 - 2 - <a href="/fixtures/simple_primary_key/1">hello</a> <em>1</em>'
             "</div>"
         ) == str(Soup(response.text, "html.parser").select_one("div.custom-table-row"))
+
+
+@pytest.mark.parametrize(
+    "path",
+    [
+        "/fixtures?sql=select+*+from+[123_starts_with_digits]",
+        "/fixtures/123_starts_with_digits",
+    ],
+)
+def test_zero_results(app_client, path):
+    response = app_client.get(path)
+    soup = Soup(response.text, "html.parser")
+    assert 0 == len(soup.select("table"))
+    assert 1 == len(soup.select("p.zero-results"))