gd-bs 6.6.82 → 6.6.84

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.6.82",
+    "version": "6.6.84",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -36,7 +36,7 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",
-        "core-js": "^3.39.0",
+        "core-js": "^3.40.0",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {

package/src/components/table/index.ts

@@ -19,6 +19,8 @@ class _Table extends Base<ITableProps> implements ITable {
 
     // Configure the card group
     private configure() {
+        let hasFooter = false;
+
         // See if columns are defined
         let head = this.el.querySelector("thead");
         if (head) {
@@ -29,12 +31,20 @@ class _Table extends Base<ITableProps> implements ITable {
 
                 // Parse the columns
                 for (let i = 0; i < this.props.columns.length; i++) {
+                    let colProp = this.props.columns[i];
+
                     // Append the column
                     let column = document.createElement("th");
                     row.appendChild(column);
 
+                    // See if the footer exists
+                    if (colProp.footer || colProp.onRenderFooter) {
+                        // Set the flag
+                        hasFooter = true;
+                    }
+
                     // Render the column
-                    this.renderColumn(i, column, this.props.columns[i]);
+                    this.renderColumn(column, colProp);
                 }
 
                 // See if there is an event
@@ -47,10 +57,68 @@ class _Table extends Base<ITableProps> implements ITable {
 
         // Add the rows
         this.addRows(this.props.rows);
+
+        // See if the footer exists
+        if (hasFooter) {
+            // Append the footer
+            let footer = document.createElement("tfoot");
+            this.el.appendChild(footer);
+
+            // Append the row
+            let row = document.createElement("tr");
+            footer.appendChild(row);
+
+            // Parse the columns
+            for (let i = 0; i < this.props.columns.length; i++) {
+                // Append the column
+                let column = document.createElement("td");
+                row.appendChild(column);
+
+                // Render the column
+                this.renderColumnFooter(column, this.props.columns[i]);
+            }
+        }
+    }
+
+    // Renders a cell
+    private renderCell(row: HTMLTableRowElement, props: ITableColumn, data, rowIdx: number) {
+        // Create the cell
+        let cell = document.createElement("td");
+        cell.className = props.className || "";
+        cell.innerHTML = data[props.name] == null ? "" : data[props.name];
+        row.appendChild(cell);
+
+        // See if there is a scope
+        if (props.scope) {
+            // Set the scope
+            cell.setAttribute("scope", props.scope);
+        }
+
+        // See if there is an event for this column
+        if (props.onRenderCell) {
+            // Call the event
+            props.onRenderCell(cell, props, data, rowIdx);
+        }
+
+        // See if there is an event for this component
+        if (this.props.onRenderCell) {
+            // Call the event
+            this.props.onRenderCell(cell, props, data, rowIdx);
+        }
+
+        // See if there is a click event
+        if (props.onClickCell || this.props.onClickCell) {
+            // Add the click event
+            cell.addEventListener("click", ev => {
+                // Call the event
+                props.onClickCell ? props.onClickCell(cell, props, data, rowIdx) : null;
+                this.props.onClickCell ? this.props.onClickCell(cell, props, data, rowIdx) : null;
+            });
+        }
     }
 
     // Renders a column
-    private renderColumn(colIdx: number, column: HTMLTableCellElement, props: ITableColumn) {
+    private renderColumn(column: HTMLTableCellElement, props: ITableColumn) {
         column.innerHTML = props.isHidden ? "" : props.title || props.name;
         column.setAttribute("scope", "col");
 
@@ -77,39 +145,29 @@ class _Table extends Base<ITableProps> implements ITable {
         }
     }
 
-    // Renders a cell
-    private renderCell(row: HTMLTableRowElement, props: ITableColumn, data, rowIdx: number) {
-        // Create the cell
-        let cell = document.createElement("td");
-        cell.className = props.className || "";
-        cell.innerHTML = data[props.name] == null ? "" : data[props.name];
-        row.appendChild(cell);
-
-        // See if there is a scope
-        if (props.scope) {
-            // Set the scope
-            cell.setAttribute("scope", props.scope);
-        }
+    // Renders a column footer
+    private renderColumnFooter(column: HTMLTableCellElement, props: ITableColumn) {
+        column.innerHTML = props.footer || "";
 
         // See if there is an event for this column
-        if (props.onRenderCell) {
+        if (props.onRenderFooter) {
             // Call the event
-            props.onRenderCell(cell, props, data, rowIdx);
+            props.onRenderFooter(column, props);
         }
 
         // See if there is an event for this component
-        if (this.props.onRenderCell) {
+        if (this.props.onRenderFooterCell) {
             // Call the event
-            this.props.onRenderCell(cell, props, data, rowIdx);
+            this.props.onRenderFooterCell(column, props);
         }
 
         // See if there is a click event
-        if (props.onClickCell || this.props.onClickCell) {
+        if (props.onClickFooter || this.props.onClickFooter) {
             // Add the click event
-            cell.addEventListener("click", ev => {
+            column.addEventListener("click", ev => {
                 // Call the event
-                props.onClickCell ? props.onClickCell(cell, props, data, rowIdx) : null;
-                this.props.onClickCell ? this.props.onClickCell(cell, props, data, rowIdx) : null;
+                props.onClickFooter ? props.onClickFooter(column, props) : null;
+                this.props.onClickFooter ? this.props.onClickFooter(column, props) : null;
             });
         }
     }

package/src/components/table/types.d.ts

@@ -85,10 +85,13 @@ export interface ITable {
  */
 export interface ITableProps extends IBaseProps<ITable> {
     columns?: Array<ITableColumn>;
-    onClickCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
-    onClickHeader?: (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void;
-    onRenderCell?: (el?: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
-    onRenderHeaderCell?: (el?: HTMLTableDataCellElement, column?: ITableColumn) => void;
+    onClickCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
+    onClickFooter?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
+    onClickHeader?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
+    onRenderCell?: (el?: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
+    onRenderFooterCell?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
+    onRenderFooterRow?: (el?: HTMLTableRowElement) => void;
+    onRenderHeaderCell?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
     onRenderHeaderRow?: (el?: HTMLTableRowElement) => void;
     onRenderRow?: (el?: HTMLTableRowElement, data?: any, rowIdx?: number) => void;
     rows?: Array<any>;
@@ -100,12 +103,15 @@ export interface ITableProps extends IBaseProps<ITable> {
 export interface ITableColumn {
     className?: string;
     data?: any;
+    footer?: string;
     isHidden?: boolean;
     name: string;
-    onClickCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
-    onClickHeader?: (el: HTMLTableHeaderCellElement, column?: ITableColumn) => void;
-    onRenderCell?: (el: HTMLTableDataCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
-    onRenderHeader?: (el?: HTMLTableDataCellElement, column?: ITableColumn) => void;
+    onClickCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
+    onClickFooter?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
+    onClickHeader?: (el: HTMLTableCellElement, column?: ITableColumn) => void;
+    onRenderCell?: (el: HTMLTableCellElement, column?: ITableColumn, data?: any, rowIdx?: number) => void;
+    onRenderFooter?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
+    onRenderHeader?: (el?: HTMLTableCellElement, column?: ITableColumn) => void;
     scope?: string;
     title?: string;
 }