diff --git a/data-table.js b/data-table.js index 47d4a1c..5b59fd7 100644 --- a/data-table.js +++ b/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} @@ -107,34 +113,46 @@ class DataRow { /** * Creates a new DataRow from data a set of columns. + * @param {DataTable} table * @param {Any} data * @param {Array { + 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) { - converted = column.converter.value(value); - } else if (column.converter && column.converter instanceof Function) { - converted = column.converter(value); + //If the value is a property, listen for changes and request reflitering of the table. + if (value instanceof IgniteProperty) { + value.attachOnChange(() => this.table.requestFilter()); } - this.values.push(value); - this.columns.push(converted); - }); + //Invoke the column converter if there is one. + 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))), - onUnshift: (array, data) => this.rows.unshift(...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(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)) { - found = true; - break; + var value = row.values[i] instanceof IgniteProperty ? row.values[i].value : row.values[i]; + + 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]) { - return 11; + } else if (aValue && bValue && aValue > bValue) { + 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 {