@sme.up/ketchup 4.2.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -4,7 +4,7 @@ import { getColumnByName } from '../../utils/cell-utils';
 import { calcTotals, normalizeRows, filterRows, groupRows, paginateRows, sortRows, } from './kup-data-table-helper';
 import { numberToFormattedStringNumber, identify, deepEqual, getProps, setProps, } from '../../utils/utils';
 import { ItemsDisplayMode, } from '../kup-list/kup-list-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupDataTableState } from './kup-data-table-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { FImage } from '../../f-components/f-image/f-image';
@@ -12,26 +12,25 @@ import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FChip } from '../../f-components/f-chip/f-chip';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { FChipType, } from '../../f-components/f-chip/f-chip-declarations';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
 import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
 import { FiltersColumnMenu } from '../../utils/filters/filters-column-menu';
 import { FiltersRows } from '../../utils/filters/filters-rows';
-import { kupDynamicPositionAttribute, KupDynamicPositionPlacement, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { kupDynamicPositionAttribute, KupDynamicPositionPlacement, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupCardFamily, } from '../kup-card/kup-card-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupLanguageDensity, KupLanguageFontsize, KupLanguageGeneric, KupLanguageGrid, KupLanguageRow, KupLanguageSearch, KupLanguageTotals, } from '../../utils/kup-language/kup-language-declarations';
-import { KupThemeColorValues, KupThemeIconValues, } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupLanguageDensity, KupLanguageFontsize, KupLanguageGeneric, KupLanguageGrid, KupLanguageRow, KupLanguageSearch, KupLanguageTotals, } from '../../managers/kup-language/kup-language-declarations';
+import { KupThemeColorValues, KupThemeIconValues, } from '../../managers/kup-theme/kup-theme-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupDatesFormats } from '../../utils/kup-dates/kup-dates-declarations';
-import { kupDragActiveAttr, KupDragEffect, kupDraggableCellAttr, kupDraggableColumnAttr, KupDropEventTypes, KupPointerEventTypes, } from '../../utils/kup-interact/kup-interact-declarations';
+import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
+import { kupDragActiveAttr, KupDragEffect, kupDraggableCellAttr, kupDraggableColumnAttr, KupDropEventTypes, KupPointerEventTypes, } from '../../managers/kup-interact/kup-interact-declarations';
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
+import { FPaginator } from '../../f-components/f-paginator/f-paginator';
+import { pageChange, rowsPerPageChange, } from '../../f-components/f-paginator/f-paginator-utils';
+import { KupDataNewColumnTypes, } from '../../managers/kup-data/kup-data-declarations';
 export class KupDataTable {
   constructor() {
-    //////////////////////////////
-    // Begin state stuff
-    //////////////////////////////
     this.stateId = '';
     this.state = new KupDataTableState();
     /**
@@ -64,10 +63,20 @@ export class KupDataTable {
      * Defines the label to show when the table is empty.
      */
     this.emptyDataLabel = null;
+    /**
+     * Enables the choice to set formulas on columns by dragging them into different columns.
+     * @default true
+     */
+    this.enableColumnsFormula = true;
     /**
      * Enables the extracolumns add buttons.
      */
     this.enableExtraColumns = true;
+    /**
+     * Enables the merging of columns by dragging them into different columns.
+     * @default true
+     */
+    this.enableMergeColumns = true;
     /**
      * Enables the sorting of columns by dragging them into different columns.
      */
@@ -256,11 +265,6 @@ export class KupDataTable {
     this.openedTotalMenu = null;
     this.openedCustomSettings = false;
     this.fontsize = 'medium';
-    /**
-     * This is a flag to be used for the draggable columns to force rerender
-     * by changing the internal state.
-     */
-    this.triggerColumnSortRerender = false;
     this.rowsLength = 0;
     this.paginatedRowsLength = 0;
     /**
@@ -296,14 +300,12 @@ export class KupDataTable {
     this.removeDropareaRef = null;
     this.groupsDropareaRef = null;
     this.clickCb = null;
-    /**
-     * Reference to the row detail card.
-     */
+    this.clickCbCustomPanel = null;
+    this.clickCbDropCard = null;
     this.detailCard = null;
-    /**
-     * Reference to the column menu card.
-     */
     this.columnMenuCard = null;
+    this.columnDropCard = null;
+    this.columnDropCardAnchor = null;
     this.stickyHeaderPosition = () => {
       if (this.tableRef) {
         if (this.tableIntersecting) {
@@ -603,6 +605,33 @@ export class KupDataTable {
   async getProps(descriptions) {
     return getProps(this, KupDataTableProps, descriptions);
   }
+  /**
+   * Hides the given column.
+   * @param {KupDataColumn} column - Column to hide.
+   */
+  async hideColumn(column) {
+    this.kupManager.data.column.hide(this.data, [column.name]);
+    this.kupColumnRemove.emit({
+      comp: this,
+      id: this.rootElement.id,
+      column: column,
+    });
+    this.refresh();
+  }
+  /**
+   * Invokes the KupData API for column creation, then refreshes the component in case no errors were catched.
+   * @param {KupDataNewColumnTypes} type - Type of the column creation.
+   * @param {KupDataNewColumnOptions} options - Options of the creation.
+   * @returns {string|KupDataColumn} Returns the new column created or a string containing the error message if something went wrong.
+   */
+  async newColumn(type, options) {
+    const result = this.kupManager.data.column.new(this.data, type, options);
+    const error = !!(typeof result === 'string' || result instanceof String);
+    if (!error) {
+      this.refresh();
+    }
+    return result;
+  }
   /**
    * Opens the column menu of the given column.
    * @param {string} column - Name of the column.
@@ -718,6 +747,57 @@ export class KupDataTable {
       });
     }
   }
+  closeDropCard() {
+    this.kupManager.dynamicPosition.stop(this.columnDropCard);
+    this.kupManager.removeClickCallback(this.clickCbDropCard);
+    this.columnDropCard.remove();
+    this.columnDropCard = null;
+  }
+  createDropCard(starter, receiving) {
+    if (this.columnDropCard) {
+      this.closeDropCard();
+    }
+    this.columnDropCard = document.createElement('kup-card');
+    this.columnDropCard.data = {
+      options: {
+        data: this.data,
+        enableFormula: this.enableColumnsFormula,
+        enableMerge: this.enableMergeColumns,
+        enableMove: this.enableSortableColumns,
+        receivingColumn: receiving,
+        starterColumn: starter,
+        formulaCb: () => {
+          this.closeDropCard();
+          this.refresh();
+        },
+        mergeCb: () => {
+          this.newColumn(KupDataNewColumnTypes.CONCATENATE, {
+            columns: [receiving.name, starter.name],
+          });
+          this.closeDropCard();
+        },
+        moveCb: () => {
+          this.handleColumnSort(receiving, starter);
+          this.closeDropCard();
+        },
+      },
+    };
+    this.columnDropCard.layoutFamily = KupCardFamily.BUILT_IN;
+    this.columnDropCard.layoutNumber = 3;
+    this.columnDropCard.isMenu = true;
+    this.columnDropCard.sizeX = '280px';
+    this.columnDropCard.sizeY = 'auto';
+    this.kupManager.dynamicPosition.register(this.columnDropCard, this.columnDropCardAnchor, 0, KupDynamicPositionPlacement.AUTO, true);
+    this.kupManager.dynamicPosition.start(this.columnDropCard);
+    this.clickCbDropCard = {
+      cb: () => {
+        this.closeDropCard();
+      },
+      el: this.columnDropCard,
+    };
+    this.kupManager.addClickCallback(this.clickCbDropCard, true);
+    this.columnDropCard.menuVisible = true;
+  }
   calculateData() {
     if (!this.transpose) {
       // restore
@@ -734,7 +814,7 @@ export class KupDataTable {
     // transpose
     this.originalData = Object.assign({}, this.data);
     if (this.data.columns.length > 0) {
-      this.data = this.getTransposedData(this.data.columns[0]);
+      this.data = this.getTransposedData(this.data.columns[0].name);
     }
   }
   switchToTotalsMatrix() {
@@ -867,85 +947,10 @@ export class KupDataTable {
     }
   }
   getTransposedData(column) {
-    const transposedData = {};
-    // TODO manage better the filters, this is just a fix in order to release the function
     if (column) {
       this.filters = {};
     }
-    // calc columns
-    const columns = [];
-    // first item
-    let firstHead = null;
-    if (column) {
-      firstHead = column;
-      columns.push(firstHead);
-      this.data.rows.forEach((row) => {
-        columns.push(this.getColumnFromCell(row.cells[firstHead.name], row.id));
-      });
-    }
-    else {
-      firstHead = { name: fieldColumn.toUpperCase(), title: fieldColumn };
-      columns.push(firstHead);
-      for (let index = 0; index < this.data.rows.length; index++) {
-        columns.push({
-          name: this.data.rows[index].id,
-          title: '#' + index,
-        });
-      }
-    }
-    // fill columns with the cells in the first original column
-    // set columns
-    transposedData.columns = columns;
-    // calc rows
-    const rows = [];
-    for (let index = column ? 1 : 0; index < this.data.columns.length; index++) {
-      const oldColumn = this.data.columns[index];
-      const cells = {};
-      // set first cell from previous columns
-      // TODO set obj? like this --> obj: oldColumn.obj
-      cells[firstHead.name] = {
-        value: oldColumn.title,
-      };
-      for (let index = 1; index < transposedData.columns.length; index++) {
-        const newColumn = transposedData.columns[index];
-        const oldRow = this.data.rows[index - 1];
-        const cellName = column ? newColumn.name : oldRow.id;
-        cells[cellName] = oldRow.cells[oldColumn.name];
-        if (oldColumn.icon && !cells[cellName].icon) {
-          cells[cellName].icon = oldColumn.icon;
-        }
-        if (oldColumn.shape && !cells[cellName].shape) {
-          cells[cellName].shape = oldColumn.shape;
-        }
-      }
-      // If a record is key and no column argument is provided, it will be placed on top
-      if (!column && oldColumn.isKey) {
-        rows.unshift({
-          id: String(index),
-          cells,
-          name: oldColumn.name,
-        });
-      }
-      else {
-        rows.push({
-          id: String(index),
-          cells,
-          name: oldColumn.name,
-        });
-      }
-    }
-    // set rows
-    transposedData.rows = rows;
-    // return
-    return transposedData;
-  }
-  getColumnFromCell(cell, id) {
-    const title = cell.displayedValue ? cell.displayedValue : cell.value;
-    // TODO set obj? like this --> obj: cell.obj
-    return {
-      name: cell.value + '_' + id,
-      title,
-    };
+    return this.kupManager.data.transpose(this.data, column);
   }
   updateStickyHeaderSize() {
     const navBar = document.querySelectorAll('.header')[0];
@@ -1108,13 +1113,15 @@ export class KupDataTable {
           drop: (e) => {
             const draggedTh = e.relatedTarget;
             const deleted = getColumnByName(this.getColumns(), draggedTh.dataset.column);
-            this.handleColumnRemove(deleted);
+            this.hideColumn(deleted);
             this.tableRef.removeAttribute(kupDragActiveAttr);
           },
         });
       }
     }
-    if (this.enableSortableColumns) {
+    if (this.enableSortableColumns ||
+      this.enableMergeColumns ||
+      this.enableColumnsFormula) {
       const dataCb = (e) => {
         const draggable = e.target;
         return {
@@ -1128,11 +1135,28 @@ export class KupDataTable {
         };
       };
       const dropCb = (e) => {
+        const onlyMerge = !!(!this.enableSortableColumns &&
+          !this.enableColumnsFormula &&
+          this.enableMergeColumns);
+        const onlySort = !!(this.enableSortableColumns &&
+          !this.enableColumnsFormula &&
+          !this.enableMergeColumns);
         const draggable = e.relatedTarget;
-        const sorted = draggable.kupDragDrop.column;
+        const starter = draggable.kupDragDrop.column;
         const receiving = getColumnByName(this.getColumns(), e.target.dataset.column);
-        if (receiving && sorted) {
-          this.handleColumnSort(receiving, sorted);
+        this.columnDropCardAnchor = e.target;
+        if (receiving && starter) {
+          if (onlySort) {
+            this.handleColumnSort(receiving, starter);
+          }
+          else if (onlyMerge) {
+            this.newColumn(KupDataNewColumnTypes.CONCATENATE, {
+              columns: [receiving.name, starter.name],
+            });
+          }
+          else {
+            this.createDropCard(starter, receiving);
+          }
         }
         this.tableRef.removeAttribute(kupDragActiveAttr);
       };
@@ -1288,11 +1312,9 @@ export class KupDataTable {
     }
   }
   customizePanelPosition() {
-    if (this.customizeTopButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef);
-    }
-    if (this.customizeBottomButtonRef) {
-      this.kupManager.dynamicPosition.register(this.customizeBottomPanelRef, this.customizeBottomButtonRef);
+    if (this.customizeTopButtonRef &&
+      !this.kupManager.dynamicPosition.isRegistered(this.customizeTopPanelRef)) {
+      this.kupManager.dynamicPosition.register(this.customizeTopPanelRef, this.customizeTopButtonRef, 0, KupDynamicPositionPlacement.BOTTOM, true);
     }
   }
   rowsPointLength() {
@@ -1424,7 +1446,9 @@ export class KupDataTable {
   getEventPath(e) {
     let path = [];
     let currentEl = e.target;
-    while (currentEl !== this.rootElement && currentEl !== document.body) {
+    while (currentEl &&
+      currentEl !== this.rootElement &&
+      currentEl !== document.body) {
       path.push(currentEl);
       currentEl = currentEl.parentNode
         ? currentEl.parentNode
@@ -1466,7 +1490,7 @@ export class KupDataTable {
   }
   /**
    * Opens a card containing the detail of the given row.
-   * @param {Row} row - Row for which the detail was requested.
+   * @param {KupDataTableRow} row - Row for which the detail was requested.
    * @param {number} x - Initial x coordinates of the card.
    * @param {number} y - Initial y coordinates of the card.
    * @private
@@ -1533,7 +1557,7 @@ export class KupDataTable {
     // Setting up icons
     let keyCell = null;
     for (let index = 0; index < rows.length; index++) {
-      const column = this.data.columns.find((x) => x.name === rows[index].name);
+      const column = this.data.columns.find((x) => x.name === rows[index].transposedColumnName);
       if (!column) {
         this.kupManager.debug.logMessage(this, 'Column not found on row name (' + column + ')!', KupDebugCategory.WARNING);
         return;
@@ -1929,6 +1953,7 @@ export class KupDataTable {
     const numberOfPages = Math.ceil(numberOfRows / this.currentRowsPerPage);
     if (this.currentPage > numberOfPages) {
       // reset page
+      this.currentPage = 1;
       this.resetCurrentPage();
     }
   }
@@ -2067,12 +2092,18 @@ export class KupDataTable {
       this.globalFilterValue = '';
     }
   }
-  handlePageChanged({ detail }) {
-    this.currentPage = detail.newPage;
+  handlePageChange(pageNumber) {
+    const newPage = pageChange(pageNumber, this.rowsLength, this.currentRowsPerPage);
+    if (newPage) {
+      this.currentPage = newPage;
+    }
   }
-  handleRowsPerPageChanged({ detail }) {
-    this.currentRowsPerPage = detail.newRowsPerPage;
-    this.adjustPaginator();
+  handleRowsPerPageChange(rowsNumber) {
+    const newRows = rowsPerPageChange(rowsNumber, this.rowsLength);
+    if (newRows) {
+      this.currentRowsPerPage = newRows;
+      this.adjustPaginator();
+    }
   }
   onRowClick(row, td, emitEvent) {
     // selecting row
@@ -2101,7 +2132,9 @@ export class KupDataTable {
     // find clicked column
     const clickedColumn = td.dataset.column;
     // selecting clicked column
-    if (this.selection !== SelectionMode.NONE && clickedColumn) {
+    if (!row.unselectable &&
+      this.selection !== SelectionMode.NONE &&
+      clickedColumn) {
       this.deselectColumn(this.selectedColumn);
       this.selectedColumn = clickedColumn;
       this.selectColumn(this.selectedColumn);
@@ -2340,6 +2373,12 @@ export class KupDataTable {
       col.title === sortedColumn.title);
     // Moves the sortedColumn into the correct position
     if (this.sortableColumnsMutateData) {
+      this.kupColumnMove.emit({
+        comp: this,
+        id: this.rootElement.id,
+        sourceColumn: this.data.columns[sortedColIndex],
+        targetColumn: this.data.columns[receivingColIndex],
+      });
       this.moveSortedColumns(this.data.columns, receivingColIndex, sortedColIndex);
     }
   }
@@ -2352,7 +2391,7 @@ export class KupDataTable {
   moveSortedColumns(columns, receivingColumnIndex, sortedColumnIndex) {
     const remove = columns.splice(sortedColumnIndex, 1);
     columns.splice(receivingColumnIndex, 0, remove[0]);
-    this.triggerColumnSortRerender = !this.triggerColumnSortRerender;
+    this.refresh();
   }
   async defaultSortingFunction(columns, receivingColumnIndex, sortedColumnIndex, useNewObject = false) {
     const toSort = !useNewObject ? columns : [...columns];
@@ -2467,7 +2506,7 @@ export class KupDataTable {
           }
         }
       }
-      return (h("th", { ref: (el) => this.thRefs.push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle },
+      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" },
@@ -3026,11 +3065,6 @@ export class KupDataTable {
       return h(FImage, Object.assign({}, props));
     });
   }
-  renderLoadMoreButton(isSlotted = true) {
-    return (h("kup-button", { styling: FButtonStyling.FLAT, class: "load-more-button", label: this.kupManager.language.translate(KupLanguageGeneric.LOAD_MORE), icon: "plus", slot: isSlotted ? 'more-results' : null, "onkup-button-click": () => {
-        this.onLoadMoreClick();
-      } }));
-  }
   onCustomSettingsClick() {
     if (!this.openedCustomSettings) {
       this.openCustomSettings();
@@ -3040,26 +3074,39 @@ export class KupDataTable {
     }
   }
   openCustomSettings() {
-    this.customizeTopPanelRef.classList.add('visible');
+    this.customizeTopPanelRef.menuVisible = true;
     this.customizeTopButtonRef.classList.add('toggled');
     this.kupManager.dynamicPosition.start(this.customizeTopPanelRef);
     this.openedCustomSettings = true;
+    if (!this.clickCbCustomPanel) {
+      this.clickCbCustomPanel = {
+        cb: () => {
+          this.closeCustomSettings();
+        },
+        el: this.customizeTopPanelRef,
+      };
+    }
+    this.kupManager.addClickCallback(this.clickCbCustomPanel, true);
   }
   closeCustomSettings() {
     this.customizeTopButtonRef.classList.remove('toggled');
     if (this.customizeTopPanelRef == null) {
       return;
     }
-    this.customizeTopPanelRef.classList.remove('visible');
-    this.kupManager.dynamicPosition.stop(this.customizeTopPanelRef);
+    this.customizeTopPanelRef.menuVisible = false;
     this.openedCustomSettings = false;
+    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("kup-paginator", { id: top ? 'top-paginator' : 'bottom-paginator', max: this.rowsLength, perPage: this.rowsPerPage, selectedPerPage: this.currentRowsPerPage, currentPage: this.currentPage, "onkup-paginator-pagechanged": (e) => this.handlePageChanged(e), "onkup-paginator-rowsperpagechanged": (e) => this.handleRowsPerPageChanged(e) })) : null,
-        this.showLoadMore ? this.renderLoadMoreButton() : null)));
+      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)));
   }
   renderCustomizePanel() {
     let density = undefined;
@@ -3076,9 +3123,9 @@ export class KupDataTable {
         totalsMatrix = this.renderTotalsMatrix();
       }
     }
-    return (h("div", { class: "kup-menu customize-panel", ref: (el) => {
+    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,
@@ -3115,16 +3162,6 @@ export class KupDataTable {
       +this.kupManager.dynamicPosition.stop(this.dropareaRef);
     }
   }
-  handleColumnRemove(column2remove) {
-    // Get sorted column current position
-    this.getVisibleColumns();
-    const columnX = this.getVisibleColumns().find((col) => col.name === column2remove.name &&
-      col.title === column2remove.title);
-    if (columnX) {
-      columnX.visible = false;
-      this.triggerColumnSortRerender = !this.triggerColumnSortRerender;
-    }
-  }
   handleColumnGroup(column2group) {
     // Get sorted column current position
     this.getVisibleColumns();
@@ -3141,8 +3178,7 @@ export class KupDataTable {
       if (!found) {
         this.groups.push({ column: columnX.name, visible: true });
         this.groups = [...this.groups];
-        this.triggerColumnSortRerender =
-          !this.triggerColumnSortRerender;
+        this.refresh();
       }
     }
   }
@@ -3365,8 +3401,8 @@ export class KupDataTable {
         const column = getColumnByName(this.getColumns(), group.column);
         if (column) {
           const a = {
-            label: column.title,
-            value: column.name,
+            value: column.title,
+            id: column.name,
             checked: true,
           };
           return a;
@@ -3480,6 +3516,9 @@ export class KupDataTable {
     if (dynamicPositionElements.length > 0) {
       this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
     }
+    if (this.customizeTopPanelRef) {
+      this.customizeTopPanelRef.remove();
+    }
     if (this.columnMenuCard) {
       this.columnMenuCard.remove();
     }
@@ -3577,12 +3616,12 @@ export class KupDataTable {
     },
     "data": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "TableData",
-        "resolved": "TableData",
+        "original": "KupDataTableDataset",
+        "resolved": "KupDataTableDataset",
         "references": {
-          "TableData": {
+          "KupDataTableDataset": {
             "location": "import",
             "path": "./kup-data-table-declarations"
           }
@@ -3620,7 +3659,7 @@ export class KupDataTable {
     },
     "dragEnabled": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -3656,7 +3695,7 @@ export class KupDataTable {
     },
     "editableData": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -3693,6 +3732,27 @@ export class KupDataTable {
       "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,
@@ -3711,6 +3771,27 @@ export class KupDataTable {
       "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,
@@ -4138,15 +4219,15 @@ export class KupDataTable {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Array<RowAction>",
-        "resolved": "RowAction[]",
+        "original": "Array<KupDataRowAction>",
+        "resolved": "KupDataRowAction[]",
         "references": {
           "Array": {
             "location": "global"
           },
-          "RowAction": {
+          "KupDataRowAction": {
             "location": "import",
-            "path": "./kup-data-table-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         }
       },
@@ -4572,7 +4653,7 @@ export class KupDataTable {
     },
     "transpose": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -4599,8 +4680,7 @@ export class KupDataTable {
     "groupState": {},
     "openedTotalMenu": {},
     "openedCustomSettings": {},
-    "fontsize": {},
-    "triggerColumnSortRerender": {}
+    "fontsize": {}
   }; }
   static get events() { return [{
       "method": "kupDidUnload",
@@ -4822,6 +4902,46 @@ export class KupDataTable {
           }
         }
       }
+    }, {
+      "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"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "closeColumnMenu": {
@@ -4904,6 +5024,84 @@ export class KupDataTable {
           }]
       }
     },
+    "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"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "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"
+          },
+          "KupDataNewColumnOptions": {
+            "location": "import",
+            "path": "../../managers/kup-data/kup-data-declarations"
+          }
+        },
+        "return": "Promise<string | KupDataColumn>"
+      },
+      "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>",
@@ -5071,7 +5269,7 @@ export class KupDataTable {
     },
     "getInternalState": {
       "complexType": {
-        "signature": "() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: TableData; }>",
+        "signature": "() => Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>",
         "parameters": [],
         "references": {
           "Promise": {
@@ -5085,12 +5283,12 @@ export class KupDataTable {
             "location": "import",
             "path": "../../utils/filters/filters-declarations"
           },
-          "TableData": {
+          "KupDataTableDataset": {
             "location": "import",
             "path": "./kup-data-table-declarations"
           }
         },
-        "return": "Promise<{ groups: GroupObject[]; filters: GenericFilter; data: TableData; }>"
+        "return": "Promise<{ groups: GroupObject[]; filters: GenericFilter; data: KupDataTableDataset; }>"
       },
       "docs": {
         "text": "",
@@ -5099,7 +5297,7 @@ export class KupDataTable {
     },
     "defaultSortingFunction": {
       "complexType": {
-        "signature": "(columns: Column[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise<Column[]>",
+        "signature": "(columns: KupDataColumn[], receivingColumnIndex: number, sortedColumnIndex: number, useNewObject?: boolean) => Promise<KupDataColumn[]>",
         "parameters": [{
             "tags": [],
             "text": ""
@@ -5117,12 +5315,12 @@ export class KupDataTable {
           "Promise": {
             "location": "global"
           },
-          "Column": {
+          "KupDataColumn": {
             "location": "import",
-            "path": "./kup-data-table-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         },
-        "return": "Promise<Column[]>"
+        "return": "Promise<KupDataColumn[]>"
       },
       "docs": {
         "text": "",