Cleaned up code, added ability to use properties with column data. Added loading state and refresh button. Improved sorting and searching.

data-table.js

@@ -1,4 +1,4 @@
-import { IgniteHtml, IgniteObject, IgniteProperty } from "../ignite-html/ignite-html.js";
+import { IgniteHtml, IgniteObject, IgniteProperty, IgniteRendering } from "../ignite-html/ignite-html.js";
 import { IgniteElement } from "../ignite-html/ignite-element.js";
 import { IgniteTemplate, div, table, thead, tbody, tr, th, td, list, pagination, pager, population, nav, ul, li, button, span, input, select, option, i } from "../ignite-html/ignite-template.js";
 
@@ -19,7 +19,7 @@ class DataColumn extends IgniteObject {
     selector = null;
 
     /**
-     * A converter to convert the value of this column to a custom component if needed.
+     * A function to convert the value of the column to a component.
      * @type {IgniteProperty|Function}
      */
     converter = null;
@@ -61,7 +61,7 @@ class DataColumn extends IgniteObject {
      * @param {Boolean|Function} options.searchable Whether or not this column can be searched. Default is false.
      * @param {String|Function} options.sortable Whether or not this column can be sorted. Default is false.
      * @param {String} options.sort The current sorting of this column. Possible values: asc, desc. Default is null.
-     * @param {IgniteProperty|Function} options.selector A function to extract the column value from a given data. Default is null.
+     * @param {IgniteProperty|Function} options.selector A function to extract the column value from given data. Default is null.
      * @param {IgniteProperty|Function} options.converter A function to convert the column value to a custom component. Default is null.
      * @param {IgniteProperty|Function} options.comparer A function to compare two columns for sorting. Default is null.
      * @param {IgniteProperty|Function} options.searcher A function to seatch a column. Default is null.
@@ -93,6 +93,12 @@ class DataColumn extends IgniteObject {
  * The outline of a row apart of the DataTable.
  */
 class DataRow {
+    /**
+     * The data table this row belongs to.
+     * @type {DataTable}
+     */
+    table;
+
     /**
      * The raw values of this row.
      * @type {Array<Any>}
@@ -107,34 +113,46 @@ class DataRow {
 
     /**
      * Creates a new DataRow from data a set of columns.
+     * @param {DataTable} table
      * @param {Any} data 
      * @param {Array<DataColumn} columns 
      */
-    constructor(data, columns) {
+    constructor(table, data, columns) {
+        this.table = table;
+
         this.values = [];
 
         this.columns = [];
 
-        columns.forEach(column => {
+        for (let i = 0; i < columns.length; i++) {
+            var column = columns[i];
+
             var value = data;
 
-            if (column.selector && column.selector instanceof IgniteProperty) {
+            //We want to enter a rendering context for the selector so we have a chance to see if we are returned a property.
+            IgniteRendering.enter();
+            if (column.selector && column.selector instanceof IgniteProperty && column.selector.value instanceof Function) {
                 value = column.selector.value(data);
             } else if (column.selector && column.selector instanceof Function) {
                 value = column.selector(data);
             }
+            IgniteRendering.leave();
 
-            var converted = value;
+            //Store this value for this column
+            this.values.push(value);
 
-            if (column.converter && column.converter instanceof IgniteProperty) {
+            //If the value is a property, listen for changes and request reflitering of the table.
-                converted = column.converter.value(value);
+            if (value instanceof IgniteProperty) {
-            } else if (column.converter && column.converter instanceof Function) {
+                value.attachOnChange(() => this.table.requestFilter());
-                converted = column.converter(value);
             }
 
-            this.values.push(value);
+            //Invoke the column converter if there is one.
-            this.columns.push(converted);
+            if (column.converter instanceof Function) {
-        });
+                this.columns.push(column.converter(value));
+            } else {
+                this.columns.push(value);
+            }
+        }
     }
 }
 
@@ -177,12 +195,12 @@ class DataTable extends IgniteElement {
         return {
             columns: [],
             data: new IgniteProperty([], {
-                onChange: (oldValue, newValue) => this.rows = (newValue ? newValue.map(row => new DataRow(row, this.columns)) : []),
+                onChange: (oldValue, newValue) => this.rows = (newValue ? newValue.map(row => new DataRow(this, row, this.columns)) : []),
                 onPop: () => this.rows.pop(),
-                onPush: (array, data) => this.rows.push(...data.map(row => new DataRow(row, this.columns))),
+                onPush: (array, data) => this.rows.push(...data.map(row => new DataRow(this, row, this.columns))),
                 onShift: () => this.rows.shift(),
-                onSplice: (array, start, deleteCount, data) => this.rows.splice(start, deleteCount, ...data.map(row => new DataRow(row, this.columns))),
+                onSplice: (array, start, deleteCount, data) => this.rows.splice(start, deleteCount, ...data.map(row => new DataRow(this, row, this.columns))),
-                onUnshift: (array, data) => this.rows.unshift(...data.map(row => new DataRow(row, this.columns)))
+                onUnshift: (array, data) => this.rows.unshift(...data.map(row => new DataRow(this, row, this.columns)))
             }),
             rows: new IgniteProperty([], {
                 onChange: () => this.filter(),
@@ -221,13 +239,16 @@ class DataTable extends IgniteElement {
                 }
             }),
             currentPage: 0,
-            searching: false,
             pendingSearch: null,
             showPageSize: true,
             showSearchBox: true,
             showRowCount: true,
             showPages: true,
-            showPageJumpTo: true
+            showPageJumpTo: true,
+            refreshButton: true,
+            refresh: null,
+            pendingFilter: null,
+            loading: false
         }
     }
 
@@ -245,7 +266,23 @@ class DataTable extends IgniteElement {
                     ),
 
                     //Row count
-                    new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`)
+                    new span().show(this.showRowCount).class("bg-white p-2 rounded-2 flex-grow-1 flex-sm-grow-0").innerHTML(this.filtered, filtered => filtered.length == 0 ? "No rows" : `${filtered.length} ${(filtered.length < 2 ? "row" : "rows")}`),
+
+                    //Refresh button
+                    new button().class("btn btn-secondary").child(new i().class("fa-solid fa-arrows-rotate")).onClick(async () => {
+                        if (this.refresh instanceof Function) {
+                            this.loading = true;
+
+                            var refreshStart = performance.now();
+
+                            await this.refresh();
+
+                            //Add an artifial delay of 250ms at least unless the operation took longer.
+                            await new Promise(r => setTimeout(r, Math.max(0, 250 - (performance.now() - refreshStart))));
+
+                            this.loading = false;
+                        }
+                    }),
                 ),
 
                 //Search box
@@ -259,7 +296,7 @@ class DataTable extends IgniteElement {
                             .onChange(() => this.filter())
                             .on("keydown", (event) => {
                                 if (event.key != 'Shift' && event.key != 'Capslock' && event.key != 'Space' && event.key != 'Control') {
-                                    this.search();
+                                    this.requestSearch();
                                 }
                             })
                     )
@@ -295,9 +332,14 @@ class DataTable extends IgniteElement {
                     ),
 
                     //Table rows
-                    new tbody().child(
+                    new tbody().hide(this.loading).child(
                         new pagination(this.filtered, this.pageSize, this.currentPage, row => new tr().child(new list(row.columns, column => new td().child(column))))
                     )
+                ),
+
+                //Loading spinner
+                new div().show(this.loading).class("d-flex justify-content-center mt-3").child(
+                    new div().class("spinner-border")
                 )
             ),
 
@@ -359,20 +401,6 @@ class DataTable extends IgniteElement {
         );
     }
 
-    search() {
-        this.searching = true;
-
-        if (!this.pendingSearch) {
-            this.pendingSearch = setTimeout(async () => {
-                this.pendingSearch = null;
-
-                this.filter();
-
-                this.searching = false;
-            }, 300);
-        }
-    }
-
     filter() {
         var filtered = [];
 
@@ -383,15 +411,15 @@ class DataTable extends IgniteElement {
             var regex = new RegExp(this.filterSearch, 'i');
 
             filtered = filtered.filter((/** @type {DataRow} **/ row) => {
-                var found = false;
                 for (var i = 0; i < this.columns.length; i++) {
-                    if (this.columns[i].searchable && row.values[i].match(regex)) {
+                    var value = row.values[i] instanceof IgniteProperty ? row.values[i].value : row.values[i];
-                        found = true;
+
-                        break;
+                    if (this.columns[i].searchable && value && value.match(regex)) {
+                        return true;
                     }
                 }
 
-                return found;
+                return false;
             });
         }
 
@@ -399,17 +427,29 @@ class DataTable extends IgniteElement {
         filtered.sort((/** @type {DataRow} **/ a, /** @type {DataRow} **/ b) => {
             for (var i = 0; i < this.columns.length; i++) {
                 if (this.columns[i].sortable) {
+                    var aValue = a.values[i] instanceof IgniteProperty ? a.values[i].value : a.values[i];
+                    var bValue = b.values[i] instanceof IgniteProperty ? b.values[i].value : b.values[i];
+
+                    //Sort if we are sorting by ascending or descending
                     if (this.columns[i].sort == "asc") {
-                        if (a.values[i] > b.values[i]) {
+                        if (!aValue && bValue) {
+                            return -1;
+                        } else if (!bValue && aValue) {
                             return 1;
-                        } else if (a.values[i] < b.values[i]) {
+                        } else if (aValue && bValue && aValue > bValue) {
+                            return 1;
+                        } else if (aValue && bValue && aValue < bValue) {
                             return -1;
                         }
                     } else if (this.columns[i].sort == "desc") {
-                        if (a.values[i] > b.values[i]) {
+                        if (!aValue && bValue) {
+                            return 1;
+                        } else if (!bValue && aValue) {
                             return -1;
-                        } else if (a.values[i] < b.values[i]) {
+                        } else if (aValue && bValue && aValue > bValue) {
-                            return 11;
+                            return -1;
+                        } else if (aValue && bValue && aValue < bValue) {
+                            return 1;
                         }
                     }
                 }
@@ -420,6 +460,28 @@ class DataTable extends IgniteElement {
 
         this.filtered = filtered;
     }
+
+    requestSearch() {
+        if (this.pendingSearch) {
+            clearTimeout(this.pendingSearch);
+        }
+
+        this.pendingSearch = setTimeout(() => {
+            this.pendingSearch = null;
+            this.filter();
+        }, 100);
+    }
+
+    requestFilter() {
+        if (this.pendingFilter) {
+            clearTimeout(this.pendingFilter);
+        }
+
+        this.pendingFilter = setTimeout(() => {
+            this.pendingFilter = null;
+            this.filter();
+        }, 10);
+    }
 }
 
 class Template extends IgniteTemplate {