@sme.up/ketchup 4.0.0 → 4.2.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 { 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 { stringToNumber, numberToFormattedStringNumber, identify, deepEqual, getProps, setProps, } from '../../utils/utils';
+import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } 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 { 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 { 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,9 @@ 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';
+import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
+import { FCell } from '../../f-components/f-cell/f-cell';
 export class KupDataTable {
   constructor() {
     //////////////////////////////
@@ -33,6 +34,11 @@ export class KupDataTable {
     //////////////////////////////
     this.stateId = '';
     this.state = new KupDataTableState();
+    /**
+     * When true and when a row is missing some columns, the missing cells will be autogenerated.
+     * @default false
+     */
+    this.autoFillMissingCells = false;
     /**
      * Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
@@ -40,7 +46,7 @@ export class KupDataTable {
     /**
      * The density of the rows, defaults at 'medium' and can be also set to 'large' or 'small'.
      */
-    this.density = 'dense';
+    this.density = FCellPadding.DENSE;
     /**
      * Enables drag.
      */
@@ -159,6 +165,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 +254,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 +270,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
@@ -300,13 +280,23 @@ export class KupDataTable {
     this.navBarHeight = 0;
     this.theadIntersecting = false;
     this.tableIntersecting = false;
-    this.iconPaths = undefined;
     this.isSafariBrowser = false;
     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;
+    this.clickCb = null;
+    this.clickCbCustomPanel = null;
     /**
      * Reference to the row detail card.
      */
@@ -338,7 +328,6 @@ export class KupDataTable {
       'format-color-text',
       'format-font-size-increase',
     ];
-    this.DENSITY_CODES = ['dense', 'medium', 'wide'];
     this.DENSITY_DECODES = ['Dense', 'Normal', 'Wide'];
     this.DENSITY_ICONS = [
       'format-align-justify',
@@ -627,16 +616,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,
@@ -685,6 +664,32 @@ export class KupDataTable {
       this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
     }
   }
+  /**
+   * Sets the focus on an editable table cell.
+   * @param {string} column - Name of the column.
+   * @param {string} rowId - Id of the row.
+   */
+  async setFocus(column, rowId) {
+    const cells = this.rootElement.shadowRoot.querySelectorAll('td[data-column="' + column + '"]');
+    for (let index = 0; cells && index < cells.length; index++) {
+      const cell = cells[index];
+      if (cell['data-row'] && cell['data-row'].id == rowId) {
+        const input = cell.querySelector('input');
+        if (input) {
+          input.focus();
+        }
+        else {
+          const kupInput = cell.querySelector('.hydrated');
+          if (kupInput) {
+            try {
+              kupInput.setFocus();
+            }
+            catch (error) { }
+          }
+        }
+      }
+    }
+  }
   /**
    * Sets the props to the component.
    * @param {GenericObject} props - Object containing props that will be set to the component.
@@ -911,7 +916,7 @@ export class KupDataTable {
           cells[cellName].icon = oldColumn.icon;
         }
         if (oldColumn.shape && !cells[cellName].shape) {
-          cells[cellName].shape = oldColumn.icon;
+          cells[cellName].shape = oldColumn.shape;
         }
       }
       // If a record is key and no column argument is provided, it will be placed on top
@@ -951,14 +956,16 @@ export class KupDataTable {
     else {
       this.navBarHeight = 0;
     }
-    this.stickyTheadRef.style.top = this.navBarHeight + 'px';
-    const widthTable = this.tableAreaRef.offsetWidth;
-    this.stickyTheadRef.style.maxWidth = widthTable + 'px';
-    const thCollection = this.theadRef.querySelectorAll('th');
-    const thStickyCollection = this.stickyTheadRef.querySelectorAll('th-sticky');
-    for (let i = 0; i < thCollection.length; i++) {
-      const widthTH = thCollection[i].offsetWidth;
-      thStickyCollection[i].style.width = widthTH + 'px';
+    if (this.stickyTheadRef) {
+      this.stickyTheadRef.style.top = this.navBarHeight + 'px';
+      const widthTable = this.tableAreaRef.offsetWidth;
+      this.stickyTheadRef.style.maxWidth = widthTable + 'px';
+      const thCollection = this.theadRef.querySelectorAll('th');
+      const thStickyCollection = this.stickyTheadRef.querySelectorAll('th-sticky');
+      for (let i = 0; i < thCollection.length; i++) {
+        const widthTH = thCollection[i].offsetWidth;
+        thStickyCollection[i].style.width = widthTH + 'px';
+      }
     }
   }
   setObserver() {
@@ -1010,9 +1017,237 @@ 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 +1258,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());
   }
@@ -1049,11 +1289,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() {
@@ -1130,7 +1368,7 @@ export class KupDataTable {
   componentDidRender() {
     const root = this.rootElement.shadowRoot;
     if (root) {
-      const fs = root.querySelectorAll('.f-text-field--wrapper');
+      const fs = root.querySelectorAll('.f-text-field');
       for (let index = 0; index < fs.length; index++) {
         FTextFieldMDC(fs[index]);
       }
@@ -1141,6 +1379,7 @@ export class KupDataTable {
     this.totalMenuPosition();
     this.checkScrollOnHover();
     this.didRenderObservers();
+    this.didRenderInteractables();
     this.hideShowColumnDropArea(false);
     this.setDynPosElements();
     if (this.headerIsPersistent &&
@@ -1160,7 +1399,7 @@ export class KupDataTable {
   componentDidLoad() {
     this.didLoadObservers();
     this.didLoadEventHandling();
-    // automatic row selection
+    this.didLoadInteractables();
     if (this.selectRowsById) {
       this.setSelectedRows(this.selectRowsById);
     }
@@ -1181,6 +1420,17 @@ export class KupDataTable {
     this.kupManager.debug.logLoad(this, true);
   }
   //======== Utility methods ========
+  getEventPath(e) {
+    let path = [];
+    let currentEl = e.target;
+    while (currentEl !== this.rootElement && currentEl !== document.body) {
+      path.push(currentEl);
+      currentEl = currentEl.parentNode
+        ? currentEl.parentNode
+        : currentEl.host;
+    }
+    return path;
+  }
   resetSelectedRows() {
     if (!this.data || !this.data.rows || this.data.rows.length === 0)
       return;
@@ -1361,12 +1611,58 @@ 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');
+  getEventDetails(path) {
+    let isHeader, isBody, isFooter, td, textfield, th, tr, filterRemove;
+    if (path) {
+      for (let i = path.length - 1; i >= 0; i--) {
+        let p = path[i];
+        if (!p.tagName) {
+          continue;
+        }
+        switch (p.tagName.toUpperCase()) {
+          case 'THEAD': {
+            isHeader = true;
+            break;
+          }
+          case 'TBODY': {
+            isBody = true;
+            break;
+          }
+          case 'TFOOT': {
+            isFooter = true;
+            break;
+          }
+          case 'TD': {
+            td = p;
+            break;
+          }
+          case 'TH': {
+            th = p;
+            break;
+          }
+          case 'TR': {
+            tr = p;
+            break;
+          }
+          default: {
+            if (p.classList.contains('f-text-field')) {
+              textfield = p;
+            }
+            else if (p.classList.contains(KupThemeIconValues.FILTER_REMOVE.replace('--', ''))) {
+              filterRemove = p;
+            }
+            break;
+          }
+        }
+      }
+    }
     let cell = null, column = null, isGroupRow = false, row = null;
     if (isBody) {
       if (tr) {
@@ -1414,7 +1710,7 @@ export class KupDataTable {
     };
   }
   clickHandler(e) {
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e));
     if (details.area === 'header') {
       if (details.th && details.column) {
         if (details.filterRemove) {
@@ -1446,15 +1742,14 @@ export class KupDataTable {
         return details;
       }
       if (details.td && details.row && !details.textfield) {
-        this.onRowClick(e, details.row, true);
+        this.onRowClick(details.row, details.td, true);
         return details;
       }
     }
     return details;
   }
   contextMenuHandler(e) {
-    e.preventDefault();
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e));
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -1463,7 +1758,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 &&
@@ -1484,37 +1779,18 @@ export class KupDataTable {
     return details;
   }
   dblClickHandler(e) {
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e));
     if (details.area === 'body') {
       if (this.selection == SelectionMode.MULTIPLE) {
         this.resetSelectedRows();
       }
       if (this.selection == SelectionMode.SINGLE ||
         this.selection == SelectionMode.MULTIPLE) {
-        this.onRowClick(e, details.row, false);
+        this.onRowClick(details.row, details.td, false);
       }
     }
     return details;
   }
-  mouseMoveHandler(e) {
-    const details = this.getEventDetails(e.target);
-    const hoverEl = this.rootElement.shadowRoot.querySelector('.hover');
-    if (hoverEl) {
-      hoverEl.classList.remove('hover');
-    }
-    if (details.area === 'body') {
-      if (details.tr) {
-        details.tr.classList.add('hover');
-        return;
-      }
-    }
-  }
-  mouseOutHandler() {
-    const hoverEl = this.rootElement.shadowRoot.querySelector('.hover');
-    if (hoverEl) {
-      hoverEl.classList.remove('hover');
-    }
-  }
   getVisibleColumns() {
     // TODO: change into `visible ?? true` when TS dependency has been updated
     const visibleColumns = this.getColumns().filter(({ visible }) => visible !== undefined ? visible : true);
@@ -1559,12 +1835,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);
@@ -1803,9 +2073,7 @@ export class KupDataTable {
     this.currentRowsPerPage = detail.newRowsPerPage;
     this.adjustPaginator();
   }
-  onRowClick(event, row, emitEvent) {
-    // checking target
-    const target = event.target;
+  onRowClick(row, td, emitEvent) {
     // selecting row
     if (!row.unselectable) {
       switch (this.selection) {
@@ -1830,18 +2098,9 @@ export class KupDataTable {
       }
     }
     // find clicked column
-    let clickedColumn = null;
-    if (target instanceof HTMLElement) {
-      if (target.tagName !== 'TR') {
-        let currentElement = target;
-        while (currentElement.tagName !== 'TD') {
-          currentElement = currentElement.parentElement;
-        }
-        clickedColumn = currentElement.dataset.column;
-      }
-    }
+    const clickedColumn = td.dataset.column;
     // selecting clicked column
-    if (clickedColumn) {
+    if (this.selection !== SelectionMode.NONE && clickedColumn) {
       this.deselectColumn(this.selectedColumn);
       this.selectedColumn = clickedColumn;
       this.selectColumn(this.selectedColumn);
@@ -1896,33 +2155,6 @@ export class KupDataTable {
       type: 'expander',
     });
   }
-  cellUpdate(e, value, cell, column, row) {
-    if (this.kupManager.objects.isCheckbox(cell.obj)) {
-      if (cell.data && cell.data['checked'] !== undefined) {
-        cell.data['checked'] = value === 'on' ? false : true;
-      }
-    }
-    else {
-      if (cell.obj) {
-        cell.obj.k = value;
-      }
-      cell.value = value;
-      cell.displayedValue = null;
-      cell.displayedValue = getCellValueForDisplay(column, cell);
-      if (cell.data && cell.data['value'] !== undefined) {
-        cell.data['value'] = value;
-      }
-    }
-    this.refresh();
-    this.kupDataTableCellUpdate.emit({
-      comp: this,
-      id: this.rootElement.id,
-      cell: cell,
-      column: column,
-      row: row,
-      event: e,
-    });
-  }
   handleRowSelect(row) {
     const index = this.selectedRows.indexOf(row);
     if (index < 0) {
@@ -1973,93 +2205,14 @@ export class KupDataTable {
   }
   closeTotalMenu() {
     this.openedTotalMenu = null;
+    this.kupManager.removeClickCallback(this.clickCb);
   }
-  /* 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];
-    if (buttonEvent) {
-      // Prevents double events to be fired.
-      buttonEvent.stopPropagation();
-    }
-    else {
-      throw 'kup-data-table error: missing event';
-    }
-    this.kupCellButtonClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      cell: cell,
-      column: column,
-      row: row,
-    });
-  }
   // utility methods
   groupRows() {
     if (!this.isGrouping()) {
@@ -2219,7 +2372,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 +2382,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 +2434,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 +2466,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 +2512,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 +2523,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 +2551,16 @@ 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.clickCb = {
+          cb: () => {
+            this.closeTotalMenu();
+          },
+          el: menu,
+        };
+        this.kupManager.addClickCallback(this.clickCb, true);
         this.kupManager.dynamicPosition.start(menu);
-        menu.classList.add('visible');
-        setTimeout(() => menu.focus(), 0);
+        menu.menuVisible = true;
       }
     }
   }
@@ -2639,7 +2700,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 +2809,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));
@@ -2884,26 +2918,33 @@ export class KupDataTable {
             indend.push(h("span", { class: "indent" }));
           }
         }
-        const cell = row.cells[name];
-        const jsxCell = this.renderCell(indend, cell, row, currentColumn, hideValuesRepetitions && previousRow
-          ? previousRow.cells[name].value
-          : undefined);
-        // Classes which will be set onto the single data-table cell
-        let cellClass = {
-          //    'has-options': !!options,
-          'is-graphic': this.kupManager.objects.isBar(cell.obj),
-          number: this.kupManager.objects.isNumber(cell.obj) &&
-            !isRating(cell, null) &&
-            !isGauge(cell, null) &&
-            !isKnob(cell, null),
-        };
-        if (cell.cssClass) {
-          cellClass[cell.cssClass] = true;
-        }
-        let cellStyle = null;
-        if (!styleHasBorderRadius(cell)) {
-          cellStyle = Object.assign({}, cell.style);
+        const cell = row.cells[name] ? row.cells[name] : null;
+        if (!cell) {
+          if (this.autoFillMissingCells) {
+            return h("td", { "data-column": name, "data-row": row });
+          }
+          else {
+            return null;
+          }
         }
+        const cellProps = {
+          cell: cell,
+          column: currentColumn,
+          component: this,
+          density: this.density,
+          editable: this.editableData,
+          indents: indend,
+          previousValue: hideValuesRepetitions && previousRow
+            ? previousRow.cells[name].value
+            : undefined,
+          renderKup: this.lazyLoadCells,
+          row: row,
+          setSizes: true,
+        };
+        const jsxCell = h(FCell, Object.assign({}, cellProps));
+        // Classes which will be set onto the single data-table cell;
+        let cellClass = null;
+        let cellStyle = Object.assign({}, cell.style);
         //-- For fixed cells --
         const fixedStyles = this.composeFixedCellStyleAndClass(cellIndex + 1 + specialExtraCellsCount, rowCssIndex, specialExtraCellsCount);
         if (fixedStyles) {
@@ -2936,20 +2977,10 @@ 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) {
-          cellClass['is-obj'] = true;
-          if (this.kupManager.debug.isDebug()) {
-            title =
-              cell.obj.t +
-                '; ' +
-                cell.obj.p +
-                '; ' +
-                cell.obj.k +
-                ';';
-          }
           if (!this.showTooltipOnRightClick) {
             eventHandlers = {
               onMouseEnter: (ev) => {
@@ -2961,14 +2992,8 @@ 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));
+        cellClass = Object.assign({}, cellClass);
+        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 +3003,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));
@@ -3063,356 +3031,6 @@ export class KupDataTable {
       return h(FImage, Object.assign({}, props));
     });
   }
-  /**
-   * FActory function for cells.
-   * @param cell - cell object
-   * @param column - the cell's column name
-   * @param previousRowCellValue - An optional value of the previous cell on the same column. If set and equal to the value of the current cell, makes the value of the current cell go blank.
-   * @param cellData - Additional data for the current cell.
-   * @param cellData.column - The column object to which the cell belongs.
-   * @param cellData.row - The row object to which the cell belongs.
-   */
-  renderCell(indend, cell, row, column, previousRowCellValue) {
-    const isEditable = cell.isEditable && this.editableData ? true : false;
-    const classObj = {
-      'cell-content': true,
-      clickable: !!column.clickable,
-      'force-one-line': this.forceOneLine == true ? true : null,
-    };
-    // When the previous row value is different from the current value, we can show the current value.
-    const valueToDisplay = previousRowCellValue !== cell.value ? cell.value : '';
-    // Sets the default value
-    let content = valueToDisplay;
-    const cellType = this.getCellType(cell);
-    const props = Object.assign({}, cell.data);
-    classObj[cellType + '-cell'] = true;
-    if (isEditable &&
-      (cellType === 'checkbox' ||
-        cellType === 'date' ||
-        cellType === 'number' ||
-        cellType === 'string')) {
-      content = this.setEditableCell(cellType, cell, column, row);
-    }
-    else if (cellType === 'checkbox' ||
-      cellType === 'date' ||
-      cellType === 'time' ||
-      cellType === 'datetime' ||
-      cellType === 'icon' ||
-      cellType === 'image' ||
-      cellType === 'link' ||
-      cellType === 'number' ||
-      cellType === 'string') {
-      this.setCellSize(cellType, props, cell);
-      content = this.setCell(cellType, props, content, classObj, cell, column);
-    }
-    else if (cell.data) {
-      this.setCellSizeKup(cellType, props, cell);
-      if (!this.lazyLoadCells) {
-        content = this.setLazyKupCell(cellType, props);
-      }
-      else {
-        content = this.setKupCell(cellType, classObj, props, cell, row, column);
-      }
-    }
-    const style = cell.style;
-    if (styleHasWritingMode(cell)) {
-      classObj['is-vertical'] = true;
-    }
-    let icon = undefined;
-    if (!isEditable && (column.icon || cell.icon) && content) {
-      let svg = '';
-      if (cell.icon) {
-        svg = cell.icon;
-      }
-      else {
-        svg = column.icon;
-      }
-      svg = this.getIconPath(svg);
-      const iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-      icon = h("span", { style: iconStyle, class: "kup-icon obj-icon" });
-    }
-    let cellTitle = null;
-    if (cell.title != null && cell.title.trim() != '') {
-      cellTitle = cell.title;
-    }
-    // Informational icon
-    let infoEl = null;
-    if (cell.info && cell.info.message) {
-      const info = Object.assign({}, cell.info);
-      if (!info.color) {
-        info.color = `var(${KupThemeColorValues.INFO})`;
-      }
-      if (!info.icon) {
-        info.icon = 'info';
-      }
-      let fProps = {
-        color: info.color,
-        resource: info.icon,
-        sizeX: '1.25em',
-        sizeY: '1.25em',
-        title: info.message,
-        wrapperClass: 'cell-info',
-      };
-      infoEl = h(FImage, Object.assign({}, fProps));
-    }
-    return (h("span", { class: classObj, style: style, title: cellTitle },
-      indend,
-      infoEl,
-      icon,
-      content));
-  }
-  getIconPath(icon) {
-    let svg = '';
-    if (this.iconPaths) {
-      for (let index = 0; index < this.iconPaths.length || svg !== ''; index++) {
-        if (this.iconPaths[index].icon === icon) {
-          return this.iconPaths[index].path;
-        }
-      }
-    }
-    svg = `url('${getAssetPath(`./assets/svg/${icon}.svg`)}') no-repeat center`;
-    if (!this.iconPaths) {
-      this.iconPaths = [
-        {
-          icon: icon,
-          path: svg,
-        },
-      ];
-    }
-    else {
-      this.iconPaths.push({ icon: icon, path: svg });
-    }
-    return svg;
-  }
-  // TODO: cell type can depend also from shape (see isRating)
-  // NOTE: keep care to change conditions order... shape wins on object .. -> so if isNumber after shape checks.. ->
-  // TODO: more clear conditions when refactoring...
-  getCellType(cell) {
-    return getCellType(cell);
-  }
-  setLazyKupCell(cellType, props) {
-    const lazyClass = 'cell-' + cellType + ' placeholder';
-    const style = { minHeight: props.sizeY };
-    return h("span", { style: style, class: lazyClass });
-  }
-  setCellSize(cellType, props, cell) {
-    switch (cellType) {
-      case 'checkbox':
-      case 'icon':
-        if (!props.sizeX) {
-          props['sizeX'] = '18px';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '18px';
-        }
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = props['sizeY'];
-          }
-        }
-        else {
-          cell.style = {
-            minHeight: props['sizeY'],
-          };
-        }
-        break;
-      case 'image':
-        if (!props.sizeX) {
-          props['sizeX'] = 'auto';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '64px';
-        }
-        break;
-    }
-  }
-  setCellSizeKup(cellType, props, cell) {
-    switch (cellType) {
-      case 'bar':
-        if (!props.sizeY) {
-          props['sizeY'] = '26px';
-          if (this.density === 'medium') {
-            props['sizeY'] = '36px';
-          }
-          if (this.density === 'wide') {
-            props['sizeY'] = '50px';
-          }
-        }
-        break;
-      case 'button':
-        let height = '';
-        if (props.label) {
-          height = '36px';
-        }
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = height;
-          }
-        }
-        else {
-          cell.style = { minHeight: height };
-        }
-        break;
-      case 'chart':
-        if (!props.sizeX) {
-          props['sizeX'] = '100%';
-        }
-        if (!props.sizeY) {
-          props['sizeY'] = '100%';
-        }
-        break;
-      case 'chips':
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = '40px';
-          }
-        }
-        else {
-          cell.style = { minHeight: '40px' };
-        }
-        break;
-      case 'radio':
-        if (cell.style) {
-          if (!cell.style.height) {
-            cell.style['minHeight'] = '40px';
-          }
-        }
-        else {
-          cell.style = { minHeight: '40px' };
-        }
-        break;
-    }
-  }
-  setEditableCell(cellType, cell, column, row) {
-    switch (cellType) {
-      case 'checkbox':
-        return (h(FCheckbox, { checked: cell.data['checked'], onChange: (e) => this.cellUpdate(e, e.target.value, cell, column, row) }));
-      case 'date':
-        return (h("kup-date-picker", { "onkup-datepicker-change": (e) => this.cellUpdate(e, e.detail.value, cell, column, row), data: {
-            'kup-text-field': {
-              fullWidth: true,
-            },
-          }, initialValue: cell.value }));
-      case 'number':
-        return (h(FTextField, { icon: cell.icon
-            ? cell.icon
-            : column.icon
-              ? column.icon
-              : null, fullWidth: true, inputType: "number", value: stringToNumber(cell.value).toString(), onBlur: (e) => this.cellUpdate(e, e.target.value, cell, column, row), onChange: (e) => this.cellUpdate(e, e.target.value, cell, column, row) }));
-      case 'string':
-        return (h(FTextField, { icon: cell.icon
-            ? cell.icon
-            : column.icon
-              ? column.icon
-              : null, fullWidth: true, value: cell.value, onBlur: (e) => this.cellUpdate(e, e.target.value, cell, column, row), onChange: (e) => this.cellUpdate(e, e.target.value, cell, column, row) }));
-    }
-  }
-  setKupCell(cellType, classObj, props, cell, row, column) {
-    switch (cellType) {
-      case 'bar':
-        if (!props.data) {
-          return h("kup-image", Object.assign({}, props));
-        }
-        else {
-          const barStyle = {
-            height: props.sizeY,
-          };
-          return (h("div", { class: "bar-cell-content", style: barStyle },
-            h(FImage, Object.assign({}, props))));
-        }
-      case 'button':
-        classObj['is-centered'] = true;
-        props['onkup-button-click'] = this.onJ4btnClicked.bind(this, row, column, cell);
-        return h("kup-button", Object.assign({}, props));
-      case 'btn':
-        classObj['is-centered'] = true;
-        props['data-storage'] = {
-          cell: cell,
-          row: row,
-          column: column,
-        };
-        return h("kup-button-list", Object.assign({}, props));
-      case 'chart':
-        classObj['is-centered'] = true;
-        return h("kup-chart", Object.assign({}, props));
-      case 'chips':
-        return h(FChip, Object.assign({}, props));
-      case 'color-picker':
-        return (h("kup-color-picker", Object.assign({ value: cell.value }, props, { disabled: true })));
-      case 'gauge':
-        return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "100%" }, props)));
-      case 'knob':
-      case 'progress-bar':
-        return h("kup-progress-bar", Object.assign({}, props));
-      case 'rating':
-        return (h("kup-rating", Object.assign({ value: stringToNumber(cell.value) }, props, { disabled: true })));
-      case 'radio':
-        classObj['is-centered'] = true;
-        props['disabled'] = row.readOnly;
-        return h("kup-radio", Object.assign({}, props));
-      case 'text-field':
-        props['disabled'] = row.readOnly;
-        props['dataSet'] = {
-          'data-cell': cell,
-          'data-column': column,
-          'data-row': row,
-        };
-        return h(FTextField, Object.assign({}, props));
-    }
-  }
-  setCell(cellType, props, content, classObj, cell, column) {
-    switch (cellType) {
-      case 'checkbox':
-        classObj['is-centered'] = true;
-        props['resource'] = props.checked
-          ? 'check_box'
-          : 'check_box_outline_blank';
-        return h(FImage, Object.assign({}, props));
-      case 'date':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return cellValue;
-        }
-        return content;
-      case 'datetime':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return cellValue;
-        }
-        return content;
-      case 'icon':
-      case 'image':
-        classObj['is-centered'] = true;
-        if (props.badgeData) {
-          classObj['has-padding'] = true;
-        }
-        return h(FImage, Object.assign({}, props));
-      case 'link':
-        return (h("a", { class: "cell-link", href: content, target: "_blank" }, cell.value));
-      case 'number':
-        if (content && content != '') {
-          const cellValueNumber = stringToNumber(cell.value);
-          const cellValue = getCellValueForDisplay(column, cell);
-          if (cellValueNumber < 0) {
-            classObj['negative-number'] = true;
-          }
-          return cellValue;
-        }
-        return content;
-      case 'time':
-        if (content && content != '') {
-          const cellValue = getCellValueForDisplay(column, cell);
-          return cellValue;
-        }
-        return content;
-      case 'string':
-      default:
-        return content;
-    }
-  }
   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();
@@ -3427,19 +3045,28 @@ 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" },
@@ -3463,9 +3090,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,
@@ -3480,134 +3107,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,14 +3243,11 @@ 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);
+    return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(FCellPadding));
   }
   renderDensityPanel() {
-    const listItems = this.createListData(this.DENSITY_CODES, this.DENSITY_ICONS, this.density);
+    const listItems = this.createListData(Object.values(FCellPadding), this.DENSITY_ICONS, this.density);
     const listData = { data: listItems, showIcons: true };
     const textfieldData = {
       trailingIcon: true,
@@ -3813,6 +3329,7 @@ export class KupDataTable {
         } })));
   }
   render() {
+    this.thRefs = [];
     this.rowsRefs = [];
     this.renderedRows = [];
     let elStyle = undefined;
@@ -3820,14 +3337,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 +3394,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));
       }
@@ -3930,9 +3440,8 @@ export class KupDataTable {
     if (this.tableHeight !== undefined || this.tableWidth !== undefined) {
       belowClass += ' custom-size';
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
     const compCreated = (h(Host, null,
-      customStyle ? h("style", null, customStyle) : 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" },
@@ -3944,6 +3453,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,40 +3472,9 @@ 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),
-              });
-            }, onMouseMove: (e) => this.mouseMoveHandler(e), onMouseOut: () => this.mouseOutHandler() },
+              e.preventDefault();
+            } },
             h("thead", { hidden: !this.showHeader, ref: (el) => (this.theadRef = el) },
               h("tr", null, header)),
             h("tbody", null, rows),
@@ -4002,18 +3483,20 @@ 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 + ']');
     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();
     }
@@ -4070,6 +3553,27 @@ export class KupDataTable {
         "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,
@@ -4112,9 +3616,14 @@ export class KupDataTable {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        "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,
@@ -4124,7 +3633,7 @@ export class KupDataTable {
       },
       "attribute": "density",
       "reflect": false,
-      "defaultValue": "'dense'"
+      "defaultValue": "FCellPadding.DENSE"
     },
     "dragEnabled": {
       "type": "boolean",
@@ -4141,7 +3650,7 @@ export class KupDataTable {
         "text": "Enables drag."
       },
       "attribute": "drag-enabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "dropEnabled": {
@@ -4159,7 +3668,7 @@ export class KupDataTable {
         "text": "Enables drop."
       },
       "attribute": "drop-enabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "editableData": {
@@ -4174,8 +3683,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 +3797,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 +3818,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 +3958,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 +4038,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 +4062,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 +4133,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 +4374,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 +4615,6 @@ export class KupDataTable {
     "columnMenuAnchor": {},
     "groupState": {},
     "openedTotalMenu": {},
-    "openedGroupMenu": {},
     "openedCustomSettings": {},
     "fontsize": {},
     "triggerColumnSortRerender": {}
@@ -5193,26 +4719,6 @@ export class KupDataTable {
           }
         }
       }
-    }, {
-      "method": "kupDataTableCellUpdate",
-      "name": "kup-datatable-cellupdate",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when a cell's data has been updated."
-      },
-      "complexType": {
-        "original": "KupDatatableCellUpdateEventPayload",
-        "resolved": "KupDatatableCellUpdateEventPayload",
-        "references": {
-          "KupDatatableCellUpdateEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
-          }
-        }
-      }
     }, {
       "method": "kupDataTableClick",
       "name": "kup-datatable-click",
@@ -5333,46 +4839,6 @@ export class KupDataTable {
           }
         }
       }
-    }, {
-      "method": "kupCellButtonClick",
-      "name": "kup-datatable-cellbuttonclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "KupDataTableCellButtonClickEventPayload",
-        "resolved": "KupDataTableCellButtonClickEventPayload",
-        "references": {
-          "KupDataTableCellButtonClickEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
-          }
-        }
-      }
-    }, {
-      "method": "kupCellTextFieldInput",
-      "name": "kup-datatable-textfieldinput",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "KupDataTableCellTextFieldInputEventPayload",
-        "resolved": "KupDataTableCellTextFieldInputEventPayload",
-        "references": {
-          "KupDataTableCellTextFieldInputEventPayload": {
-            "location": "import",
-            "path": "./kup-data-table-declarations"
-          }
-        }
-      }
     }]; }
   static get methods() { return {
     "closeColumnMenu": {
@@ -5428,8 +4894,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 +4926,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."
           }],
@@ -5523,13 +4989,47 @@ export class KupDataTable {
         "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"
+          }
+        },
+        "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."
+          }]
+      }
+    },
     "setProps": {
       "complexType": {
         "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 +5057,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."
           }],