add button to clear column filter

src/skrubview/_data/templates/column-filters.html

@@ -1,12 +1,17 @@
 <script type="text/javascript">
-var columnFiltersForReport{{ report_id }} = JSON.parse('{{ column_filters | tojson | safe }}');
+ var columnFiltersForReport{{ report_id }} = JSON.parse('{{ column_filters | tojson | safe }}');
 </script>
+
 {% set col_filter_id = "{}_col_filter".format(report_id) %}
+
 <div class="skrubview-wrapper">
     <label for="{{ col_filter_id }}">Show: </label>
-    <select id="{{ col_filter_id }}" onchange='onFilterChange("{{ col_filter_id }}")' data-report-id="{{ report_id }}" autocomplete="off">
+    <select id="{{ col_filter_id }}" class="skrubview-col-filter-select"
+        onchange='onFilterChange("{{ col_filter_id }}")'
+        data-report-id="{{ report_id }}" autocomplete="off">
         {% for filter_name in column_filters %}
-        <option value="{{ filter_name }}" {{ "selected" if filter_name == "all()" }}>{{ column_filters[filter_name]["display_name"] }}</option>
+        <option value="{{ filter_name }}" {{ "selected" if filter_name == "all()" }}>
+            {{ column_filters[filter_name]["display_name"] }}</option>
         {% endfor %}
     </select>
 </div>

src/skrubview/_data/templates/no-filter-matches.html

@@ -1 +1,6 @@
-No columns match the selected filter: <strong class="skrubview-selected-filter-display"></strong>. Change the column filter in the dropdown menu above to display some columns.
+<p>
+No columns match the selected filter: <strong class="skrubview-selected-filter-display"></strong>. You can change the column filter in the dropdown menu above.
+</p>
+<p>
+    <button onclick="clearColFilter(event)">Show all columns</button>.
+</p>

src/skrubview/_data/templates/skrubview.js

@@ -233,7 +233,7 @@ function onFilterChange(colFilterId) {
         } else {
             elem.dataset.isExcludedByFilter = "";
         }
-    })
+    });
     document.getElementById(`${reportId}_display_n_columns`).textContent = acceptedCols
         .length.toString();
     const tableElem = reportElem.querySelector(".skrubview-dataframe-sample-table");
@@ -250,3 +250,10 @@ function onFilterChange(colFilterId) {
         filterDisplay.textContent = '"' + colFilters[filterName]["display_name"] + '"';
     }
 }
+
+function clearColFilter(event){
+    const reportElem = event.target.closest(".skrubview-report");
+    const selectElem = reportElem.querySelector(".skrubview-col-filter-select");
+    selectElem.value = "all()";
+    onFilterChange(selectElem.id);
+}