making Company column searchable

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.html

@@ -21,6 +21,7 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
+  <script src="./ColumnSearch.js"></script>
   <script src="./batchCodeTable.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
   <script src="./HistogramChartView.js"></script>

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();
@@ -104,7 +106,7 @@ class BatchCodeTableInitializer {
             })
             .then(json => {
                 this.#setTableRows(json.data);
-                this.#makeCompanyColumnSearchable();
+                this.#columnSearch.columnContentUpdated();
                 this.#selectInput();
                 this.#displayControlColumn(country == 'Global');
             });
@@ -122,27 +124,6 @@ class BatchCodeTableInitializer {
             .draw();
     }
 
-    #makeCompanyColumnSearchable() {
-        // adapted from https://datatables.net/examples/api/multi_filter_select.html
-        const companyColumn = this.#batchCodeTable.column(this.#getColumnIndex('Company'));
-        const select = $('<select><option value=""></option></select>')
-            .appendTo($(companyColumn.header()))
-            .on('change', function () {
-                const val = $.fn.dataTable.util.escapeRegex($(this).val());
-                companyColumn
-                    .search(val ? '^' + val + '$' : '', true, false)
-                    .draw();
-            });
-
-        companyColumn
-            .data()
-            .unique()
-            .sort()
-            .each(function (d, _) {
-                select.append('<option value="' + d + '">' + d + '</option>');
-            });
-    }
-
     #selectInput() {
         const input = document.querySelector(".dataTables_filter input");
         input.focus();