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.

data-table.js

@@ -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
 }