MontoyaTech/ignite-html-bootstrap
MontoyaTech/ignite-html-bootstrap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved DataTable by exposing the table that owns a given column, added a new onclick function callback for columns, added a data field for the DataRow so that it can be accessed.

Browse Source
This commit is contained in:
MattMo 2023-07-08 09:49:33 -07:00
parent 63d3c9f469
commit 1c31f34424
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
data-table.js
View File

@ -6,6 +6,12 @@ import { IgniteTemplate, div, table, thead, tbody, tr, th, td, list, pagination,
* The outline of a column apart of a DataTable.
*/
class DataColumn extends IgniteObject {
/**
* The data table this row belongs to.
* @type {DataTable}
*/
table;
/**
* The name of the column, this can contain html.
* @type {String|Any}
@ -54,6 +60,12 @@ class DataColumn extends IgniteObject {
*/
sort = null;
/**
* A callback function that is invoked when the column is clicked.
* @type {Function} The callback function to be called when this column is clicked. The instance of the column is passed as the first parameter.
*/
onClick = null;
/**
* Creates a new DataColumn with a name and options.
* @param {String} name The name of the column to display
@ -79,6 +91,7 @@ class DataColumn extends IgniteObject {
this.converter = options.converter ?? this.converter;
this.comparer = options.comparer ?? this.comparer;
this.searcher = options.searcher ?? this.searcher;
this.onClick = options.onClick ?? this.onClick;
if (this.sort == "asc" || this.sort == "desc") {
this.sortable = true;
@ -99,6 +112,13 @@ class DataRow {
*/
table;
/**
* The raw data of this row that is then
* broken down into values and columns.
* @type {Any}
*/
data;
/**
* The raw values of this row.
* @type {Array<Any>}
@ -120,6 +140,8 @@ class DataRow {
constructor(table, data, columns) {
this.table = table;
this.data = data;
this.values = [];
this.columns = [];
@ -323,6 +345,9 @@ class DataTable extends IgniteElement {
new thead().class(this.headClass).child(
new tr().child(
new list(this.columns, column => {
//Ensure the column table instance is set.
column.table = this;
return new th().class("text-nowrap").class(column.sortable, sortable => sortable ? "cursor-pointer" : null).attribute("scope", "col").child(
new i().show([column.sortable, column.sort], (sortable, sort) => sortable && sort).class("me-2").class(column.sort, sort => sort ? (sort == "asc" ? "fa-solid fa-angle-up" : "fa-solid fa-angle-down") : null),
column.name
@ -339,6 +364,10 @@ class DataTable extends IgniteElement {
this.filter();
}
}
if (column.onClick) {
column.onClick(column);
}
});
})
)
@ -515,5 +544,6 @@ IgniteHtml.register("bt-data-table", DataTable);
export {
Template as DataTable,
DataColumn
DataColumn,
DataRow
}