@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -1,14 +1,12 @@
 import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
-import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, KupDataTableColumnDragType, KupDataTableRowDragType, KupDataTableColumnDragRemoveType, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, totalMenuOpenID, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, KupDataTableColumnDragGroupType, } from './kup-data-table-declarations';
+import { FixedCellsClasses, FixedCellsCSSVarsBase, GroupLabelDisplayMode, LoadMoreMode, PaginatorPos, ShowGrid, SortMode, TotalMode, TotalLabel, KupDataTableProps, fieldColumn, iconColumn, keyColumn, SelectionMode, } from './kup-data-table-declarations';
 import { isRating, isGauge, isKnob, getCellType, getColumnByName, getCellValueForDisplay, } from '../../utils/cell-utils';
-import { calcTotals, normalizeRows, filterRows, groupRows, paginateRows, sortRows, styleHasBorderRadius, styleHasWritingMode, dropHandlersCell, } from './kup-data-table-helper';
+import { calcTotals, normalizeRows, filterRows, groupRows, paginateRows, sortRows, styleHasBorderRadius, styleHasWritingMode, } from './kup-data-table-helper';
 import { stringToNumber, 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 { KupDataTableState } from './kup-data-table-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
-import { setDragEffectAllowed, setKetchupDraggable, setKetchupDroppable, setDragDropPayload, getDragDropPayload, } from '../../utils/drag-and-drop';
-import { dragMultipleImg } from '../../assets/images/drag-multiple';
 import { FImage } from '../../f-components/f-image/f-image';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FChip } from '../../f-components/f-chip/f-chip';
@@ -26,6 +24,7 @@ import { KupLanguageDensity, KupLanguageFontsize, KupLanguageGeneric, KupLanguag
 import { KupThemeColorValues, KupThemeIconValues, } from '../../utils/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';
 export class KupDataTable {
   constructor() {
     //////////////////////////////
@@ -159,6 +158,10 @@ export class KupDataTable {
      * Sets the possibility to remove the selected column.
      */
     this.removableColumns = false;
+    /**
+     * Gives the possibility to resize columns by dragging on their right edge.
+     */
+    this.resizableColumns = true;
     /**
      * Sets the number of rows per page to display.
      */
@@ -244,10 +247,6 @@ export class KupDataTable {
      * name of the column with the opened total menu
      */
     this.openedTotalMenu = null;
-    /**
-     * name of the column with the opened group menu
-     */
-    this.openedGroupMenu = null;
     this.openedCustomSettings = false;
     this.fontsize = 'medium';
     /**
@@ -264,32 +263,6 @@ export class KupDataTable {
     this.renderedRows = [];
     this.loadMoreEventCounter = 0;
     this.loadMoreEventPreviousQuantity = 0;
-    /**
-     * Internal not reactive state used to keep track if a column is being dragged.
-     * @private
-     */
-    this.columnsAreBeingDragged = false;
-    /**
-     * Attribute to set when a column is being dragged on the whole thead element
-     * @const
-     * @default 'columns-dragging'
-     * @private
-     */
-    this.dragFlagAttribute = 'columns-dragging';
-    /**
-     * The string representing the drag over attribute
-     * @const
-     * @default 'drag-over'
-     * @private
-     */
-    this.dragOverAttribute = 'drag-over';
-    /**
-     * The string representing the drag starter attribute to set onto the element
-     * @const
-     * @default 'drag-starter'
-     * @private
-     */
-    this.dragStarterAttribute = 'drag-starter';
     /**
      * contains the original data, used in transposed function
      * @private
@@ -305,8 +278,17 @@ export class KupDataTable {
     this.isRestoringState = false;
     this.totalMenuCoords = null;
     this.clickTimeout = [];
+    this.thRefs = [];
     this.rowsRefs = [];
     this.oldWidth = null;
+    this.hold = false;
+    this.interactableDrag = [];
+    this.interactableDrop = [];
+    this.interactableResize = [];
+    this.interactableTouch = [];
+    this.dropareaRef = null;
+    this.removeDropareaRef = null;
+    this.groupsDropareaRef = null;
     /**
      * Reference to the row detail card.
      */
@@ -627,16 +609,6 @@ export class KupDataTable {
       this.columnMenuCard.layoutNumber = 12;
       this.columnMenuCard.sizeX = 'auto';
       this.columnMenuCard.sizeY = 'auto';
-      this.columnMenuCard.tabIndex = -1;
-      this.columnMenuCard.onclick = (e) => e.stopPropagation();
-      this.columnMenuCard.addEventListener('blur', () => {
-        if (this.kupManager.utilities.lastPointerDownPath.includes(this.columnMenuCard)) {
-          this.columnMenuCard.focus();
-        }
-        else {
-          this.closeColumnMenu();
-        }
-      });
       this.columnMenuCard.addEventListener('kup-card-click', (e) => {
         this.kupDataTableColumnMenu.emit({
           comp: this,
@@ -1010,9 +982,235 @@ export class KupDataTable {
     };
     this.intObserver = new IntersectionObserver(callback, options);
   }
-  didRenderObservers() {
-    if (this.paginatedRowsLength < this.rowsLength && this.lazyLoadRows) {
-      this.intObserver.observe(this.rowsRefs[this.paginatedRowsLength - 1]);
+  didLoadInteractables() {
+    this.interactableTouch.push(this.tableRef);
+    const tapCb = (e) => {
+      if (this.hold) {
+        this.hold = false;
+        return;
+      }
+      switch (e.button) {
+        // left click
+        case 0:
+          // Note: event must be cloned
+          // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+          const clone = {};
+          for (const key in e) {
+            clone[key] = e[key];
+          }
+          this.clickTimeout.push(setTimeout(() => {
+            this.kupDataTableClick.emit({
+              comp: this,
+              id: this.rootElement.id,
+              details: this.clickHandler(clone),
+            });
+          }, 300));
+          break;
+        // right click
+        case 2:
+          this.kupDataTableContextMenu.emit({
+            comp: this,
+            id: this.rootElement.id,
+            details: this.contextMenuHandler(e),
+          });
+          break;
+      }
+    };
+    const doubletapCb = (e) => {
+      switch (e.button) {
+        // left click
+        case 0:
+          for (let index = 0; index < this.clickTimeout.length; index++) {
+            clearTimeout(this.clickTimeout[index]);
+            this.kupManager.debug.logMessage(this, 'Cleared clickHandler timeout(' +
+              this.clickTimeout[index] +
+              ').');
+          }
+          this.clickTimeout = [];
+          this.kupDataTableDblClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            details: this.dblClickHandler(e),
+          });
+          break;
+      }
+    };
+    const holdCb = (e) => {
+      if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+        this.hold = true;
+        this.kupDataTableContextMenu.emit({
+          comp: this,
+          id: this.rootElement.id,
+          details: this.contextMenuHandler(e),
+        });
+      }
+    };
+    this.kupManager.interact.on(this.tableRef, KupPointerEventTypes.TAP, tapCb);
+    this.kupManager.interact.on(this.tableRef, KupPointerEventTypes.DOUBLETAP, doubletapCb);
+    this.kupManager.interact.on(this.tableRef, KupPointerEventTypes.HOLD, holdCb);
+  }
+  didRenderInteractables() {
+    if (this.showGroups) {
+      if (!this.interactableDrop.includes(this.groupsDropareaRef)) {
+        this.interactableDrop.push(this.groupsDropareaRef);
+        this.kupManager.interact.dropzone(this.groupsDropareaRef, {
+          accept: `[${kupDraggableColumnAttr}]`,
+        }, null, {
+          drop: (e) => {
+            const draggedTh = e.relatedTarget;
+            const grouped = getColumnByName(this.getColumns(), draggedTh.dataset.column);
+            this.handleColumnGroup(grouped);
+            this.tableRef.removeAttribute(kupDragActiveAttr);
+          },
+        });
+      }
+    }
+    if (this.removableColumns) {
+      if (!this.interactableDrop.includes(this.removeDropareaRef)) {
+        this.interactableDrop.push(this.removeDropareaRef);
+        this.kupManager.interact.dropzone(this.removeDropareaRef, {
+          accept: `[${kupDraggableColumnAttr}]`,
+        }, null, {
+          drop: (e) => {
+            const draggedTh = e.relatedTarget;
+            const deleted = getColumnByName(this.getColumns(), draggedTh.dataset.column);
+            this.handleColumnRemove(deleted);
+            this.tableRef.removeAttribute(kupDragActiveAttr);
+          },
+        });
+      }
+    }
+    if (this.enableSortableColumns) {
+      const dataCb = (e) => {
+        const draggable = e.target;
+        return {
+          cell: null,
+          column: getColumnByName(this.getVisibleColumns(), draggable.dataset.column),
+          id: this.rootElement.id,
+          multiple: !!(this.selection === SelectionMode.MULTIPLE ||
+            this.selection === SelectionMode.MULTIPLE_CHECKBOX),
+          row: null,
+          selectedRows: this.selectedRows,
+        };
+      };
+      const dropCb = (e) => {
+        const draggable = e.relatedTarget;
+        const sorted = draggable.kupDragDrop.column;
+        const receiving = getColumnByName(this.getColumns(), e.target.dataset.column);
+        if (receiving && sorted) {
+          this.handleColumnSort(receiving, sorted);
+        }
+        this.tableRef.removeAttribute(kupDragActiveAttr);
+      };
+      const startCb = (e) => {
+        const draggable = e.target;
+        this.hideShowColumnDropArea(true, draggable);
+      };
+      const endCb = () => {
+        this.hideShowColumnDropArea(false);
+      };
+      const dropCallbacks = {
+        drop: dropCb,
+      };
+      const dragCallbacks = {
+        start: startCb,
+        end: endCb,
+      };
+      for (let index = 0; index < this.thRefs.length; index++) {
+        const th = this.thRefs[index];
+        if (th && !this.interactableDrag.includes(th)) {
+          this.interactableDrag.push(th);
+          this.kupManager.interact.dropzone(th, {
+            accept: `[${kupDraggableColumnAttr}]`,
+          }, null, dropCallbacks);
+          this.kupManager.interact.draggable(th, {
+            cursorChecker() {
+              return null;
+            },
+            ignoreFrom: '.header-cell__drag-handler',
+          }, {
+            callback: dataCb,
+          }, KupDragEffect.CLONE, dragCallbacks);
+        }
+      }
+    }
+    if (this.resizableColumns) {
+      const moveCb = (e) => {
+        const column = getColumnByName(this.getVisibleColumns(), e.target.dataset.column);
+        column.size = e.rect.width + 'px';
+        this.refresh();
+      };
+      const callbacks = {
+        move: moveCb,
+      };
+      for (let index = 0; index < this.thRefs.length; index++) {
+        const th = this.thRefs[index];
+        if (th && !this.interactableResize.includes(th)) {
+          this.interactableResize.push(th);
+          this.kupManager.interact.resizable(th, {
+            allowFrom: '.header-cell__drag-handler',
+            edges: {
+              left: false,
+              right: true,
+              bottom: false,
+              top: false,
+            },
+            ignoreFrom: '.header-cell__content',
+          }, callbacks);
+        }
+      }
+    }
+    if (this.dragEnabled) {
+      for (let index = 0; index < this.rowsRefs.length; index++) {
+        const row = this.rowsRefs[index];
+        const dataCb = () => {
+          const cellEl = this.rootElement.shadowRoot.querySelector('td:hover');
+          return {
+            cell: cellEl['data-cell'],
+            column: getColumnByName(this.getVisibleColumns(), cellEl.dataset.column),
+            id: this.rootElement.id,
+            multiple: !!(this.selection === SelectionMode.MULTIPLE ||
+              this.selection === SelectionMode.MULTIPLE_CHECKBOX),
+            row: cellEl['data-row'],
+            selectedRows: this.selectedRows,
+          };
+        };
+        if (row && !this.interactableDrag.includes(row)) {
+          this.interactableDrag.push(row);
+          this.kupManager.interact.draggable(row, {
+            allowFrom: 'td',
+            cursorChecker() {
+              return null;
+            },
+          }, {
+            callback: dataCb,
+          }, KupDragEffect.BADGE);
+        }
+      }
+    }
+    if (this.dropEnabled) {
+      const dataCb = () => {
+        const receivingDetails = this.getEventDetails(this.rootElement.shadowRoot.querySelector('td:hover'));
+        return {
+          cell: receivingDetails.cell,
+          column: receivingDetails.column,
+          id: this.rootElement.id,
+          row: receivingDetails.row,
+        };
+      };
+      for (let index = 0; index < this.rowsRefs.length; index++) {
+        const row = this.rowsRefs[index];
+        if (row && !this.interactableDrop.includes(row)) {
+          this.interactableDrop.push(row);
+          this.kupManager.interact.dropzone(row, {
+            accept: `[${kupDraggableCellAttr}]`,
+          }, {
+            callback: dataCb,
+            dispatcher: this.rootElement,
+            type: KupDropEventTypes.DATATABLE,
+          });
+        }
+      }
     }
   }
   didLoadObservers() {
@@ -1023,6 +1221,11 @@ export class KupDataTable {
       this.intObserver.observe(this.theadRef);
     }
   }
+  didRenderObservers() {
+    if (this.paginatedRowsLength < this.rowsLength && this.lazyLoadRows) {
+      this.intObserver.observe(this.rowsRefs[this.paginatedRowsLength - 1]);
+    }
+  }
   didLoadEventHandling() {
     this.tableAreaRef.addEventListener('scroll', () => this.scrollStickyHeader());
   }
@@ -1141,6 +1344,7 @@ export class KupDataTable {
     this.totalMenuPosition();
     this.checkScrollOnHover();
     this.didRenderObservers();
+    this.didRenderInteractables();
     this.hideShowColumnDropArea(false);
     this.setDynPosElements();
     if (this.headerIsPersistent &&
@@ -1160,7 +1364,7 @@ export class KupDataTable {
   componentDidLoad() {
     this.didLoadObservers();
     this.didLoadEventHandling();
-    // automatic row selection
+    this.didLoadInteractables();
     if (this.selectRowsById) {
       this.setSelectedRows(this.selectRowsById);
     }
@@ -1361,12 +1565,15 @@ export class KupDataTable {
     }
     this.detailCard.data = cardData;
     this.detailCard.style.position = 'fixed';
-    this.detailCard.style.left = x + 'px';
-    this.detailCard.style.top = y + 'px';
+    this.detailCard.style.left = '0';
+    this.detailCard.style.top = '0';
+    this.detailCard.setAttribute('data-x', x.toString());
+    this.detailCard.setAttribute('data-y', y.toString());
+    this.detailCard.style.transform = 'translate(' + x + 'px,' + y + 'px)';
     this.rootElement.shadowRoot.append(this.detailCard);
   }
   getEventDetails(el) {
-    const isHeader = !!el.closest('thead'), isBody = !!el.closest('tbody'), isFooter = !!el.closest('tfoot'), td = el.closest('td'), textfield = el.closest('.f-text-field--wrapper'), th = el.closest('th'), tr = el.closest('tr'), filterRemove = el.closest('th .filter-remove');
+    const isHeader = !!el.closest('thead'), isBody = !!el.closest('tbody'), isFooter = !!el.closest('tfoot'), td = el.closest('td'), textfield = el.closest('.f-text-field--wrapper'), th = el.closest('th'), tr = el.closest('tr'), filterRemove = el.closest(`.${KupThemeIconValues.FILTER_REMOVE.replace('--', '')}`);
     let cell = null, column = null, isGroupRow = false, row = null;
     if (isBody) {
       if (tr) {
@@ -1453,7 +1660,6 @@ export class KupDataTable {
     return details;
   }
   contextMenuHandler(e) {
-    e.preventDefault();
     const details = this.getEventDetails(e.target);
     if (details.area === 'header') {
       if (details.th && details.column) {
@@ -1463,7 +1669,7 @@ export class KupDataTable {
     }
     else if (details.area === 'body') {
       const _hasTooltip = details.cell.obj
-        ? this.kupManager.objects.hasTooltip(details.cell.obj)
+        ? !this.kupManager.objects.isEmptyKupObj(details.cell.obj)
         : false;
       if (_hasTooltip &&
         this.showTooltipOnRightClick &&
@@ -1559,12 +1765,6 @@ export class KupDataTable {
   getRows() {
     return this.data && this.data.rows ? this.data.rows : [];
   }
-  // TODO if is not shared, move this in the third parameter of setKetchupDraggable method
-  addMultiSelectDragImageToEvent(event) {
-    const dragImage = document.createElement('img');
-    dragImage.src = dragMultipleImg;
-    event.dataTransfer.setDragImage(dragImage, 0, 0);
-  }
   initRows() {
     this.filterRows();
     this.footer = calcTotals(normalizeRows(this.getColumns(), this.rows), this.totals);
@@ -1974,74 +2174,12 @@ export class KupDataTable {
   closeTotalMenu() {
     this.openedTotalMenu = null;
   }
-  /* TODO
-  private openGroupMenu(column: Column) {
-      this.openedGroupMenu = column.name;
-  }
-
-  private closeGroupMenu() {
-      this.openedGroupMenu = null;
-  }
-  */
   closeMenuAndTooltip() {
     unsetTooltip(this.tooltip);
   }
-  isOpenedTotalMenu() {
-    return this.openedTotalMenu != null;
-  }
   isOpenedTotalMenuForColumn(column) {
     return this.openedTotalMenu === column;
   }
-  isOpenedGroupMenu() {
-    return this.openedGroupMenu != null;
-  }
-  isOpenedGroupMenuForColumn(column) {
-    return this.openedGroupMenu === column;
-  }
-  /**
-   * Type guard needed to be sure that an object returned from composePath() is an HTMLElement with classes
-   * @param node
-   */
-  isHTMLElementFromEventTarget(node) {
-    return node.classList !== undefined;
-  }
-  hasOverlayActions(column) {
-    if (column == null || column.obj == null) {
-      return false;
-    }
-    return this.kupManager.objects.canHaveAutomaticDerivedColumn(column.obj);
-  }
-  onHeaderCellContextMenuClose(event) {
-    // Gets the path of the event (does not work in IE11 or previous)
-    const eventPath = event.composedPath();
-    let fromTotalMenu = false;
-    let fromSameTable = false;
-    // Examine the path
-    for (let elem of eventPath) {
-      // TODO When the footer is considered stable please do this in another dedicated method
-      // check if is the open menu button the element which fired the event
-      // TODO Maybe a better approach would be to use the blur event in order to hide the menu
-      if (elem.id === totalMenuOpenID) {
-        return;
-      }
-      // If we encounter our table we can stop looping the elements
-      if (elem === this.tableAreaRef) {
-        fromSameTable = true;
-        break;
-      }
-      // TODO When the footer is considered stable please do this in another dedicated method
-      // If the event comes from a menu of the table footer
-      if (this.isHTMLElementFromEventTarget(elem) &&
-        elem.classList &&
-        elem.classList.contains('total-menu')) {
-        fromTotalMenu = true;
-      }
-    }
-    // TODO When the footer is considered stable please do this in another dedicated method
-    if (this.isOpenedTotalMenu() && !(fromTotalMenu && fromSameTable)) {
-      this.closeTotalMenu();
-    }
-  }
   onJ4btnClicked(row, column, cell) {
     // Since this function is called with bind, the event from the kup-button gets passed into the arguments array
     const buttonEvent = arguments[3];
@@ -2219,7 +2357,7 @@ export class KupDataTable {
    * @param extraCells - the extra cells rendered into the table
    */
   composeHeaderCellClassAndStyle(columnIndex, extraCells = 0, column) {
-    let columnClass = {}, thStyle = {};
+    let columnClass = { ['header-cell']: true }, thStyle = column.style ? Object.assign({}, column.style) : {};
     if (this.kupManager.objects.isBar(column.obj) ||
       this.kupManager.objects.isButton(column.obj) ||
       this.kupManager.objects.isChart(column.obj) ||
@@ -2229,13 +2367,13 @@ export class KupDataTable {
       this.kupManager.objects.isProgressBar(column.obj) ||
       this.kupManager.objects.isRadio(column.obj) ||
       this.kupManager.objects.isVoCodver(column.obj)) {
-      columnClass.centered = true;
+      columnClass['header-cell--centered'] = true;
     }
     if (this.kupManager.objects.isNumber(column.obj)) {
-      columnClass.number = true;
+      columnClass['header-cell--is-number'] = true;
     }
     if (this.kupManager.objects.isIcon(column.obj)) {
-      columnClass.icon = true;
+      columnClass['header-cell--is-icon'] = true;
     }
     // For fixed cells styles and classes
     const fixedCellStyle = this.composeFixedCellStyleAndClass(columnIndex + 1 + extraCells, 0, extraCells);
@@ -2281,30 +2419,17 @@ export class KupDataTable {
     }
     // Renders normal cells
     const dataColumns = this.getVisibleColumns().map((column, columnIndex) => {
-      // Composes column cell style and classes
       const { columnClass, thStyle } = this.composeHeaderCellClassAndStyle(columnIndex, specialExtraCellsCount, column);
-      const overlay = null;
-      //---- Filter ----
       let filter = null;
       if (this.filtersColumnMenuInstance.hasFiltersForColumn(this.filters, column)) {
         const svgLabel = this.kupManager.language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${this.getFilterValueForTooltip(column)}'`;
-        /**
-         * When column has a filter but filters must not be displayed, shows an icon to remove the filter.
-         * Upon click, the filter gets removed.
-         * The payload event is simulated here.
-         */
         filter = (h("span", { title: svgLabel, class: `kup-icon ${KupThemeIconValues.FILTER_REMOVE.replace('--', '')}` }));
       }
-      //---- Sort ----
       let sortIcon = null;
-      // When sorting is enabled, there are two things to do:
-      // 1 - Add correct icon to the table
-      // 2 - stores the handler to be later set onto the whole cell
       let iconClass = this.getSortIcon(column.name);
       if (iconClass !== '') {
         sortIcon = (h("span", { class: iconClass, title: this.getSortDecode(column.name) }));
       }
-      // Adds the sortable class to the header cell
       columnClass['header-cell--sortable'] = true;
       let keyIcon = null;
       if (column.isKey) {
@@ -2326,97 +2451,14 @@ export class KupDataTable {
           }
         }
       }
-      // Reference for drag events and what they permit or not
-      // https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-p
-      const dragHandlers = {
-        onDragStart: (e) => {
-          // Sets the type of drag
-          setDragEffectAllowed(e, 'move');
-          const overElement = this.getThElement(e.target);
-          // Remember that the current target is different from the one print out in the console
-          // Sets which element has started the drag
-          overElement.setAttribute(this.dragStarterAttribute, '');
-          this.theadRef.setAttribute(this.dragFlagAttribute, '');
-          this.columnsAreBeingDragged = true;
-          this.hideShowColumnDropArea(true, overElement);
-          // TODO set drag payload and get it in the other methods when need it
-          // setDragDropPayload
-          // getDragDropPayload
-          // replace the used flags set with attribute
-        },
-        onDragEnd: (e) => {
-          // When the drag has ended, checks if the element still exists or it was destroyed by JSX
-          const overElement = this.getThElement(e.target);
-          if (overElement) {
-            // If it still exists, removes the attribute so that it can perform a new drag again
-            overElement.removeAttribute(this.dragStarterAttribute);
-          }
-          // Remove the over attribute
-          const dragDropPayload = getDragDropPayload();
-          if (dragDropPayload && dragDropPayload.overElement) {
-            dragDropPayload.overElement.removeAttribute(this.dragOverAttribute);
-          }
-          this.theadRef.removeAttribute(this.dragFlagAttribute);
-          this.columnsAreBeingDragged = false;
-          this.hideShowColumnDropArea(false);
-        },
-      };
-      const dropHandlers = {
-        onDrop: (e) => {
-          const transferredData = JSON.parse(e.dataTransfer.getData(KupDataTableColumnDragType));
-          // We are sure the tables have been dropped in a valid location -> starts sorting the columns
-          this.handleColumnSort(column, transferredData);
-          return KupDataTableColumnDragType;
-        },
-        onDragLeave: (e) => {
-          if (e.dataTransfer.types.indexOf(KupDataTableColumnDragType) >= 0) {
-            const overElement = this.getThElement(e.target);
-            if (overElement) {
-              overElement.removeAttribute(this.dragOverAttribute);
-            }
-          }
-        },
-        onDragOver: (e) => {
-          if (e.dataTransfer.types.indexOf(KupDataTableColumnDragType) >= 0) {
-            const overElement = this.getThElement(e.target);
-            overElement.setAttribute(this.dragOverAttribute, '');
-            // TODO do it without using the element but with data like id, etc.
-            setDragDropPayload({
-              overElement,
-            });
-            // If element can have a drop effect
-            if (!overElement.hasAttribute(this.dragStarterAttribute) &&
-              this.columnsAreBeingDragged) {
-              setDragEffectAllowed(e, 'move');
-              return true;
-            }
-            else {
-              setDragEffectAllowed(e, 'none');
-              return false;
-            }
-          }
-        },
-      };
-      columnClass.number = this.kupManager.objects.isNumber(column.obj);
-      return (h("th", Object.assign({ "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle }, (this.enableSortableColumns
-        ? setKetchupDraggable(dragHandlers, {
-          [KupDataTableColumnDragType]: column,
-          'kup-drag-source-element': {
-            column: column,
-            id: this.rootElement.id,
-          },
-        })
-        : {}), (this.enableSortableColumns
-        ? setKetchupDroppable(dropHandlers, [KupDataTableColumnDragType], this.rootElement, {
-          column: column,
-          id: this.rootElement.id,
-        })
-        : {})),
-        h("span", { class: "column-title" }, this.applyLineBreaks(column.title)),
-        overlay,
-        keyIcon,
-        sortIcon,
-        filter));
+      return (h("th", { ref: (el) => this.thRefs.push(el), "data-cell": column, "data-column": column.name, class: columnClass, style: thStyle },
+        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];
@@ -2455,10 +2497,10 @@ export class KupDataTable {
     const dataColumns = this.getVisibleColumns().map((column, columnIndex) => {
       const { columnClass, thStyle } = this.composeHeaderCellClassAndStyle(columnIndex, specialExtraCellsCount, column);
       return (h("th-sticky", { class: columnClass, style: thStyle },
-        h("span", { class: "column-title" }, this.applyLineBreaks(column.title))));
+        h("div", { class: "header-cell__content" },
+          h("span", { class: "header-cell__title" }, this.applyLineBreaks(column.title)))));
     });
     return [multiSelectColumn, actionsColumn, ...dataColumns];
-    //return [multiSelectColumn, groupColumn, actionsColumn, ...dataColumns];
   }
   renderTooltip() {
     if (this.tooltipEnabled == false) {
@@ -2466,9 +2508,7 @@ export class KupDataTable {
     }
     return (h("kup-tooltip", { class: "datatable-tooltip", owner: this.rootElement.tagName, loadTimeout: this.showTooltipOnRightClick == true
         ? 0
-        : this.tooltipLoadTimeout, onBlur: () => {
-        this.tooltip.data = null;
-      }, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el), tabindex: 0 }));
+        : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
   }
   areTotalsSelected(column) {
     return this.totals && this.totals[column.name] ? true : false;
@@ -2496,10 +2536,17 @@ export class KupDataTable {
     if (this.rootElement.shadowRoot) {
       const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
       if (menu) {
-        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords, 0, KupDynamicPositionPlacement.TOP_RIGHT);
+        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords);
+        this.kupManager.utilities.pointerDownCallbacks.add({
+          cb: () => {
+            this.closeTotalMenu();
+            this.kupManager.dynamicPosition.stop(menu);
+          },
+          onlyOnce: true,
+          el: menu,
+        });
         this.kupManager.dynamicPosition.start(menu);
-        menu.classList.add('visible');
-        setTimeout(() => menu.focus(), 0);
+        menu.menuVisible = true;
       }
     }
   }
@@ -2639,7 +2686,7 @@ export class KupDataTable {
             });
           }
         }
-        totalMenu = (h("kup-list", { class: `kup-menu total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, onBlur: () => this.closeTotalMenu(), "onkup-list-click": (event) => this.onTotalsChange(event, column), tabindex: 0 }));
+        totalMenu = (h("kup-list", { class: `total-menu`, data: listData, id: "totals-menu", "is-menu": true, keyboardNavigation: true, "menu-visible": true, "onkup-list-click": (event) => this.onTotalsChange(event, column), tabindex: 0 }));
       }
       // TODO please use getValueForDisplay
       let value;
@@ -2748,33 +2795,6 @@ export class KupDataTable {
               value = numberToFormattedStringNumber(totalValue, column.decimals, column.obj ? column.obj.p : '');
             }
           }
-          /*
-          TODO Group Menu
-          const groupMenu = undefined;
-          if (this.isOpenedGroupMenuForColumn(column.name)) {
-              const listData: KupListData[] = [
-                  {
-                      text: 'Matrice dei totali',
-                      value: 'MATTOT',
-                      selected: false,
-                  },
-              ];
-
-              groupMenu = (
-                  <kup-list
-                      class={`kup-menu group-menu`}
-                      data={...listData}
-                      id="group-menu"
-                      is-menu
-                      menu-visible
-                      onBlur={() => this.closeGroupMenu()}
-                      onkup-list-click={(event) => console.log(event)}
-                      tabindex={0}
-                  ></kup-list>
-              );
-          }
-          {groupMenu}
-          */
           cells.push(h("td", { class: totalClass }, value));
         }
         jsxRows.push(h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: "group group-label" }, grouplabelcell));
@@ -2885,6 +2905,9 @@ export class KupDataTable {
           }
         }
         const cell = row.cells[name];
+        if (!cell) {
+          return null;
+        }
         const jsxCell = this.renderCell(indend, cell, row, currentColumn, hideValuesRepetitions && previousRow
           ? previousRow.cells[name].value
           : undefined);
@@ -2900,6 +2923,9 @@ export class KupDataTable {
         if (cell.cssClass) {
           cellClass[cell.cssClass] = true;
         }
+        else if (currentColumn.cssClass) {
+          cellClass[currentColumn.cssClass] = true;
+        }
         let cellStyle = null;
         if (!styleHasBorderRadius(cell)) {
           cellStyle = Object.assign({}, cell.style);
@@ -2936,7 +2962,7 @@ export class KupDataTable {
          * Controls if current cell needs a tooltip and eventually adds it.
          * @todo When the option forceOneLine is active, there is a problem with the current implementation of the tooltip. See documentation in the mauer wiki for better understanding.
          */
-        const _hasTooltip = this.kupManager.objects.hasTooltip(cell.obj);
+        const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(cell.obj);
         let eventHandlers = undefined;
         let title = undefined;
         if (_hasTooltip) {
@@ -2961,14 +2987,7 @@ export class KupDataTable {
             };
           }
         }
-        return (h("td", Object.assign({}, (this.dropEnabled
-          ? setKetchupDroppable(dropHandlersCell, [KupDataTableRowDragType], this.rootElement, {
-            row: row,
-            cell: cell,
-            column: currentColumn,
-            id: this.rootElement.id,
-          })
-          : {}), { title: title, "data-cell": cell, "data-column": name, "data-row": row, style: cellStyle, class: cellClass }, eventHandlers), jsxCell));
+        return (h("td", Object.assign({ title: title, colSpan: cell.span && cell.span.col ? cell.span.col : null, rowSpan: cell.span && cell.span.row ? cell.span.row : null, "data-cell": cell, "data-column": name, "data-row": row, style: cellStyle, class: cellClass }, eventHandlers), jsxCell));
       });
       // adding row to rendered rows
       this.renderedRows.push(row);
@@ -2978,67 +2997,10 @@ export class KupDataTable {
       if (row.cssClass) {
         rowClass[row.cssClass] = true;
       }
-      const dragHandlersRow = {
-        onDragStart: (e) => {
-          // get the tr tag
-          const trElement = e.target;
-          let cell = {};
-          let column = {};
-          if (trElement) {
-            // get the elements inside the row that were touched
-            const hoverElements = trElement.querySelectorAll(':hover');
-            if (hoverElements) {
-              // the td in position 0 is ALWAYS the last td touched
-              const tdElement = hoverElements[0];
-              if (tdElement) {
-                // get the column name in td element
-                const columnName = tdElement.getAttribute('data-column');
-                if (columnName) {
-                  // finally get the cell
-                  cell = row.cells[columnName];
-                  // and the column
-                  column = getColumnByName(this.getColumns(), columnName);
-                }
-              }
-            }
-          }
-          // because I found the cell and the column inside this method I have to set here the event data
-          // in this scenario it is not necessary pass the data parameter in setKetchupDraggable method
-          const sourceElementData = {
-            id: this.rootElement.id,
-            row,
-            selectedRows: this.selectedRows,
-            cell,
-            column,
-          };
-          // set event data
-          // this is mandatory in order to add the source element data in the kup drop event
-          e.dataTransfer.setData('kup-drag-source-element', JSON.stringify(sourceElementData));
-          // Sets the type of drag
-          setDragEffectAllowed(e, 'move');
-          if (this.selectedRows.length > 1 ||
-            (this.selectedRows.length == 1 &&
-              !this.selectedRows.includes(row))) {
-            this.addMultiSelectDragImageToEvent(e);
-          }
-        },
-        onDragEnd: (_e) => {
-          // Remove the over class
-          const dragDropPayload = getDragDropPayload();
-          if (dragDropPayload && dragDropPayload.overElement) {
-            dragDropPayload.overElement.classList.remove('selected');
-          }
-        },
-      };
       const style = {
         '--kup_datatable_row_actions': rowActionsCount,
       };
-      return (h("tr", Object.assign({ ref: (el) => this.rowsRefs.push(el), "data-row": row, class: rowClass, style: style }, (this.dragEnabled
-        ? setKetchupDraggable(dragHandlersRow, {
-          [KupDataTableRowDragType]: row,
-          'kup-drag-source-element': {}, // I put nothing in there because I overwrite the content inside the onDragStart method
-        })
-        : {})),
+      return (h("tr", { ref: (el) => this.rowsRefs.push(el), "data-row": row, class: rowClass, style: style },
         selectRowCell,
         rowActionsCell,
         cells));
@@ -3480,134 +3442,26 @@ export class KupDataTable {
       totalsMatrix));
   }
   columnRemoveArea() {
-    const dropHandlersRemoveCols = {
-      onDrop: (e) => {
-        const transferredData = JSON.parse(e.dataTransfer.getData(KupDataTableColumnDragType));
-        const overElement = this.getElementById(e.target, 'remove-column-area');
-        overElement.removeAttribute(this.dragOverAttribute);
-        // We are sure the tables have been dropped in a valid location -> starts ...
-        this.handleColumnRemove(transferredData);
-        return KupDataTableColumnDragRemoveType;
-      },
-      onDragOver: (e) => {
-        const overElement = this.getElementById(e.target, 'remove-column-area');
-        overElement.setAttribute(this.dragOverAttribute, '');
-        return true;
-      },
-      onDragLeave: (e) => {
-        const overElement = this.getElementById(e.target, 'remove-column-area');
-        overElement.removeAttribute(this.dragOverAttribute);
-        return true;
-      },
-    };
-    return (h("div", Object.assign({ id: "remove-column-area" }, setKetchupDroppable(dropHandlersRemoveCols, [
-      KupDataTableColumnDragType,
-      KupDataTableColumnDragRemoveType,
-    ], this.rootElement, {})),
+    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() {
-    const dropHandlersGroupCols = {
-      onDrop: (e) => {
-        const transferredData = JSON.parse(e.dataTransfer.getData(KupDataTableColumnDragType));
-        const overElement = this.getElementById(e.target, 'group-column-area');
-        overElement.removeAttribute(this.dragOverAttribute);
-        // We are sure the tables have been dropped in a valid location -> starts ...
-        this.handleColumnGroup(transferredData);
-        return KupDataTableColumnDragGroupType;
-      },
-      onDragOver: (e) => {
-        const overElement = this.getElementById(e.target, 'group-column-area');
-        overElement.setAttribute(this.dragOverAttribute, '');
-        return true;
-      },
-      onDragLeave: (e) => {
-        const overElement = this.getElementById(e.target, 'group-column-area');
-        overElement.removeAttribute(this.dragOverAttribute);
-        return true;
-      },
-    };
-    return (h("div", Object.assign({ id: "group-column-area" }, setKetchupDroppable(dropHandlersGroupCols, [
-      KupDataTableColumnDragType,
-      KupDataTableColumnDragGroupType,
-    ], this.rootElement, {})),
-      h(FImage, { resource: "bookmark", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" }),
-      h(FImage, { resource: "book", color: `var(${KupThemeColorValues.DANGER})`, sizeX: "30px", sizeY: "50px" })));
-  }
-  startDynamicPositioning(dropArea, th) {
-    if (this.kupManager.dynamicPosition.isRegistered(dropArea)) {
-      this.kupManager.dynamicPosition.changeAnchor(dropArea, th);
-    }
-    else {
-      this.kupManager.dynamicPosition.register(dropArea, th, 10, KupDynamicPositionPlacement.TOP);
-    }
-    this.kupManager.dynamicPosition.start(dropArea);
-    dropArea.classList.add('visible');
-  }
-  stopDynamicPositioning(dropArea) {
-    dropArea.classList.remove('visible');
-    this.kupManager.dynamicPosition.stop(dropArea);
-    // Chrome workaround: dropArea is draggable even with the display:none rule
-    dropArea.style.top = '-50px';
-    dropArea.style.left = '-50px';
-  }
-  getElementById(target, id) {
-    let element = target;
-    if (element) {
-      if (element.nodeType == Node.TEXT_NODE) {
-        element = element.parentNode;
-      }
-      if (element.id !== id) {
-        element = element.closest('#' + id);
-      }
-    }
-    return element;
-  }
-  getThElement(target) {
-    let element = target;
-    if (element) {
-      if (element.nodeType == Node.TEXT_NODE) {
-        element = element.parentNode;
-      }
-      if (element.tagName !== 'TH') {
-        element = element.closest('th');
-      }
-    }
-    return element;
+    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) {
-    this.hideShowColumnRemoveDropArea(show, th);
-    this.hideShowColumnGroupDropArea(show, th);
-  }
-  hideShowColumnRemoveDropArea(show, th) {
-    if (!this.removableColumns) {
-      return;
-    }
-    const dropArea = this.rootElement.shadowRoot.querySelector('#remove-column-area');
-    if (show) {
-      const offset = this.showGroups ? '0px' : '25px';
-      dropArea.style.marginLeft =
-        'calc(' + th.clientWidth / 2 + 'px - ' + offset + ')';
-      this.startDynamicPositioning(dropArea, th);
-    }
-    else {
-      this.stopDynamicPositioning(dropArea);
-    }
-  }
-  hideShowColumnGroupDropArea(show, th) {
-    if (!this.showGroups) {
-      return;
-    }
-    const dropArea = this.rootElement.shadowRoot.querySelector('#group-column-area');
-    if (show) {
-      const offset = this.removableColumns ? '51px' : '25px';
-      dropArea.style.marginLeft =
-        'calc(' + th.clientWidth / 2 + 'px - ' + offset + ')';
-      this.startDynamicPositioning(dropArea, th);
+    if (show && th && (this.removableColumns || this.showGroups)) {
+      this.dropareaRef.classList.add('droparea--visible');
+      this.kupManager.dynamicPosition.register(this.dropareaRef, th, 10, KupDynamicPositionPlacement.TOP);
+      this.kupManager.dynamicPosition.start(this.dropareaRef);
+      this.dropareaRef.style.marginLeft =
+        th.clientWidth / 2 - this.dropareaRef.clientWidth / 2 + 'px';
     }
     else {
-      this.stopDynamicPositioning(dropArea);
+      this.dropareaRef.classList.remove('droparea--visible');
+      +this.kupManager.dynamicPosition.stop(this.dropareaRef);
     }
   }
   handleColumnRemove(column2remove) {
@@ -3724,9 +3578,6 @@ export class KupDataTable {
           this.fontsize = this.getFontSizeCodeFromDecode(e.detail.value);
         } })));
   }
-  getDensityDecodeFromCode(code) {
-    return this.transcodeItem(code, this.DENSITY_CODES, this.DENSITY_DECODES);
-  }
   getDensityCodeFromDecode(decode) {
     return this.transcodeItem(decode, this.DENSITY_DECODES, this.DENSITY_CODES);
   }
@@ -3813,6 +3664,7 @@ export class KupDataTable {
         } })));
   }
   render() {
+    this.thRefs = [];
     this.rowsRefs = [];
     this.renderedRows = [];
     let elStyle = undefined;
@@ -3820,14 +3672,7 @@ export class KupDataTable {
     let rows = null;
     if (this.paginatedRowsLength === 0) {
       rows = (h("tr", { ref: (el) => this.rowsRefs.push(el) },
-        h("td", Object.assign({}, (this.dropEnabled
-          ? setKetchupDroppable(dropHandlersCell, [KupDataTableRowDragType], this.rootElement, {
-            row: null,
-            cell: null,
-            column: null,
-            id: this.rootElement.id,
-          })
-          : {}), { colSpan: this.calculateColspan() }), this.emptyDataLabel)));
+        h("td", { colSpan: this.calculateColspan() }, this.emptyDataLabel)));
     }
     else {
       rows = [];
@@ -3884,10 +3729,10 @@ export class KupDataTable {
           data: chipsData,
           id: 'group-chips',
           type: FChipType.INPUT,
-          onClick: [],
+          onIconClick: [],
         };
         for (let i = 0; i < chipsData.length; i++) {
-          props.onClick.push(() => this.removeGroup(i));
+          props.onIconClick.push(() => this.removeGroup(i));
         }
         groupChips = h(FChip, Object.assign({}, props));
       }
@@ -3944,6 +3789,9 @@ export class KupDataTable {
               } }))) : 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
             ? [
@@ -3960,39 +3808,8 @@ export class KupDataTable {
           h("table", { class: tableClass, ref: (el) => (this.tableRef = el), onMouseLeave: (ev) => {
               ev.stopPropagation();
               unsetTooltip(this.tooltip);
-            }, onClick: (e) => {
-              // Note: event must be cloned
-              // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
-              const clone = {};
-              for (const key in e) {
-                clone[key] = e[key];
-              }
-              this.clickTimeout.push(setTimeout(() => {
-                this.kupDataTableClick.emit({
-                  comp: this,
-                  id: this.rootElement.id,
-                  details: this.clickHandler(clone),
-                });
-              }, 300));
             }, onContextMenu: (e) => {
-              this.kupDataTableContextMenu.emit({
-                comp: this,
-                id: this.rootElement.id,
-                details: this.contextMenuHandler(e),
-              });
-            }, onDblClick: (e) => {
-              for (let index = 0; index < this.clickTimeout.length; index++) {
-                clearTimeout(this.clickTimeout[index]);
-                this.kupManager.debug.logMessage(this, 'Cleared clickHandler timeout(' +
-                  this.clickTimeout[index] +
-                  ').');
-              }
-              this.clickTimeout = [];
-              this.kupDataTableDblClick.emit({
-                comp: this,
-                id: this.rootElement.id,
-                details: this.dblClickHandler(e),
-              });
+              e.preventDefault();
             }, onMouseMove: (e) => this.mouseMoveHandler(e), onMouseOut: () => this.mouseOutHandler() },
             h("thead", { hidden: !this.showHeader, ref: (el) => (this.theadRef = el) },
               h("tr", null, header)),
@@ -4002,12 +3819,11 @@ export class KupDataTable {
               : null),
           stickyEl),
         tooltip,
-        paginatorBottom),
-      this.showGroups ? this.columnGroupArea() : null,
-      this.removableColumns ? this.columnRemoveArea() : null));
+        paginatorBottom)));
     return compCreated;
   }
   disconnectedCallback() {
+    this.kupManager.interact.unregister(this.interactableDrag.concat(this.interactableDrop, this.interactableResize, this.interactableTouch));
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
     const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
@@ -4141,7 +3957,7 @@ export class KupDataTable {
         "text": "Enables drag."
       },
       "attribute": "drag-enabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "dropEnabled": {
@@ -4159,7 +3975,7 @@ export class KupDataTable {
         "text": "Enables drop."
       },
       "attribute": "drop-enabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "editableData": {
@@ -4174,8 +3990,8 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, editable cells will be rendered using input components."
       },
@@ -4288,8 +4104,8 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "fixedRows",
-            "name": "see"
+            "name": "see",
+            "text": "fixedRows"
           }],
         "text": "Fixes the given number of columns so that they stay visible when horizontally scrolling the data-table.\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\nCan be combined with fixedRows."
       },
@@ -4309,8 +4125,8 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "fixedColumns",
-            "name": "see"
+            "name": "see",
+            "text": "fixedColumns"
           }],
         "text": "Fixes the given number of rows so that they stay visible when vertically scrolling the data-table.\nIf grouping is active or the value of the prop is <= 0, this prop will have no effect.\nCan be combined with fixedColumns."
       },
@@ -4449,8 +4265,8 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "false",
-            "name": "default"
+            "name": "default",
+            "text": "false"
           }],
         "text": "When set to true, clicked-on rows will have a visual feedback."
       },
@@ -4529,11 +4345,11 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "loadMoreStep *",
-            "name": "see"
+            "name": "see",
+            "text": "loadMoreStep *"
           }, {
-            "text": "loadMoreLimit",
-            "name": "see"
+            "name": "see",
+            "text": "loadMoreLimit"
           }],
         "text": "Establish the modality of how many new records will be downloaded.\n\nThis property is regulated also by loadMoreStep."
       },
@@ -4553,11 +4369,11 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "loadMoreMode *",
-            "name": "see"
+            "name": "see",
+            "text": "loadMoreMode *"
           }, {
-            "text": "loadMoreLimit",
-            "name": "see"
+            "name": "see",
+            "text": "loadMoreLimit"
           }],
         "text": "The number of records which will be requested to be downloaded when clicking on the load more button.\n\nThis property is regulated also by loadMoreMode."
       },
@@ -4624,6 +4440,24 @@ export class KupDataTable {
       "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,
@@ -4847,8 +4681,8 @@ export class KupDataTable {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "KupDataTable.showHeader",
-            "name": "namespace"
+            "name": "namespace",
+            "text": "KupDataTable.showHeader"
           }],
         "text": "Enables rendering of the table header."
       },
@@ -5088,7 +4922,6 @@ export class KupDataTable {
     "columnMenuAnchor": {},
     "groupState": {},
     "openedTotalMenu": {},
-    "openedGroupMenu": {},
     "openedCustomSettings": {},
     "fontsize": {},
     "triggerColumnSortRerender": {}
@@ -5428,8 +5261,8 @@ export class KupDataTable {
         "signature": "(descriptions?: boolean) => Promise<GenericObject>",
         "parameters": [{
             "tags": [{
-                "text": "descriptions - When provided and true, the result will be the list of props with their description.",
-                "name": "param"
+                "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."
           }],
@@ -5460,8 +5293,8 @@ export class KupDataTable {
         "signature": "(column: string) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "column - Name of the column.",
-                "name": "param"
+                "name": "param",
+                "text": "column - Name of the column."
               }],
             "text": "- Name of the column."
           }],
@@ -5528,8 +5361,8 @@ export class KupDataTable {
         "signature": "(props: GenericObject) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "props - Object containing props that will be set to the component.",
-                "name": "param"
+                "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."
           }],
@@ -5557,14 +5390,14 @@ export class KupDataTable {
         "signature": "(rowsById: string, emitEvent?: boolean) => Promise<void>",
         "parameters": [{
             "tags": [{
-                "text": "rowsById - String containing the ids separated by \";\".",
-                "name": "param"
+                "name": "param",
+                "text": "rowsById - String containing the ids separated by \";\"."
               }],
             "text": "- String containing the ids separated by \";\"."
           }, {
             "tags": [{
-                "text": "emitEvent - The event will always be emitted unless emitEvent is set to false.",
-                "name": "param"
+                "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."
           }],