Cleaned up code, added ability to use properties with column data. Added loading state and refresh button. Improved sorting and searching.
This commit is contained in:
parent
3372428700
commit
23bb12f6d3
156
data-table.js
156
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) {
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user