@sme.up/ketchup 6.5.0 → 6.7.0

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -1,6 +1,6 @@
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { forceUpdate, h, Host, } from '@stencil/core';
 import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, } from './kup-data-table-declarations';
-import { getColumnByName } from '../../utils/cell-utils';
+import { getColumnByName, } from '../../utils/cell-utils';
 import { calcTotals, normalizeRows, filterRows, groupRows, paginateRows, sortRows, } from './kup-data-table-helper';
 import { numberToFormattedStringNumber, identify, getProps, setProps, } from '../../utils/utils';
 import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
@@ -321,7 +321,7 @@ export class KupDataTable {
       'format-color-text',
       'format-font-size-increase',
     ];
-    this.DENSITY_DECODES = ['Dense', 'Normal', 'Wide'];
+    this.DENSITY_DECODES = ['Dense', 'Medium', 'Wide'];
     this.DENSITY_ICONS = [
       'format-align-justify',
       'reorder-horizontal',
@@ -583,6 +583,30 @@ export class KupDataTable {
   async collapseAll() {
     this.expandGroups = false;
   }
+  /**
+   * This method will delete rows by id from the data table dataset.
+   * @param {string[]} ids - Array of row ids to delete.
+   * @returns {Promise<Array<KupDataTableRow>>} Deleted rows.
+   */
+  async deleteRows(ids = []) {
+    const deletedRows = [];
+    const newRows = [];
+    for (let index = 0; index < this.data.rows.length; index++) {
+      const row = this.data.rows[index];
+      if (ids.includes(row.id)) {
+        deletedRows.push(row);
+      }
+      else {
+        newRows.push(row);
+      }
+    }
+    if (deletedRows.length > 0) {
+      this.data.rows = newRows;
+      this.recalculateRowsAndUndoSelections();
+      await this.refresh();
+    }
+    return deletedRows;
+  }
   /**
    * Expands all groups.
    */
@@ -690,6 +714,49 @@ export class KupDataTable {
       this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
     }
   }
+  /**
+   * Sets the cell value in a table cell.
+   * @param {string} columnName - Name of the column.
+   * @param {string} rowId - Id of the row.
+   * @param {string} value - Value to set.
+   */
+  async setCellValue(columnName, rowId, value) {
+    const column = getColumnByName(this.data.columns, columnName);
+    if (!column) {
+      return;
+    }
+    const row = this.getRow(rowId);
+    if (!row) {
+      return;
+    }
+    const cell = row.cells[columnName];
+    if (!cell) {
+      return;
+    }
+    cell.value = value;
+    cell.displayedValue = null;
+    if (cell.data) {
+      cell.data.key = new Date().getTime() + column.name;
+      cell.data.initialValue = value;
+    }
+    /*
+    const cells = this.rootElement.shadowRoot.querySelectorAll(
+        'td[data-column="' + columnName + '"]'
+    );
+    for (let index = 0; cells && index < cells.length; index++) {
+        const cell = cells[index];
+        if (cell['data-row'] && cell['data-row'].id == rowId) {
+            const kupInput = cell.querySelector('.hydrated');
+            if (kupInput) {
+                try {
+                    (kupInput as any).setValue(value);
+                } catch (error) {}
+            }
+            break;
+        }
+    }*/
+    this.refresh();
+  }
   /**
    * Sets the focus on an editable table cell.
    * @param {string} column - Name of the column.
@@ -732,13 +799,7 @@ export class KupDataTable {
     this.selectedRows = [];
     for (let index = 0; index < rowsIdentifiers.length; index++) {
       const id = rowsIdentifiers[index];
-      if (typeof id === 'number') {
-        this.selectedRows.push(this.renderedRows[id]);
-      }
-      else {
-        const row = this.renderedRows.find((row) => row.id === id);
-        this.selectedRows.push(row);
-      }
+      this.selectedRows.push(this.getRow(id));
     }
     if (emitEvent !== false) {
       this.kupRowSelected.emit({
@@ -813,6 +874,20 @@ export class KupDataTable {
       this.setTransposedData();
     }
   }
+  getRow(id) {
+    if (typeof id === 'number') {
+      return this.data.rows[id];
+    }
+    else {
+      return this.data.rows.find((row) => row.id === id);
+    }
+  }
+  getTransposedData(column) {
+    if (column) {
+      this.filters = {};
+    }
+    return this.kupManager.data.transpose(this.data, column);
+  }
   setTransposedData() {
     // transpose
     this.originalData = Object.assign({}, this.data);
@@ -948,12 +1023,6 @@ export class KupDataTable {
       delete column.icon;
     }
   }
-  getTransposedData(column) {
-    if (column) {
-      this.filters = {};
-    }
-    return this.kupManager.data.transpose(this.data, column);
-  }
   updateStickyHeaderSize() {
     const navBar = document.querySelectorAll('.header')[0];
     if (navBar) {
@@ -2430,13 +2499,12 @@ export class KupDataTable {
         : {}));
       multiSelectColumn = (h("th", { class: selectionStyleAndClass
           ? selectionStyleAndClass.fixedCellClasses
-          : {}, style: style },
-        h("kup-checkbox", { "onkup-checkbox-change": (e) => this.onSelectAll(e), title: this.kupManager.language.translate(KupLanguageRow.SELECTED) +
-            `: ${this.selectedRows.length},` +
-            this.kupManager.language.translate(KupLanguageRow.RENDERED) +
-            `: ${this.renderedRows.length}`, checked: this.selectedRows.length > 0 &&
-            this.selectedRows.length ===
-              this.renderedRows.length })));
+          : {}, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => this.onSelectAll(e), title: this.kupManager.language.translate(KupLanguageRow.SELECTED) +
+          `: ${this.selectedRows.length},` +
+          this.kupManager.language.translate(KupLanguageRow.RENDERED) +
+          `: ${this.renderedRows.length}`, checked: this.selectedRows.length > 0 &&
+          this.selectedRows.length ===
+            this.renderedRows.length })));
     }
     // Renders action column
     let actionsColumn = null;
@@ -2483,14 +2551,7 @@ export class KupDataTable {
           }
         }
       }
-      return (h("th", { ref: (el) => this.thRefs.push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle, title: column.name },
-        h("div", { class: "header-cell__content" },
-          h("span", { class: "header-cell__title" }, this.applyLineBreaks(column.title)),
-          h("span", { class: "header-cell__icons" },
-            keyIcon,
-            sortIcon,
-            filter)),
-        this.resizableColumns ? (h("span", { class: "header-cell__drag-handler" })) : null));
+      return (h("th", { ref: (el) => this.thRefs.push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle, title: column.name }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, this.applyLineBreaks(column.title)), h("span", { class: "header-cell__icons" }, keyIcon, sortIcon, filter)), this.resizableColumns ? (h("span", { class: "header-cell__drag-handler" })) : null));
     });
     return [multiSelectColumn, actionsColumn, ...dataColumns];
     //  return [multiSelectColumn, groupColumn, actionsColumn, ...dataColumns];
@@ -2506,13 +2567,12 @@ export class KupDataTable {
         : {}));
       multiSelectColumn = (h("th-sticky", { class: selectionStyleAndClass
           ? selectionStyleAndClass.fixedCellClasses
-          : null, style: style },
-        h("kup-checkbox", { "onkup-checkbox-change": (e) => this.onSelectAll(e), title: this.kupManager.language.translate(KupLanguageRow.SELECTED) +
-            `: ${this.selectedRows.length},` +
-            this.kupManager.language.translate(KupLanguageRow.RENDERED) +
-            `: ${this.renderedRows.length}`, checked: this.selectedRows.length > 0 &&
-            this.selectedRows.length ===
-              this.renderedRows.length })));
+          : null, style: style }, h("kup-checkbox", { "onkup-checkbox-change": (e) => this.onSelectAll(e), title: this.kupManager.language.translate(KupLanguageRow.SELECTED) +
+          `: ${this.selectedRows.length},` +
+          this.kupManager.language.translate(KupLanguageRow.RENDERED) +
+          `: ${this.renderedRows.length}`, checked: this.selectedRows.length > 0 &&
+          this.selectedRows.length ===
+            this.renderedRows.length })));
     }
     // Empty cell for the actions
     let actionsColumn = null;
@@ -2528,9 +2588,7 @@ export class KupDataTable {
     // Composes normal header cells
     const dataColumns = this.getVisibleColumns().map((column, columnIndex) => {
       const { columnClass, thStyle } = this.composeHeaderCellClassAndStyle(columnIndex, specialExtraCellsCount, column);
-      return (h("th-sticky", { class: columnClass, style: thStyle },
-        h("div", { class: "header-cell__content" },
-          h("span", { class: "header-cell__title" }, this.applyLineBreaks(column.title)))));
+      return (h("th-sticky", { class: columnClass, style: thStyle }, h("div", { class: "header-cell__content" }, h("span", { class: "header-cell__title" }, this.applyLineBreaks(column.title)))));
     });
     return [multiSelectColumn, actionsColumn, ...dataColumns];
   }
@@ -2716,15 +2774,9 @@ export class KupDataTable {
           ? fixedCellStyle.fixedCellClasses
           : '', style: fixedCellStyle
           ? fixedCellStyle.fixedCellStyle
-          : null },
-        totalMenu,
-        h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
+          : null }, totalMenu, h("span", { class: "totals-value", title: translation[menuLabel] }, value)));
     });
-    const footer = (h("tfoot", null,
-      h("tr", null,
-        selectRowCell,
-        actionsCell,
-        footerCells)));
+    const footer = (h("tfoot", null, h("tr", null, selectRowCell, actionsCell, footerCells)));
     return footer;
   }
   renderRow(row, level = 0, rowCssIndex = 0, previousRow) {
@@ -2768,11 +2820,7 @@ export class KupDataTable {
           cells.push(h("td", null));
         }
         // adding 'grouping' cell
-        const grouplabelcell = (h("td", { colSpan: this.calculateColspan() },
-          h("span", { class: "group-cell-content" },
-            indent,
-            h("span", { class: iconClass }),
-            h("span", { class: "text" }, composedGroupLabel))));
+        const grouplabelcell = (h("td", { colSpan: this.calculateColspan() }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel))));
         // adding 'totals grouping' cells
         for (let column of visibleColumns) {
           let totalClass = 'total';
@@ -2808,12 +2856,7 @@ export class KupDataTable {
         jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group group-total" }, cells));
       }
       else {
-        jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group" },
-          h("td", { colSpan: this.calculateColspan() },
-            h("span", { class: "group-cell-content" },
-              indent,
-              h("span", { class: iconClass }),
-              h("span", { class: "text" }, composedGroupLabel)))));
+        jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group" }, h("td", { colSpan: this.calculateColspan() }, h("span", { class: "group-cell-content" }, indent, h("span", { class: iconClass }), h("span", { class: "text" }, composedGroupLabel)))));
       }
       // if group is expanded, add children
       if (this.isGroupExpanded(row)) {
@@ -2858,8 +2901,7 @@ export class KupDataTable {
             ? selectionStyleAndClass.fixedCellClasses
             : null, style: selectionStyleAndClass
             ? selectionStyleAndClass.fixedCellStyle
-            : null },
-          h(FCheckbox, Object.assign({}, props))));
+            : null }, h(FCheckbox, Object.assign({}, props))));
       }
       // Renders action cell
       // If active, this can be either the first or second cell
@@ -2897,10 +2939,7 @@ export class KupDataTable {
             ? actionsStyleAndClass.fixedCellClasses
             : null, style: actionsStyleAndClass
             ? actionsStyleAndClass.fixedCellStyle
-            : null },
-          defaultRowActions,
-          rowActionExpander,
-          variableActions));
+            : null }, defaultRowActions, rowActionExpander, variableActions));
       }
       // Renders plain rows cells
       const cells = visibleColumns.map((currentColumn, cellIndex) => {
@@ -2982,10 +3021,7 @@ export class KupDataTable {
       const style = {
         '--kup_datatable_row_actions': rowActionsCount,
       };
-      return (h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: rowClass, style: style },
-        selectRowCell,
-        rowActionsCell,
-        cells));
+      return (h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: rowClass, style: style }, selectRowCell, rowActionsCell, cells));
     }
   }
   renderActions(actions, row, type) {
@@ -3040,15 +3076,15 @@ export class KupDataTable {
     this.kupManager.removeClickCallback(this.clickCbCustomPanel);
   }
   renderPaginator(top) {
-    return (h("div", { class: "paginator-wrapper" },
-      h("div", { class: "paginator-tabs" }, !this.lazyLoadRows &&
-        this.rowsLength > this.rowsPerPage ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
-          ? this.currentRowsPerPage
-          : this.rowsPerPage, onLoadMore: this.showLoadMore
-          ? () => {
-            this.onLoadMoreClick();
-          }
-          : null, onNextPage: () => this.handlePageChange(this.currentPage + 1), onPrevPage: () => this.handlePageChange(this.currentPage - 1), onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) })) : null)));
+    return (h("div", { class: "paginator-wrapper" }, h("div", { class: "paginator-tabs" }, this.showLoadMore ||
+      (!this.lazyLoadRows &&
+        this.rowsLength > this.rowsPerPage) ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
+        ? this.currentRowsPerPage
+        : this.rowsPerPage, onLoadMore: this.showLoadMore
+        ? () => {
+          this.onLoadMoreClick();
+        }
+        : null, onNextPage: () => this.handlePageChange(this.currentPage + 1), onPrevPage: () => this.handlePageChange(this.currentPage - 1), onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) })) : null)));
   }
   renderCustomizePanel() {
     let density = undefined;
@@ -3067,29 +3103,17 @@ export class KupDataTable {
     }
     return (h("kup-card", { customStyle: "::slotted(kup-switch) { width: max-content !important; } ::slotted(*) { margin: auto !important; } ::slotted(.customize-element) { margin: auto !important; padding: 0 1em 1em 1em !important; width: max-content !important; } ::slotted(.customize-element):nth-child(1) { padding-top: 1em !important; }", isMenu: true, layoutFamily: KupCardFamily.FREE, ref: (el) => {
         this.customizeTopPanelRef = el;
-      }, sizeX: "360px", sizeY: "300px" },
-      density,
-      grid,
-      fontsize,
-      transpose,
-      h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: this.kupManager.language.translate(KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }),
-      h("kup-switch", { class: "customize-element", checked: this.editableData, label: this.kupManager.language.translate(KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }),
-      h("kup-button", { title: this.kupManager.language.translate(KupLanguageGeneric.TOGGLE) +
-          ' Magic Box ' +
-          '(' +
-          this.kupManager.language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
-          ')', icon: "auto-fix", "onkup-button-click": () => this.kupManager.toggleMagicBox() }),
-      totalsMatrix));
+      }, sizeX: "360px", sizeY: "300px" }, density, grid, fontsize, transpose, h("kup-switch", { class: "customize-element", checked: this.dragEnabled, label: this.kupManager.language.translate(KupLanguageGeneric.DRAG_AND_DROP), leadingLabel: true, "onkup-switch-change": () => (this.dragEnabled = !this.dragEnabled) }), h("kup-switch", { class: "customize-element", checked: this.editableData, label: this.kupManager.language.translate(KupLanguageGeneric.EDITABLE), leadingLabel: true, "onkup-switch-change": () => (this.editableData = !this.editableData) }), h("kup-button", { title: this.kupManager.language.translate(KupLanguageGeneric.TOGGLE) +
+        ' Magic Box ' +
+        '(' +
+        this.kupManager.language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
+        ')', icon: "auto-fix", "onkup-button-click": () => this.kupManager.toggleMagicBox() }), totalsMatrix));
   }
   columnRemoveArea() {
-    return (h("div", { class: "droparea__remove", ref: (el) => (this.removeDropareaRef = el) },
-      h(FImage, { resource: "delete", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" }),
-      h(FImage, { resource: "delete-empty", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" })));
+    return (h("div", { class: "droparea__remove", ref: (el) => (this.removeDropareaRef = el) }, h(FImage, { resource: "delete", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" }), h(FImage, { resource: "delete-empty", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" })));
   }
   columnGroupArea() {
-    return (h("div", { class: "droparea__groups", ref: (el) => (this.groupsDropareaRef = el) },
-      h(FImage, { resource: "bookmark", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" }),
-      h(FImage, { resource: "book", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" })));
+    return (h("div", { class: "droparea__groups", ref: (el) => (this.groupsDropareaRef = el) }, h(FImage, { resource: "bookmark", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" }), h(FImage, { resource: "book", color: `var(${KupThemeColorValues.TEXT})`, sizeX: "30px", sizeY: "50px" })));
   }
   hideShowColumnDropArea(show, th) {
     if (show && th && (this.removableColumns || this.showGroups)) {
@@ -3167,12 +3191,14 @@ export class KupDataTable {
           value = KupLanguageDensity.WIDE;
           break;
       }
-      listItems[i] = {
-        icon: icons[i],
-        id: codes[i],
-        selected: selectedCode == codes[i],
-        value: this.kupManager.language.translate(value),
-      };
+      if (value) {
+        listItems[i] = {
+          icon: icons[i],
+          id: codes[i],
+          selected: selectedCode == codes[i],
+          value: this.kupManager.language.translate(value),
+        };
+      }
     }
     return listItems;
   }
@@ -3201,17 +3227,20 @@ export class KupDataTable {
         text = KupLanguageFontsize.SMALL;
         break;
     }
-    return (h("div", { class: "customize-element fontsize-panel" },
-      h("kup-combobox", { isSelect: true, data: data, initialValue: this.kupManager.language.translate(text), "onkup-combobox-itemclick": (e) => {
-          e.stopPropagation();
-          this.fontsize = this.getFontSizeCodeFromDecode(e.detail.value);
-        } })));
+    return (h("div", { class: "customize-element fontsize-panel" }, h("kup-combobox", { isSelect: true, data: data, initialValue: this.kupManager.language.translate(text), "onkup-combobox-itemclick": (e) => {
+        e.stopPropagation();
+        this.fontsize = this.getFontSizeCodeFromDecode(e.detail.node.id);
+      } })));
   }
   getDensityCodeFromDecode(decode) {
-    return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(FCellPadding));
+    return this.transcodeItem(decode, this.DENSITY_DECODES, [
+      'dense',
+      'medium',
+      'wide',
+    ]);
   }
   renderDensityPanel() {
-    const listItems = this.createListData(Object.values(FCellPadding), this.DENSITY_ICONS, this.density);
+    const listItems = this.createListData(['dense', 'medium', 'wide'], this.DENSITY_ICONS, this.density);
     const listData = { data: listItems, showIcons: true };
     const textfieldData = {
       trailingIcon: true,
@@ -3232,33 +3261,30 @@ export class KupDataTable {
         text = KupLanguageDensity.WIDE;
         break;
     }
-    return (h("div", { class: "customize-element density-panel" },
-      h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
-          e.stopPropagation();
-          this.density = this.getDensityCodeFromDecode(e.detail.value);
-        } })));
+    return (h("div", { class: "customize-element density-panel" }, h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
+        e.stopPropagation();
+        this.density = this.getDensityCodeFromDecode(e.detail.node.id);
+      } })));
   }
   getGridCodeFromDecode(decode) {
     return this.transcodeItem(decode, this.GRID_DECODES, this.GRID_CODES);
   }
   renderTransposeSwitch() {
-    return (h("div", { class: "customize-element grid-panel" },
-      h("kup-switch", { checked: this.transpose, label: this.kupManager.language.translate(KupLanguageGeneric.TRANSPOSE_DATA), leadingLabel: true, "onkup-switch-change": (e) => {
-          e.stopPropagation();
-          if (e.detail.value === 'on') {
-            this.transpose = true;
-          }
-          else {
-            this.transpose = false;
-          }
-        } })));
+    return (h("div", { class: "customize-element grid-panel" }, h("kup-switch", { checked: this.transpose, label: this.kupManager.language.translate(KupLanguageGeneric.TRANSPOSE_DATA), leadingLabel: true, "onkup-switch-change": (e) => {
+        e.stopPropagation();
+        if (e.detail.value === 'on') {
+          this.transpose = true;
+        }
+        else {
+          this.transpose = false;
+        }
+      } })));
   }
   renderTotalsMatrix() {
-    return (h("div", { class: "customize-element grid-panel" },
-      h("kup-button", { title: this.kupManager.language.translate(KupLanguageGeneric.TOTALS_TABLE) +
-          ' (' +
-          this.kupManager.language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
-          ')', label: this.kupManager.language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => this.switchToTotalsMatrix() })));
+    return (h("div", { class: "customize-element grid-panel" }, h("kup-button", { title: this.kupManager.language.translate(KupLanguageGeneric.TOTALS_TABLE) +
+        ' (' +
+        this.kupManager.language.translate(KupLanguageGeneric.EXPERIMENTAL_FEAT) +
+        ')', label: this.kupManager.language.translate(KupLanguageGeneric.TOTALS_TABLE), icon: "exposure", "onkup-button-click": () => this.switchToTotalsMatrix() })));
   }
   renderGridPanel() {
     const listItems = this.createListData(this.GRID_CODES, this.GRID_ICONS, this.showGrid);
@@ -3285,12 +3311,11 @@ export class KupDataTable {
         text = KupLanguageGrid.ROW;
         break;
     }
-    return (h("div", { class: "customize-element grid-panel" },
-      h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), data: data, "onkup-combobox-itemclick": (e) => {
-          e.stopPropagation();
-          const grid = this.getGridCodeFromDecode(e.detail.value);
-          this.showGrid = grid;
-        } })));
+    return (h("div", { class: "customize-element grid-panel" }, h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), data: data, "onkup-combobox-itemclick": (e) => {
+        e.stopPropagation();
+        const grid = this.getGridCodeFromDecode(e.detail.value);
+        this.showGrid = grid;
+      } })));
   }
   render() {
     this.thRefs = [];
@@ -3300,8 +3325,7 @@ export class KupDataTable {
     this.sizedColumns = this.getSizedColumns();
     let rows = null;
     if (this.paginatedRowsLength === 0) {
-      rows = (h("tr", { ref: (el) => this.rowsRefs.push(el) },
-        h("td", { colSpan: this.calculateColspan() }, this.emptyDataLabel)));
+      rows = (h("tr", { ref: (el) => this.rowsRefs.push(el) }, h("td", { colSpan: this.calculateColspan() }, this.emptyDataLabel)));
     }
     else {
       rows = [];
@@ -3398,56 +3422,34 @@ export class KupDataTable {
     if (this.headerIsPersistent &&
       this.tableHeight === undefined &&
       this.tableWidth === undefined) {
-      stickyEl = (h("sticky-header", { class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (this.stickyTheadRef = el) },
-        h("thead-sticky", null,
-          h("tr-sticky", null, stickyHeader))));
+      stickyEl = (h("sticky-header", { class: "hover-scrolling-child", hidden: !this.showHeader, ref: (el) => (this.stickyTheadRef = el) }, h("thead-sticky", null, h("tr-sticky", null, stickyHeader))));
     }
     let belowClass = 'below-wrapper';
     if (this.tableHeight !== undefined || this.tableWidth !== undefined) {
       belowClass += ' custom-size';
     }
-    const compCreated = (h(Host, null,
-      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId },
-        h("div", { class: "above-wrapper" },
-          this.globalFilter ? (h("div", { id: "global-filter" },
-            h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
-                const t = event.target;
-                window.clearTimeout(this.globalFilterTimeout);
-                this.globalFilterTimeout =
-                  window.setTimeout(() => this.onGlobalFilterChange(t), 600, t);
-              } }))) : null,
-          paginatorTop),
-        h("div", { class: "group-wrapper" }, groupChips),
-        h("div", { class: "droparea", ref: (el) => (this.dropareaRef = el) },
-          this.showGroups ? this.columnGroupArea() : null,
-          this.removableColumns ? this.columnRemoveArea() : null),
-        h("div", { style: elStyle, class: belowClass, ref: (el) => (this.tableAreaRef = el) },
-          this.showCustomization
-            ? [
-              h("div", { class: "settings-trigger", onClick: () => {
-                  this.onCustomSettingsClick();
-                }, ref: (el) => {
-                  this.customizeTopButtonRef =
-                    el;
-                } },
-                h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
-              this.renderCustomizePanel(),
-            ]
-            : null,
-          h("table", { class: tableClass, ref: (el) => (this.tableRef = el), onMouseLeave: (ev) => {
-              ev.stopPropagation();
-            }, onContextMenu: (e) => {
-              e.preventDefault();
-            } },
-            h("thead", { hidden: !this.showHeader, ref: (el) => (this.theadRef = el) },
-              h("tr", null, header)),
-            h("tbody", null, rows),
-            this.showFooter || this.hasTotals()
-              ? this.renderFooter()
-              : null),
-          stickyEl),
-        paginatorBottom)));
+    const compCreated = (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "above-wrapper" }, this.globalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
+        const t = event.target;
+        window.clearTimeout(this.globalFilterTimeout);
+        this.globalFilterTimeout =
+          window.setTimeout(() => this.onGlobalFilterChange(t), 600, t);
+      } }))) : null, paginatorTop), h("div", { class: "group-wrapper" }, groupChips), h("div", { class: "droparea", ref: (el) => (this.dropareaRef = el) }, this.showGroups ? this.columnGroupArea() : null, this.removableColumns ? this.columnRemoveArea() : null), h("div", { style: elStyle, class: belowClass, ref: (el) => (this.tableAreaRef = el) }, this.showCustomization
+      ? [
+        h("div", { class: "settings-trigger", onClick: () => {
+            this.onCustomSettingsClick();
+          }, ref: (el) => {
+            this.customizeTopButtonRef =
+              el;
+          } }, h(FImage, { color: `var(${KupThemeColorValues.TITLE})`, resource: "settings", sizeX: "10px" })),
+        this.renderCustomizePanel(),
+      ]
+      : null, h("table", { class: tableClass, ref: (el) => (this.tableRef = el), onMouseLeave: (ev) => {
+        ev.stopPropagation();
+      }, onContextMenu: (e) => {
+        e.preventDefault();
+      } }, h("thead", { hidden: !this.showHeader, ref: (el) => (this.theadRef = el) }, h("tr", null, header)), h("tbody", null, rows), this.showFooter || this.hasTotals()
+      ? this.renderFooter()
+      : null), stickyEl), paginatorBottom)));
     return compCreated;
   }
   disconnectedCallback() {
@@ -3472,1745 +3474,1837 @@ export class KupDataTable {
   }
   static get is() { return "kup-data-table"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["kup-data-table.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["kup-data-table.css"]
-  }; }
-  static get properties() { return {
-    "stateId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "state-id",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "store": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupStore",
-        "resolved": "KupStore",
-        "references": {
-          "KupStore": {
-            "location": "import",
-            "path": "../kup-state/kup-store"
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-data-table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-data-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "stateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "state-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "store": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupStore",
+          "resolved": "KupStore",
+          "references": {
+            "KupStore": {
+              "location": "import",
+              "path": "../kup-state/kup-store"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "autoFillMissingCells": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "When true and when a row is missing some columns, the missing cells will be autogenerated."
-      },
-      "attribute": "auto-fill-missing-cells",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "customStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization"
-      },
-      "attribute": "custom-style",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "KupDataTableDataset",
-        "resolved": "KupDataTableDataset",
-        "references": {
-          "KupDataTableDataset": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      "autoFillMissingCells": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When true and when a row is missing some columns, the missing cells will be autogenerated."
+        },
+        "attribute": "auto-fill-missing-cells",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization"
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "KupDataTableDataset",
+          "resolved": "KupDataTableDataset",
+          "references": {
+            "KupDataTableDataset": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The data of the table."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The data of the table."
-      }
-    },
-    "density": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FCellPadding",
-        "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
-        "references": {
-          "FCellPadding": {
-            "location": "import",
-            "path": "../../f-components/f-cell/f-cell-declarations"
+      "density": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FCellPadding",
+          "resolved": "FCellPadding.DENSE | FCellPadding.MEDIUM | FCellPadding.NONE | FCellPadding.WIDE",
+          "references": {
+            "FCellPadding": {
+              "location": "import",
+              "path": "../../f-components/f-cell/f-cell-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'."
-      },
-      "attribute": "density",
-      "reflect": false,
-      "defaultValue": "FCellPadding.DENSE"
-    },
-    "dragEnabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables drag."
-      },
-      "attribute": "drag-enabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "dropEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables drop."
-      },
-      "attribute": "drop-enabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "editableData": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "When set to true, editable cells will be rendered using input components."
-      },
-      "attribute": "editable-data",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "emptyDataLabel": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the label to show when the table is empty."
-      },
-      "attribute": "empty-data-label",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "enableColumnsFormula": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "Enables the choice to set formulas on columns by dragging them into different columns."
-      },
-      "attribute": "enable-columns-formula",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "enableExtraColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables the extracolumns add buttons."
-      },
-      "attribute": "enable-extra-columns",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "enableMergeColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "Enables the merging of columns by dragging them into different columns."
-      },
-      "attribute": "enable-merge-columns",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "enableSortableColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables the sorting of columns by dragging them into different columns."
-      },
-      "attribute": "enable-sortable-columns",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "expandGroups": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Expands groups when set to true."
-      },
-      "attribute": "expand-groups",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "filters": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "GenericFilter",
-        "resolved": "GenericFilter",
-        "references": {
-          "GenericFilter": {
-            "location": "import",
-            "path": "../../utils/filters/filters-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'."
+        },
+        "attribute": "density",
+        "reflect": false,
+        "defaultValue": "FCellPadding.DENSE"
+      },
+      "dragEnabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables drag."
+        },
+        "attribute": "drag-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "dropEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables drop."
+        },
+        "attribute": "drop-enabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "editableData": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true, editable cells will be rendered using input components."
+        },
+        "attribute": "editable-data",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "emptyDataLabel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the label to show when the table is empty."
+        },
+        "attribute": "empty-data-label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "enableColumnsFormula": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "Enables the choice to set formulas on columns by dragging them into different columns."
+        },
+        "attribute": "enable-columns-formula",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableExtraColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables the extracolumns add buttons."
+        },
+        "attribute": "enable-extra-columns",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableMergeColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "Enables the merging of columns by dragging them into different columns."
+        },
+        "attribute": "enable-merge-columns",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableSortableColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables the sorting of columns by dragging them into different columns."
+        },
+        "attribute": "enable-sortable-columns",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "expandGroups": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Expands groups when set to true."
+        },
+        "attribute": "expand-groups",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "filters": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "GenericFilter",
+          "resolved": "GenericFilter",
+          "references": {
+            "GenericFilter": {
+              "location": "import",
+              "path": "../../utils/filters/filters-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List of filters set by the user."
-      },
-      "defaultValue": "{}"
-    },
-    "fixedColumns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "fixedRows"
-          }],
-        "text": "Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table.\r\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\r\nCan be combined with fixedRows."
-      },
-      "attribute": "fixed-columns",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "fixedRows": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "fixedColumns"
-          }],
-        "text": "Fixes the given number of rows so that they stay visible when vertically scrolling the data-table.\r\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\r\nCan be combined with fixedColumns."
-      },
-      "attribute": "fixed-rows",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "forceOneLine": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Forces cells with long text and a fixed column size to have an ellipsis set on their text.\r\nThe reflect attribute is mandatory to allow styling."
-      },
-      "attribute": "force-one-line",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "globalFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true it activates the global filter."
-      },
-      "attribute": "global-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "globalFilterValue": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the global filter."
-      },
-      "attribute": "global-filter-value",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "groupLabelDisplay": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "GroupLabelDisplayMode",
-        "resolved": "GroupLabelDisplayMode.BOTH | GroupLabelDisplayMode.LABEL | GroupLabelDisplayMode.VALUE",
-        "references": {
-          "GroupLabelDisplayMode": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "List of filters set by the user."
+        },
+        "defaultValue": "{}"
+      },
+      "fixedColumns": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "fixedRows"
+            }],
+          "text": "Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table.\r\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\r\nCan be combined with fixedRows."
+        },
+        "attribute": "fixed-columns",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "fixedRows": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "fixedColumns"
+            }],
+          "text": "Fixes the given number of rows so that they stay visible when vertically scrolling the data-table.\r\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\r\nCan be combined with fixedColumns."
+        },
+        "attribute": "fixed-rows",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "forceOneLine": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Forces cells with long text and a fixed column size to have an ellipsis set on their text.\r\nThe reflect attribute is mandatory to allow styling."
+        },
+        "attribute": "force-one-line",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "globalFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true it activates the global filter."
+        },
+        "attribute": "global-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "globalFilterValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the global filter."
+        },
+        "attribute": "global-filter-value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "groupLabelDisplay": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "GroupLabelDisplayMode",
+          "resolved": "GroupLabelDisplayMode.BOTH | GroupLabelDisplayMode.LABEL | GroupLabelDisplayMode.VALUE",
+          "references": {
+            "GroupLabelDisplayMode": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "How the label of a group must be displayed.\r\nFor available values [see here]{@link GroupLabelDisplayMode}"
-      },
-      "attribute": "group-label-display",
-      "reflect": false,
-      "defaultValue": "GroupLabelDisplayMode.BOTH"
-    },
-    "groups": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<GroupObject>",
-        "resolved": "GroupObject[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "GroupObject": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "How the label of a group must be displayed.\r\nFor available values [see here]{@link GroupLabelDisplayMode}"
+        },
+        "attribute": "group-label-display",
+        "reflect": false,
+        "defaultValue": "GroupLabelDisplayMode.BOTH"
+      },
+      "groups": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<GroupObject>",
+          "resolved": "GroupObject[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "GroupObject": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The list of groups."
-      },
-      "defaultValue": "[]"
-    },
-    "headerIsPersistent": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true the header will stick on top of the table when scrolling."
-      },
-      "attribute": "header-is-persistent",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "isFocusable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "When set to true, clicked-on rows will have a visual feedback."
-      },
-      "attribute": "is-focusable",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "lazyLoadRows": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled."
-      },
-      "attribute": "lazy-load-rows",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "lineBreakCharacter": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky."
-      },
-      "attribute": "line-break-character",
-      "reflect": false,
-      "defaultValue": "'\\n'"
-    },
-    "loadMoreLimit": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets a maximum limit of new records which can be required by the load more functionality."
-      },
-      "attribute": "load-more-limit",
-      "reflect": false,
-      "defaultValue": "1000"
-    },
-    "loadMoreMode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "LoadMoreMode",
-        "resolved": "LoadMoreMode.CONSTANT | LoadMoreMode.CONSTANT_INCREMENT | LoadMoreMode.PROGRESSIVE_THRESHOLD",
-        "references": {
-          "LoadMoreMode": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The list of groups."
+        },
+        "defaultValue": "[]"
+      },
+      "headerIsPersistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true the header will stick on top of the table when scrolling."
+        },
+        "attribute": "header-is-persistent",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "isFocusable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true, clicked-on rows will have a visual feedback."
+        },
+        "attribute": "is-focusable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "lazyLoadRows": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled."
+        },
+        "attribute": "lazy-load-rows",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "lineBreakCharacter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky."
+        },
+        "attribute": "line-break-character",
+        "reflect": false,
+        "defaultValue": "'\\n'"
+      },
+      "loadMoreLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets a maximum limit of new records which can be required by the load more functionality."
+        },
+        "attribute": "load-more-limit",
+        "reflect": false,
+        "defaultValue": "1000"
+      },
+      "loadMoreMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "LoadMoreMode",
+          "resolved": "LoadMoreMode.CONSTANT | LoadMoreMode.CONSTANT_INCREMENT | LoadMoreMode.PROGRESSIVE_THRESHOLD",
+          "references": {
+            "LoadMoreMode": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "loadMoreStep *"
-          }, {
-            "name": "see",
-            "text": "loadMoreLimit"
-          }],
-        "text": "Establish the modality of how many new records will be downloaded.\r\n\r\nThis property is regulated also by loadMoreStep."
-      },
-      "attribute": "load-more-mode",
-      "reflect": false,
-      "defaultValue": "LoadMoreMode.PROGRESSIVE_THRESHOLD"
-    },
-    "loadMoreStep": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "loadMoreMode *"
-          }, {
-            "name": "see",
-            "text": "loadMoreLimit"
-          }],
-        "text": "The number of records which will be requested to be downloaded when clicking on the load more button.\r\n\r\nThis property is regulated also by loadMoreMode."
-      },
-      "attribute": "load-more-step",
-      "reflect": false,
-      "defaultValue": "60"
-    },
-    "pageSelected": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Current selected page set on component load"
-      },
-      "attribute": "page-selected",
-      "reflect": false,
-      "defaultValue": "-1"
-    },
-    "paginatorPos": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "PaginatorPos",
-        "resolved": "PaginatorPos.BOTH | PaginatorPos.BOTTOM | PaginatorPos.TOP",
-        "references": {
-          "PaginatorPos": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "loadMoreStep *"
+            }, {
+              "name": "see",
+              "text": "loadMoreLimit"
+            }],
+          "text": "Establish the modality of how many new records will be downloaded.\r\n\r\nThis property is regulated also by loadMoreStep."
+        },
+        "attribute": "load-more-mode",
+        "reflect": false,
+        "defaultValue": "LoadMoreMode.PROGRESSIVE_THRESHOLD"
+      },
+      "loadMoreStep": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "loadMoreMode *"
+            }, {
+              "name": "see",
+              "text": "loadMoreLimit"
+            }],
+          "text": "The number of records which will be requested to be downloaded when clicking on the load more button.\r\n\r\nThis property is regulated also by loadMoreMode."
+        },
+        "attribute": "load-more-step",
+        "reflect": false,
+        "defaultValue": "60"
+      },
+      "pageSelected": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Current selected page set on component load"
+        },
+        "attribute": "page-selected",
+        "reflect": false,
+        "defaultValue": "-1"
+      },
+      "paginatorPos": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PaginatorPos",
+          "resolved": "PaginatorPos.BOTH | PaginatorPos.BOTTOM | PaginatorPos.TOP",
+          "references": {
+            "PaginatorPos": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the position of the paginator. Available positions: top, bottom or both."
-      },
-      "attribute": "paginator-pos",
-      "reflect": false,
-      "defaultValue": "PaginatorPos.TOP"
-    },
-    "removableColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the possibility to remove the selected column."
-      },
-      "attribute": "removable-columns",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "resizableColumns": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Gives the possibility to resize columns by dragging on their right edge."
-      },
-      "attribute": "resizable-columns",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "rowActions": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<KupDataRowAction>",
-        "resolved": "KupDataRowAction[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "KupDataRowAction": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the position of the paginator. Available positions: top, bottom or both."
+        },
+        "attribute": "paginator-pos",
+        "reflect": false,
+        "defaultValue": "PaginatorPos.TOP"
+      },
+      "removableColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the possibility to remove the selected column."
+        },
+        "attribute": "removable-columns",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "resizableColumns": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Gives the possibility to resize columns by dragging on their right edge."
+        },
+        "attribute": "resizable-columns",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "rowActions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Array<KupDataRowAction>",
+          "resolved": "KupDataRowAction[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "KupDataRowAction": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the actions of the rows."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the actions of the rows."
-      }
-    },
-    "rowsPerPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the number of rows per page to display."
-      },
-      "attribute": "rows-per-page",
-      "reflect": false,
-      "defaultValue": "10"
-    },
-    "scrollOnHover": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Activates the scroll on hover function."
-      },
-      "attribute": "scroll-on-hover",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "SelectionMode",
-        "resolved": "SelectionMode.MULTIPLE | SelectionMode.MULTIPLE_CHECKBOX | SelectionMode.NONE | SelectionMode.SINGLE",
-        "references": {
-          "SelectionMode": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      "rowsPerPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the number of rows per page to display."
+        },
+        "attribute": "rows-per-page",
+        "reflect": false,
+        "defaultValue": "10"
+      },
+      "scrollOnHover": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Activates the scroll on hover function."
+        },
+        "attribute": "scroll-on-hover",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SelectionMode",
+          "resolved": "SelectionMode.MULTIPLE | SelectionMode.MULTIPLE_CHECKBOX | SelectionMode.NONE | SelectionMode.SINGLE",
+          "references": {
+            "SelectionMode": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set the type of the rows selection."
-      },
-      "attribute": "selection",
-      "reflect": false,
-      "defaultValue": "SelectionMode.SINGLE"
-    },
-    "showCustomization": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, displays the button to open the customization panel."
-      },
-      "attribute": "show-customization",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "showFilters": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true enables the column filters."
-      },
-      "attribute": "show-filters",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showGroups": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true enables the column grouping."
-      },
-      "attribute": "show-groups",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showFooter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true shows the footer."
-      },
-      "attribute": "show-footer",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "showGrid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ShowGrid",
-        "resolved": "ShowGrid.COL | ShowGrid.COMPLETE | ShowGrid.NONE | ShowGrid.ROW",
-        "references": {
-          "ShowGrid": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the type of the rows selection."
+        },
+        "attribute": "selection",
+        "reflect": false,
+        "defaultValue": "SelectionMode.SINGLE"
+      },
+      "showCustomization": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to true, displays the button to open the customization panel."
+        },
+        "attribute": "show-customization",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showFilters": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true enables the column filters."
+        },
+        "attribute": "show-filters",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showGroups": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true enables the column grouping."
+        },
+        "attribute": "show-groups",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true shows the footer."
+        },
+        "attribute": "show-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "showGrid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ShowGrid",
+          "resolved": "ShowGrid.COL | ShowGrid.COMPLETE | ShowGrid.NONE | ShowGrid.ROW",
+          "references": {
+            "ShowGrid": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Can be used to customize the grid view of the table."
-      },
-      "attribute": "show-grid",
-      "reflect": false,
-      "defaultValue": "ShowGrid.ROW"
-    },
-    "showHeader": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "namespace",
-            "text": "KupDataTable.showHeader"
-          }],
-        "text": "Enables rendering of the table header."
-      },
-      "attribute": "show-header",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "showLoadMore": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, displays the button to load more records."
-      },
-      "attribute": "show-load-more",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "sort": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "Array<SortObject>",
-        "resolved": "SortObject[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          },
-          "SortObject": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Can be used to customize the grid view of the table."
+        },
+        "attribute": "show-grid",
+        "reflect": false,
+        "defaultValue": "ShowGrid.ROW"
+      },
+      "showHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "namespace",
+              "text": "KupDataTable.showHeader"
+            }],
+          "text": "Enables rendering of the table header."
+        },
+        "attribute": "show-header",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showLoadMore": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to true, displays the button to load more records."
+        },
+        "attribute": "show-load-more",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "sort": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Array<SortObject>",
+          "resolved": "SortObject[]",
+          "references": {
+            "Array": {
+              "location": "global"
+            },
+            "SortObject": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the current sorting options."
-      },
-      "defaultValue": "[]"
-    },
-    "sortableColumnsMutateData": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property\r\nand then fires the event"
-      },
-      "attribute": "sortable-columns-mutate-data",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "sortEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to true enables the sorting of the columns by clicking on the column header."
-      },
-      "attribute": "sort-enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tableHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the height of the table."
-      },
-      "attribute": "table-height",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "tableWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the width of the table."
-      },
-      "attribute": "table-width",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "totals": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "TotalsMap",
-        "resolved": "TotalsMap",
-        "references": {
-          "TotalsMap": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the current sorting options."
+        },
+        "defaultValue": "[]"
+      },
+      "sortableColumnsMutateData": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If set to true, when a column is dragged to be sorted, the component directly mutates the data.columns property\r\nand then fires the event"
+        },
+        "attribute": "sortable-columns-mutate-data",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "sortEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to true enables the sorting of the columns by clicking on the column header."
+        },
+        "attribute": "sort-enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "tableHeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the height of the table."
+        },
+        "attribute": "table-height",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "tableWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the width of the table."
+        },
+        "attribute": "table-width",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "totals": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "TotalsMap",
+          "resolved": "TotalsMap",
+          "references": {
+            "TotalsMap": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the current totals options"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the current totals options"
+      "transpose": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Transposes the data of the data table"
+        },
+        "attribute": "transpose",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    },
-    "transpose": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Transposes the data of the data table"
-      },
-      "attribute": "transpose",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "lazyLoadCells": {},
-    "currentPage": {},
-    "currentRowsPerPage": {},
-    "selectedRows": {},
-    "selectedColumn": {},
-    "columnMenuAnchor": {},
-    "groupState": {},
-    "openedTotalMenu": {},
-    "openedCustomSettings": {},
-    "fontsize": {}
-  }; }
-  static get events() { return [{
-      "method": "kupDidUnload",
-      "name": "kup-datatable-didunload",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When component unload is complete"
-      },
-      "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
-        "references": {
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+    };
+  }
+  static get states() {
+    return {
+      "lazyLoadCells": {},
+      "currentPage": {},
+      "currentRowsPerPage": {},
+      "selectedRows": {},
+      "selectedColumn": {},
+      "columnMenuAnchor": {},
+      "groupState": {},
+      "openedTotalMenu": {},
+      "openedCustomSettings": {},
+      "fontsize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupDidUnload",
+        "name": "kup-datatable-didunload",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When component unload is complete"
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDidLoad",
-      "name": "kup-datatable-didload",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When component load is complete"
-      },
-      "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
-        "references": {
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+      }, {
+        "method": "kupDidLoad",
+        "name": "kup-datatable-didload",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When component load is complete"
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupResetSelectedRows",
-      "name": "kup-datatable-resetselectedrows",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When rows selections reset"
-      },
-      "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
-        "references": {
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+      }, {
+        "method": "kupResetSelectedRows",
+        "name": "kup-datatable-resetselectedrows",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When rows selections reset"
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupRowSelected",
-      "name": "kup-datatable-rowselected",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When a row is selected"
-      },
-      "complexType": {
-        "original": "KupDatatableRowSelectedEventPayload",
-        "resolved": "KupDatatableRowSelectedEventPayload",
-        "references": {
-          "KupDatatableRowSelectedEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupRowSelected",
+        "name": "kup-datatable-rowselected",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When a row is selected"
+        },
+        "complexType": {
+          "original": "KupDatatableRowSelectedEventPayload",
+          "resolved": "KupDatatableRowSelectedEventPayload",
+          "references": {
+            "KupDatatableRowSelectedEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDataTableClick",
-      "name": "kup-datatable-click",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Generic click event on data table."
-      },
-      "complexType": {
-        "original": "KupDatatableClickEventPayload",
-        "resolved": "KupDatatableClickEventPayload",
-        "references": {
-          "KupDatatableClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupDataTableClick",
+        "name": "kup-datatable-click",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Generic click event on data table."
+        },
+        "complexType": {
+          "original": "KupDatatableClickEventPayload",
+          "resolved": "KupDatatableClickEventPayload",
+          "references": {
+            "KupDatatableClickEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDataTableContextMenu",
-      "name": "kup-datatable-contextmenu",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Generic right click event on data table."
-      },
-      "complexType": {
-        "original": "KupDatatableClickEventPayload",
-        "resolved": "KupDatatableClickEventPayload",
-        "references": {
-          "KupDatatableClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupDataTableContextMenu",
+        "name": "kup-datatable-contextmenu",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Generic right click event on data table."
+        },
+        "complexType": {
+          "original": "KupDatatableClickEventPayload",
+          "resolved": "KupDatatableClickEventPayload",
+          "references": {
+            "KupDatatableClickEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDataTableDblClick",
-      "name": "kup-datatable-dblclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Generic double click event on data table."
-      },
-      "complexType": {
-        "original": "KupDatatableClickEventPayload",
-        "resolved": "KupDatatableClickEventPayload",
-        "references": {
-          "KupDatatableClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupDataTableDblClick",
+        "name": "kup-datatable-dblclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Generic double click event on data table."
+        },
+        "complexType": {
+          "original": "KupDatatableClickEventPayload",
+          "resolved": "KupDatatableClickEventPayload",
+          "references": {
+            "KupDatatableClickEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDataTableColumnMenu",
-      "name": "kup-datatable-columnmenu",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted by the column menu card when opened/closed or when a kup-card-event is fired."
-      },
-      "complexType": {
-        "original": "KupDatatableColumnMenuEventPayload",
-        "resolved": "KupDatatableColumnMenuEventPayload",
-        "references": {
-          "KupDatatableColumnMenuEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupDataTableColumnMenu",
+        "name": "kup-datatable-columnmenu",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted by the column menu card when opened/closed or when a kup-card-event is fired."
+        },
+        "complexType": {
+          "original": "KupDatatableColumnMenuEventPayload",
+          "resolved": "KupDatatableColumnMenuEventPayload",
+          "references": {
+            "KupDatatableColumnMenuEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupRowActionClick",
-      "name": "kup-datatable-rowactionclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When a row action is clicked"
-      },
-      "complexType": {
-        "original": "KupDatatableRowActionClickEventPayload",
-        "resolved": "KupDatatableRowActionClickEventPayload",
-        "references": {
-          "KupDatatableRowActionClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupRowActionClick",
+        "name": "kup-datatable-rowactionclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When a row action is clicked"
+        },
+        "complexType": {
+          "original": "KupDatatableRowActionClickEventPayload",
+          "resolved": "KupDatatableRowActionClickEventPayload",
+          "references": {
+            "KupDatatableRowActionClickEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupLoadMoreClick",
-      "name": "kup-datatable-loadmoreclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "KupDatatableLoadMoreClickEventPayload",
-        "resolved": "KupDatatableLoadMoreClickEventPayload",
-        "references": {
-          "KupDatatableLoadMoreClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupLoadMoreClick",
+        "name": "kup-datatable-loadmoreclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupDatatableLoadMoreClickEventPayload",
+          "resolved": "KupDatatableLoadMoreClickEventPayload",
+          "references": {
+            "KupDatatableLoadMoreClickEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupColumnMove",
-      "name": "kup-datatable-columnmove",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fired when columns are moved (sorted)."
-      },
-      "complexType": {
-        "original": "KupDatatableColumnMoveEventPayload",
-        "resolved": "KupDatatableColumnMoveEventPayload",
-        "references": {
-          "KupDatatableColumnMoveEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupColumnMove",
+        "name": "kup-datatable-columnmove",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when columns are moved (sorted)."
+        },
+        "complexType": {
+          "original": "KupDatatableColumnMoveEventPayload",
+          "resolved": "KupDatatableColumnMoveEventPayload",
+          "references": {
+            "KupDatatableColumnMoveEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupColumnRemove",
-      "name": "kup-datatable-columnremove",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event fired when columns are removed (set to hidden)."
-      },
-      "complexType": {
-        "original": "KupDatatableColumnRemoveEventPayload",
-        "resolved": "KupDatatableColumnRemoveEventPayload",
-        "references": {
-          "KupDatatableColumnRemoveEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      }, {
+        "method": "kupColumnRemove",
+        "name": "kup-datatable-columnremove",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when columns are removed (set to hidden)."
+        },
+        "complexType": {
+          "original": "KupDatatableColumnRemoveEventPayload",
+          "resolved": "KupDatatableColumnRemoveEventPayload",
+          "references": {
+            "KupDatatableColumnRemoveEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "closeColumnMenu": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }];
+  }
+  static get methods() {
+    return {
+      "closeColumnMenu": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Closes any opened column menu.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Closes any opened column menu.",
-        "tags": []
-      }
-    },
-    "collapseAll": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "collapseAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Collapses all groups.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Collapses all groups.",
-        "tags": []
-      }
-    },
-    "expandAll": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "deleteRows": {
+        "complexType": {
+          "signature": "(ids?: string[]) => Promise<Array<KupDataTableRow>>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "ids - Array of row ids to delete."
+                }],
+              "text": "- Array of row ids to delete."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataTableRow": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            },
+            "Array": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<KupDataTableRow[]>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "This method will delete rows by id from the data table dataset.",
+          "tags": [{
+              "name": "param",
+              "text": "ids - Array of row ids to delete."
+            }, {
+              "name": "returns",
+              "text": "Deleted rows."
+            }]
+        }
       },
-      "docs": {
-        "text": "Expands all groups.",
-        "tags": []
-      }
-    },
-    "getProps": {
-      "complexType": {
-        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "descriptions - When provided and true, the result will be the list of props with their description."
-              }],
-            "text": "- When provided and true, the result will be the list of props with their description."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "expandAll": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "GenericObject": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<GenericObject>"
+        "docs": {
+          "text": "Expands all groups.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Used to retrieve component's props values.",
-        "tags": [{
-            "name": "param",
-            "text": "descriptions - When provided and true, the result will be the list of props with their description."
-          }, {
-            "name": "returns",
-            "text": "List of props as object, each key will be a prop."
-          }]
-      }
-    },
-    "getSelectedRows": {
-      "complexType": {
-        "signature": "() => Promise<Array<KupDataTableRow>>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "KupDataTableRow": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           },
-          "Array": {
-            "location": "global"
-          }
+          "return": "Promise<GenericObject>"
         },
-        "return": "Promise<KupDataTableRow[]>"
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
       },
-      "docs": {
-        "text": "This method will get the selected rows of the component.",
-        "tags": []
-      }
-    },
-    "hideColumn": {
-      "complexType": {
-        "signature": "(column: KupDataColumn) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "column - Column to hide."
-              }],
-            "text": "- Column to hide."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "getSelectedRows": {
+        "complexType": {
+          "signature": "() => Promise<Array<KupDataTableRow>>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataTableRow": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            },
+            "Array": {
+              "location": "global"
+            }
           },
-          "KupDataColumn": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
-          }
+          "return": "Promise<KupDataTableRow[]>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "This method will get the selected rows of the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Hides the given column.",
-        "tags": [{
-            "name": "param",
-            "text": "column - Column to hide."
-          }]
-      }
-    },
-    "newColumn": {
-      "complexType": {
-        "signature": "(type: KupDataNewColumnTypes, options: KupDataNewColumnOptions) => Promise<string | KupDataColumn>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "type - Type of the column creation."
-              }],
-            "text": "- Type of the column creation."
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "options - Options of the creation."
-              }],
-            "text": "- Options of the creation."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "KupDataColumn": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
-          },
-          "KupDataNewColumnTypes": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
+      "hideColumn": {
+        "complexType": {
+          "signature": "(column: KupDataColumn) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "column - Column to hide."
+                }],
+              "text": "- Column to hide."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataColumn": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
           },
-          "KupDataNewColumnOptions": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<string | KupDataColumn>"
+        "docs": {
+          "text": "Hides the given column.",
+          "tags": [{
+              "name": "param",
+              "text": "column - Column to hide."
+            }]
+        }
       },
-      "docs": {
-        "text": "Invokes the KupData API for column creation, then refreshes the component in case no errors were catched.",
-        "tags": [{
-            "name": "param",
-            "text": "type - Type of the column creation."
-          }, {
-            "name": "param",
-            "text": "options - Options of the creation."
-          }, {
-            "name": "returns",
-            "text": "Returns the new column created or a string containing the error message if something went wrong."
-          }]
-      }
-    },
-    "openColumnMenu": {
-      "complexType": {
-        "signature": "(column: string) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "column - Name of the column."
-              }],
-            "text": "- Name of the column."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "CustomEvent": {
-            "location": "global"
-          },
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+      "newColumn": {
+        "complexType": {
+          "signature": "(type: KupDataNewColumnTypes, options: KupDataNewColumnOptions) => Promise<string | KupDataColumn>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "type - Type of the column creation."
+                }],
+              "text": "- Type of the column creation."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "options - Options of the creation."
+                }],
+              "text": "- Options of the creation."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataColumn": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            },
+            "KupDataNewColumnTypes": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            },
+            "KupDataNewColumnOptions": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
           },
-          "KupCardEventPayload": {
-            "location": "import",
-            "path": "../kup-card/kup-card-declarations"
-          }
+          "return": "Promise<string | KupDataColumn>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Invokes the KupData API for column creation, then refreshes the component in case no errors were catched.",
+          "tags": [{
+              "name": "param",
+              "text": "type - Type of the column creation."
+            }, {
+              "name": "param",
+              "text": "options - Options of the creation."
+            }, {
+              "name": "returns",
+              "text": "Returns the new column created or a string containing the error message if something went wrong."
+            }]
+        }
       },
-      "docs": {
-        "text": "Opens the column menu of the given column.",
-        "tags": [{
-            "name": "param",
-            "text": "column - Name of the column."
-          }]
-      }
-    },
-    "refresh": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "openColumnMenu": {
+        "complexType": {
+          "signature": "(column: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "column - Name of the column."
+                }],
+              "text": "- Name of the column."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "CustomEvent": {
+              "location": "global"
+            },
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            },
+            "KupCardEventPayload": {
+              "location": "import",
+              "path": "../kup-card/kup-card-declarations"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Opens the column menu of the given column.",
+          "tags": [{
+              "name": "param",
+              "text": "column - Name of the column."
+            }]
+        }
       },
-      "docs": {
-        "text": "This method is used to trigger a new render of the component.",
-        "tags": []
-      }
-    },
-    "resizeCallback": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "This method is invoked by KupManager whenever the component changes size.",
-        "tags": []
-      }
-    },
-    "setFocus": {
-      "complexType": {
-        "signature": "(column: string, rowId: string) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "column - Name of the column."
-              }],
-            "text": "- Name of the column."
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "rowId - Id of the row."
-              }],
-            "text": "- Id of the row."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "resizeCallback": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "This method is invoked by KupManager whenever the component changes size.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets the focus on an editable table cell.",
-        "tags": [{
-            "name": "param",
-            "text": "column - Name of the column."
-          }, {
-            "name": "param",
-            "text": "rowId - Id of the row."
-          }]
-      }
-    },
-    "setProps": {
-      "complexType": {
-        "signature": "(props: GenericObject) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "props - Object containing props that will be set to the component."
-              }],
-            "text": "- Object containing props that will be set to the component."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "setCellValue": {
+        "complexType": {
+          "signature": "(columnName: string, rowId: string, value: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "columnName - Name of the column."
+                }],
+              "text": "- Name of the column."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "rowId - Id of the row."
+                }],
+              "text": "- Id of the row."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "value - Value to set."
+                }],
+              "text": "- Value to set."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "GenericObject": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets the cell value in a table cell.",
+          "tags": [{
+              "name": "param",
+              "text": "columnName - Name of the column."
+            }, {
+              "name": "param",
+              "text": "rowId - Id of the row."
+            }, {
+              "name": "param",
+              "text": "value - Value to set."
+            }]
+        }
       },
-      "docs": {
-        "text": "Sets the props to the component.",
-        "tags": [{
-            "name": "param",
-            "text": "props - Object containing props that will be set to the component."
-          }]
-      }
-    },
-    "setSelectedRows": {
-      "complexType": {
-        "signature": "(rowsIdentifiers: string[] | number[], emitEvent?: boolean) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
-              }],
-            "text": "- Array of ids (dataset) or indexes (rendered rows)."
-          }, {
-            "tags": [{
-                "name": "param",
-                "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
-              }],
-            "text": "- The event will always be emitted unless emitEvent is set to false."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "setFocus": {
+        "complexType": {
+          "signature": "(column: string, rowId: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "column - Name of the column."
+                }],
+              "text": "- Name of the column."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "rowId - Id of the row."
+                }],
+              "text": "- Id of the row."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets the focus on an editable table cell.",
+          "tags": [{
+              "name": "param",
+              "text": "column - Name of the column."
+            }, {
+              "name": "param",
+              "text": "rowId - Id of the row."
+            }]
+        }
       },
-      "docs": {
-        "text": "This method will set the selected rows of the component.",
-        "tags": [{
-            "name": "param",
-            "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
-          }, {
-            "name": "param",
-            "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
-          }]
-      }
-    },
-    "getInternalState": {
-      "complexType": {
-        "signature": "() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "GroupObject": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           },
-          "GenericFilter": {
-            "location": "import",
-            "path": "../../utils/filters/filters-declarations"
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      },
+      "setSelectedRows": {
+        "complexType": {
+          "signature": "(rowsIdentifiers: string[] | number[], emitEvent?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
+                }],
+              "text": "- Array of ids (dataset) or indexes (rendered rows)."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+                }],
+              "text": "- The event will always be emitted unless emitEvent is set to false."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
           },
-          "KupDataTableDataset": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>"
+        "docs": {
+          "text": "This method will set the selected rows of the component.",
+          "tags": [{
+              "name": "param",
+              "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
+            }, {
+              "name": "param",
+              "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+            }]
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "defaultSortingFunction": {
-      "complexType": {
-        "signature": "(columns: KupDataColumn[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise<KupDataColumn[]>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "getInternalState": {
+        "complexType": {
+          "signature": "() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GroupObject": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            },
+            "GenericFilter": {
+              "location": "import",
+              "path": "../../utils/filters/filters-declarations"
+            },
+            "KupDataTableDataset": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
           },
-          "KupDataColumn": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
-          }
+          "return": "Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>"
         },
-        "return": "Promise<KupDataColumn[]>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
+      "defaultSortingFunction": {
+        "complexType": {
+          "signature": "(columns: KupDataColumn[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise<KupDataColumn[]>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupDataColumn": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
+          },
+          "return": "Promise<KupDataColumn[]>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "rootElement"; }
-  static get watchers() { return [{
-      "propName": "rowsPerPage",
-      "methodName": "rowsPerPageHandler"
-    }, {
-      "propName": "expandGroups",
-      "methodName": "expandGroupsHandler"
-    }, {
-      "propName": "filters",
-      "methodName": "filtersChanged"
-    }, {
-      "propName": "globalFilterValue",
-      "methodName": "filtersChanged"
-    }, {
-      "propName": "sort",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "rowsPerPage",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "totals",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "currentPage",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "currentRowsPerPage",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "data",
-      "methodName": "identifyAndInitRows"
-    }, {
-      "propName": "groups",
-      "methodName": "recalculateRowsAndUndoSelections"
-    }, {
-      "propName": "fixedColumns",
-      "methodName": "controlFixedRowsColumns"
-    }, {
-      "propName": "fixedRows",
-      "methodName": "controlFixedRowsColumns"
-    }, {
-      "propName": "transpose",
-      "methodName": "recalculateData"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "rowsPerPage",
+        "methodName": "rowsPerPageHandler"
+      }, {
+        "propName": "expandGroups",
+        "methodName": "expandGroupsHandler"
+      }, {
+        "propName": "filters",
+        "methodName": "filtersChanged"
+      }, {
+        "propName": "globalFilterValue",
+        "methodName": "filtersChanged"
+      }, {
+        "propName": "sort",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "rowsPerPage",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "totals",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "currentPage",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "currentRowsPerPage",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "data",
+        "methodName": "identifyAndInitRows"
+      }, {
+        "propName": "groups",
+        "methodName": "recalculateRowsAndUndoSelections"
+      }, {
+        "propName": "fixedColumns",
+        "methodName": "controlFixedRowsColumns"
+      }, {
+        "propName": "fixedRows",
+        "methodName": "controlFixedRowsColumns"
+      }, {
+        "propName": "transpose",
+        "methodName": "recalculateData"
+      }];
+  }
 }