Merge branch 'main' into pages

docs/ColumnSearch.js

@@ -0,0 +1,35 @@
+// adapted from https://datatables.net/examples/api/multi_filter_select.html
+class ColumnSearch {
+
+    #column;
+    #select;
+
+    constructor(column) {
+        this.#column = column;
+        const clazz = this;
+        $('<br/>').appendTo($(this.#column.header()));
+        this.#select = $('<select></select>')
+            .appendTo($(this.#column.header()))
+            .on(
+                'change',
+                function () {
+                    const val = $.fn.dataTable.util.escapeRegex($(this).val());
+                    clazz.#column
+                        .search(val ? '^' + val + '$' : '', true, false)
+                        .draw();
+                });
+    }
+
+    columnContentUpdated() {
+        this.#select.empty();
+        this.#select.append('<option value=""></option>');
+        const clazz = this;
+        this.#column
+            .data()
+            .unique()
+            .sort()
+            .each(function (d, _) {
+                clazz.#select.append('<option value="' + d + '">' + d + '</option>');
+            });
+    }
+}

docs/batchCodeTable.js

@@ -4,6 +4,7 @@ class BatchCodeTableInitializer {
     #countrySelect;
     #batchCodeTableElement;
     #batchCodeTable;
+    #columnSearch;
 
     constructor({ heading, countrySelect, batchCodeTableElement }) {
         this.#heading = heading;
@@ -13,6 +14,7 @@ class BatchCodeTableInitializer {
 
     initialize() {
         this.#batchCodeTable = this.#createEmptyBatchCodeTable();
+        this.#columnSearch = new ColumnSearch(this.#batchCodeTable.column(this.#getColumnIndex('Company')));
         this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value));
         this.#displayCountry('Global');
         this.#initializeHistogramView();
@@ -48,7 +50,6 @@ class BatchCodeTableInitializer {
                                 this.#getColumnIndex('Deaths'),
                                 this.#getColumnIndex('Disabilities'),
                                 this.#getColumnIndex('Life Threatening Illnesses'),
-                                this.#getColumnIndex('Company'),
                                 this.#getColumnIndex('Countries'),
                                 this.#getColumnIndex('Severe reports'),
                                 this.#getColumnIndex('Lethality')
@@ -56,7 +57,7 @@ class BatchCodeTableInitializer {
                         },
                         {
                             orderable: false,
-                            targets: this.#getColumnIndex('Countries')
+                            targets: [this.#getColumnIndex('Countries'), this.#getColumnIndex('Company')]
                         },
                         {
                             render: (data, type, row) => {
@@ -105,6 +106,7 @@ class BatchCodeTableInitializer {
             })
             .then(json => {
                 this.#setTableRows(json.data);
+                this.#columnSearch.columnContentUpdated();
                 this.#selectInput();
                 this.#displayControlColumn(country == 'Global');
             });