1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056/// FOURJS_START_COPYRIGHT(D,2019)
/// Property of Four Js*
/// (c) Copyright Four Js 2019, 2022. All Rights Reserved.
/// * Trademark of Four Js Development Tools Europe Ltd
///   in the United States and elsewhere
///
/// This file can be modified by licensees according to the
/// product manual.
/// FOURJS_END_COPYRIGHT

"use strict";

modulum('RTableWidget', ['TableWidgetBase', 'WidgetFactory'],
  function(context, cls) {

    /**
     * Responsive table widget.
     * @class RTableWidget
     * @memberOf classes
     * @extends classes.TableWidgetBase
     * @publicdoc
     */
    cls.RTableWidget = context.oo.Class(cls.TableWidgetBase, function($super) {
      return /** @lends classes.RTableWidget.prototype */ {
        __name: "RTableWidget",

        $static: {
          defaultRowHeight: 24,
        },

        /** @type {classes.ContextMenuWidget} */
        _contextMenu: null,

        /** @type {classes.RTableRowWidget} */
        _headerRowWidget: null,
        /** @type {classes.RTableRowWidget} */
        _footerAggregatesRowWidget: null,

        /** @type {boolean} */
        _multiRowSelectionEnabled: false,

        // Pagination nav WIP
        /** @type {classes.PaginationWidget} */
        //_paginationWidget: null,

        /** @type {classes.RTableColumnWidget[]} */
        _columns: null,
        /** @type {classes.RTableColumnWidget[]} */
        _orderedColumns: null,

        /** @type {boolean} */
        _hasFooter: false,

        /** @type {boolean} */
        _firstLayout: true,

        /** @type {number} */
        _currentColumn: 0,

        /** DOM Elements */
        _headerGroupElement: null,
        _footerGroupElement: null,
        _scrollerElement: null,
        _aggregateGlobalTextElement: null,

        /** Dnd attributes */
        _dndMode: null,
        _dndMouseDragX: null, // mouse X position when dragging (ugly hack for FF because drag event does not contain mouse coordinates)
        _dndReorderingDragOverWidget: null,
        _dndDraggedColumnWidget: null,

        /** Item client selection */
        _defaultItemSelection: false,
        _firstItemSelected: null,
        _itemSelectionInProgress: false,
        _itemSelectionHasChanged: false,
        _itemSelectionElement: null,

        /** @type {number|null} */
        lastSentOffset: null,

        /** @type {number} */
        _previousScrollLeftValue: 0,
        /** @type {number} */
        _previousScrollTopValue: 0,

        /** @type {boolean} */
        _frozenTable: false,
        /** @type {number} */
        _leftFrozenColumns: 0,
        /** @type {number} */
        _rightFrozenColumns: 0,

        /** @type {String} */
        _evenRowBackgroundColor: "",
        /** @type {String} */
        _oddRowBackgroundColor: "",

        /** @type {String} */
        _viewType: "", // Type of table view

        // All views: variables/settings
        /** @type {boolean|null} */
        _alternateRows: null,
        /** @type {boolean|null} */
        _rowHover: null,

        // 4st styles
        /** @type {boolean|null} */
        _showGridX: null,
        /** @type {boolean|null} */
        _showGridY: null,
        /** @type {boolean|null} */
        _headerHidden: null,
        /** @type {String} */
        _headerAlignment: null,

        /**
         * @inheritDoc
         */
        _initElement: function() {
          $super._initElement.call(this);

          // Pagination nav WIP
          //this._paginationWidget = cls.WidgetFactory.createWidget("Pagination", this.getBuildParameters());
          //this._paginationWidget.setParentWidget(this);
          //this._element.appendChild(this._paginationWidget.getElement());

          this._columns = [];
          this.setViewType("classic");
          this.setRowHeight(cls.RTableWidget.defaultRowHeight);
          this.setAlternateRows(true);
          this.setRowHover(!window.isMobile());

          if (this.isTreeView()) {
            this.getElement().addClass("gbc_TreeView");
          }

          this._rowBoundWidget = this.getApplicationWidget().getRowBoundMenu();

          // set scrollbar size for css rules
          this._element.style.setProperty('--scrollBarHorizontalHeight', window.scrollBarSize + "px");
          this._element.style.setProperty('--scrollBarVerticalWidth', window.scrollBarSize + "px");
        },

        /**
         * @inheritDoc
         */
        _initContainerElement: function() {
          $super._initContainerElement.call(this);

          this.getScrollableArea().on('scroll.RTableWidget', this._onScroll.bind(this));

          this._headerRowWidget = cls.WidgetFactory.createWidget("RTableRow", this.getBuildParameters());
          this._headerRowWidget.setHeader(true);
          this.getHeaderGroupElement().appendChild(this._headerRowWidget.getElement());
          this._headerRowWidget.setParentWidget(this);

          this.getHeaderGroupElement()
            .on("dragstart.RTableWidget", this._onHeaderDragStart.bind(this))
            .on("dragend.RTableWidget", this._onHeaderDragEnd.bind(this))
            .on("drag.RTableWidget", this._onHeaderDrag.throttle(5).bind(this))
            .on("dragover.RTableWidget", this._onHeaderDragOver.bind(this))
            .on("drop.RTableWidget", this._onHeaderDrop.bind(this))
            .on("dragleave.RTableWidget", this._onHeaderDragLeave.bind(this));

          // client select items events
          this.getElement()
            .on("mousedown.RTableWidget", this._onItemMouseDown.bind(this))
            .on("mouseup.RTableWidget", this._onItemMouseUp.bind(this))
            .on("mouseleave.RTableWidget", this._onItemMouseLeave.bind(this));

          this._footerAggregatesRowWidget = cls.WidgetFactory.createWidget("RTableRow", this.getBuildParameters());
          this._footerAggregatesRowWidget.setFooter(true);
          this.getFooterGroupElement().appendChild(this._footerAggregatesRowWidget.getElement());
          this._footerAggregatesRowWidget.setParentWidget(this);
        },

        /**
         * @inheritDoc
         */
        _whenParentActivated: function(opt) {
          $super._whenParentActivated.call(this, opt);

          let widgetActivated = opt.data.length > 0 && opt.data[0];
          if (this.isChildOf(widgetActivated)) {
            let contextScrollTop = this._previousScrollTopValue;
            let contextScrollLeft = this._previousScrollLeftValue;
            this.getScrollableArea().scrollTop = contextScrollTop;
            this.getScrollableArea().scrollLeft = contextScrollLeft;

            // synchronize header & data horizontal scroll
            this.getHeaderGroupElement().scrollLeft = contextScrollLeft;
            this.getFooterGroupElement().scrollLeft = contextScrollLeft;
          }
        },

        /**
         * @inheritDoc
         */
        _initLayout: function() {
          this._layoutInformation = new cls.LayoutInformation(this);
          this._layoutEngine = new cls.RTableLayoutEngine(this);
          this._layoutEngine.onLayoutApplied(this._layoutApplied.bind(this));

          this._layoutInformation.getStretched().setDefaultX(true);
          this._layoutInformation.getStretched().setDefaultY(true);

          let minPageSize = parseInt(context.ThemeService.getValue("gbc-TableWidget-min-page-size"), 10);
          this._layoutEngine.setMinPageSize(isNaN(minPageSize) ? 1 : minPageSize);
          let minWidth = parseInt(context.ThemeService.getValue("gbc-TableWidget-min-width"), 10);
          this._layoutEngine.setMinWidth(isNaN(minWidth) ? 60 : minWidth);
        },

        /**
         * @inheritDoc
         */
        resetLayout: function() {
          $super.resetLayout.call(this);
          this._firstLayout = true;
          this._layoutEngine.resetLayout();
        },

        /**
         * Call when layout is finished
         */
        _layoutApplied: function() {
          if (this.isElementInDOM()) {

            if (this._firstLayout) {
              // first time layout is applied
              this._firstLayout = false;
              this.updateFrozenColumns();
              this.updateAllAggregate();
            }
          }
        },

        /**
         * @inheritDoc
         */
        destroy: function() {
          if (this._headerRowWidget) {
            this._headerRowWidget.destroy();
            this._headerRowWidget = null;
          }

          if (this._footerAggregatesRowWidget) {
            this._footerAggregatesRowWidget.destroy();
            this._footerAggregatesRowWidget = null;
          }

          if (this._contextMenu) {
            this._contextMenu.destroyChildren();
            this._contextMenu.destroy();
            this._contextMenu = null;
          }

          // Pagination nav WIP
          //if (this._paginationWidget) {
          //  this._paginationWidget.destroy();
          //  this._paginationWidget = null;
          //}

          this.setDndItemEnabled(false);

          this.getScrollableArea().off('scroll.RTableWidget');

          this.getHeaderGroupElement().off("dragstart.RTableWidget");
          this.getHeaderGroupElement().off("dragend.RTableWidget");
          this.getHeaderGroupElement().off("drag.RTableWidget");
          this.getHeaderGroupElement().off("dragover.RTableWidget");
          this.getHeaderGroupElement().off("drop.RTableWidget");
          this.getHeaderGroupElement().off("dragleave.RTableWidget");

          // client select items events
          this.getElement().off("mousedown.RTableWidget");
          this.getElement().off("mouseup.RTableWidget");
          this.getElement().off("mousemove.RTableWidget");
          this.getElement().off("mouseleave.RTableWidget");

          this._headerGroupElement = null;
          this._footerGroupElement = null;
          this._aggregateGlobalTextElement = null;
          this._scrollerElement = null;

          this._columns = [];
          this._orderedColumns = null;

          this.destroyChildren();
          $super.destroy.call(this);
        },

        /**
         * @inheritDoc
         */
        setFocus: function(fromMouse) {
          if (this.isElementInDOM()) {
            this.domFocus(fromMouse);
          } else {
            let uiWidget = this.getUserInterfaceWidget();
            if (uiWidget) {
              uiWidget.getElement().domFocus();
            }
          }
          $super.setFocus.call(this, fromMouse);

          // if focus comes from VM not mouse
          if (!fromMouse) {
            this.addClass("rowBound");

            // update rowBound quick actions
            for (const row of this.getRows()) {
              row.getRowBoundDecoratorWidget().updateQuickActions();
            }
          }
        },

        /**
         * @inheritDoc
         */
        loseVMFocus: function(vmNewFocusedWidget = null) {
          $super.loseVMFocus.call(this, vmNewFocusedWidget);

          // if new focused widget is not in the table
          if (!vmNewFocusedWidget.isInTable(this)) {
            this.removeClass("rowBound");
          }
        },

        /**
         * @inheritDoc
         */
        manageKeyDown: function(keyString, domKeyEvent, repeat) {
          let keyProcessed = false;

          if (this.isDisplayMode()) {
            if (domKeyEvent) {
              let key = cls.KeyboardApplicationService.keymap[domKeyEvent.which];
              keyProcessed = true;
              switch (key) {
                case "down":
                  this.emit(context.constants.widgetEvents.keyArrowDown, domKeyEvent);
                  break;
                case "up":
                  this.emit(context.constants.widgetEvents.keyArrowUp, domKeyEvent);
                  break;
                case "left":
                  this.emit(context.constants.widgetEvents.keyArrowLeft, domKeyEvent);
                  break;
                case "right":
                  this.emit(context.constants.widgetEvents.keyArrowRight, domKeyEvent);
                  break;
                case "pageup":
                  this.emit(context.constants.widgetEvents.keyPageUp, domKeyEvent);
                  break;
                case "pagedown":
                  this.emit(context.constants.widgetEvents.keyPageDown, domKeyEvent);
                  break;
                case "home":
                  this.emit(context.constants.widgetEvents.keyHome, domKeyEvent);
                  break;
                case "end":
                  this.emit(context.constants.widgetEvents.keyEnd, domKeyEvent);
                  break;
                case "space":
                  this.emit(context.constants.widgetEvents.keySpace, domKeyEvent);
                  break;
                default:
                  keyProcessed = false;
              }
            }

            if (keyString === "ctrl+a" || keyString === "meta+a") {
              this.emit(context.constants.widgetEvents.selectAll);
              keyProcessed = true;
            }
          }

          if (keyProcessed) {
            return true;
          } else {
            return $super.manageKeyDown.call(this, keyString, domKeyEvent, repeat);
          }
        },

        /**
         * @inheritDoc
         */
        managePriorityKeyDown: function(keyString, domKeyEvent, repeat) {
          let keyProcessed = false;

          if (this._contextMenu && this._contextMenu.isVisible()) {
            return this._contextMenu.managePriorityKeyDown(keyString, domKeyEvent, repeat);
          }

          // manage CTRL+C case
          if (keyString === "ctrl+c" || keyString === "meta+c") {
            if (this.hasItemsSelected()) { // copy selection
              this._copySelectionInClipboard();
              keyProcessed = true;
            } else if (this.isDisplayMode()) { // copy current row
              this.emit(context.constants.widgetEvents.copy);
              keyProcessed = true;
            }
          }

          if (keyProcessed) {
            return true;
          } else {
            return $super.managePriorityKeyDown.call(this, keyString, domKeyEvent, repeat);
          }
        },

        /**
         * @inheritDoc
         */
        manageMouseClick: function(domEvent) {
          if (domEvent.target === this.getContainerElement() || !this.isEnabled()) {
            this.emit(context.constants.widgetEvents.requestFocus);

            // Add new row, done by emit(tableColumnAfterLastItemClick)
            // when click in the container element and not in a RTableItem element
            if (this.getOrderedColumns().length > 1) {

              let xClick = domEvent.clientX || domEvent.screenX;
              for (const col of this.getOrderedColumns()) {
                let rect = col.getElement().getBoundingClientRect();
                // if click after last item of a column
                if (xClick > rect.left && xClick < rect.right) {
                  col.emit(context.constants.widgetEvents.tableColumnAfterLastItemClick);
                  return false;
                }
              }
              // if click is not after the last item use first column to add new row
              this.getOrderedColumns()[0].emit(context.constants.widgetEvents.tableColumnAfterLastItemClick);
            }
            return false;
          } else if (domEvent.target.elementOrParent("gbc_TableMenuIcon")) {
            this._buildContextMenu(domEvent);
            return false;
          }
          return true;
        },

        /**
         * @inheritDoc
         */
        manageMouseDblClick: function(domEvent) {
          let target = domEvent.target;

          // click on data
          let isDataContainerClick = target.isElementOrChildOf(this.getContainerElement());

          if (isDataContainerClick) {
            if (this.isRowActionTriggerByDoubleClick()) {
              // emit row action for this table
              this.emit(context.constants.widgetEvents.rowAction);
            }
            return false;
          }

          return true;
        },

        /**
         * Build context menu and show it
         */
        _buildContextMenu: function(domEvent) {

          if (this._contextMenu) {
            this._contextMenu.destroyChildren();
            this._contextMenu.destroy();
            this._contextMenu = null;
          }

          let opts = this.getBuildParameters();
          opts.inTable = false; // contextmenu is not really in the table, it is outside
          opts.ignoreLayout = true;

          this._contextMenu = cls.WidgetFactory.createWidget("ContextMenu", opts);
          this._contextMenu.allowMultipleChoices(true);
          this._contextMenu.setParentWidget(this);
          this._contextMenu.setColor(this.getColor());
          this._contextMenu.setBackgroundColor(this.getBackgroundColor());
          this._contextMenu.onClose(function() {
            this.afterDomMutator(function() {
              if (this._contextMenu) {
                this._contextMenu.destroyChildren();
                this._contextMenu.destroy();
                this._contextMenu = null;
              }
            }.bind(this));
          }.bind(this), true);

          // Hide/show columns
          let hideShowFunc = function() {
            this.emit(gbc.constants.widgetEvents.tableShowHideCol, "toggle");

            // refocus UI widget to keep typeahead key processing & dropdown manage keys active
            // because dropdown element is outside UserInterface in the HTML Dom
            let tableWidget = this.getTableWidgetBase();
            if (tableWidget._contextMenu && tableWidget._contextMenu.isVisible()) {
              let uiWidget = tableWidget.getUserInterfaceWidget();
              if (uiWidget) {
                uiWidget.getElement().domFocus();
              }
            }
          };

          // Be sure that the last checkbox is always check (cannot hide all columns)
          let checkLast = function(checkWidget, tableWidget) {
            const children = tableWidget._contextMenu.getChildren();
            let checkCount = children.filter(function(c) {
              if (c._colWidget) {
                c.setEnabled(!c._colWidget.isUnhidable());
                if (c.isInstanceOf(cls.CheckBoxWidget) && c.getValue()) {
                  return c;
                }
              }
            });
            if (checkCount.length === 1) {
              checkCount[0].setEnabled(false);
            }
          };

          // for each col add hide/show checkbox
          for (const col of this.getOrderedColumns()) {
            if (!col.isAlwaysHidden()) {
              let check = cls.WidgetFactory.createWidget("CheckBox", opts);
              check._colWidget = col;
              check.setEnabled(!col.isUnhidable());
              check.setText(col.getText());
              check.setValue(!col.isHidden());
              check.when(context.constants.widgetEvents.click, checkLast.bind(col, check, this));
              this._contextMenu.addChildWidget(check, {
                clickCallback: hideShowFunc.bind(col)
              });
              checkLast(check, this);
            }
          }

          this._contextMenu.addSeparator();

          // Show all columns action
          let showAllColumnsLabel = cls.WidgetFactory.createWidget("Label", opts);
          showAllColumnsLabel.setValue(i18next.t("gwc.contextMenu.showAllColumns"));
          showAllColumnsLabel.addClass("gbc_showAllColumns_action");
          this._contextMenu.addChildWidget(showAllColumnsLabel, {
            clickCallback: function() {
              let columns = this.getColumns();
              for (let i = 0; i < columns.length; i++) {
                let tc = columns[i];
                if (!tc.isAlwaysHidden() && !tc.isUnhidable()) {
                  tc.emit(gbc.constants.widgetEvents.tableShowHideCol, "show");
                }
              }
            }.bind(this)
          });

          // AutoFit column width based on values
          let autoFitAllColumnsLabel = cls.WidgetFactory.createWidget("Label", opts);
          autoFitAllColumnsLabel.setValue(i18next.t("gwc.contextMenu.autoFitAllColumns"));
          autoFitAllColumnsLabel.addClass("gbc_autoFitAllColumns_action");
          this._contextMenu.addChildWidget(autoFitAllColumnsLabel, {
            clickCallback: function() {
              this.autoFitAllColumns();
            }.bind(this)
          });

          // Fit column width so all columns visible
          // Example: if table width = 600px and there are two columns currently 100 and 200px
          // then this will set width of columns to 200 and 400 px respectively
          let fitToViewAllColumnsLabel = cls.WidgetFactory.createWidget("Label", opts);
          fitToViewAllColumnsLabel.setValue(i18next.t("gwc.contextMenu.fitToViewAllColumns"));
          fitToViewAllColumnsLabel.addClass("gbc_fitToViewAllColumns_action");
          this._contextMenu.addChildWidget(fitToViewAllColumnsLabel, {
            clickCallback: function() {
              this.fitToViewAllColumns();
            }.bind(this)
          });

          this._contextMenu.addSeparator();

          // Reset to default action
          let resetDefaultLabel = cls.WidgetFactory.createWidget("Label", opts);
          resetDefaultLabel.setValue(i18next.t("gwc.contextMenu.restoreDefaultSettings"));
          resetDefaultLabel.addClass("gbc_restoreColumnSort_action");
          this._contextMenu.addChildWidget(resetDefaultLabel, {
            clickCallback: function() {
              this.emit(context.constants.widgetEvents.tableResetToDefault);
            }.bind(this)
          });

          // Reset sort order action
          let resetLabel = cls.WidgetFactory.createWidget("Label", opts);
          resetLabel.setValue(i18next.t("gwc.contextMenu.restoreColumnSort"));
          resetLabel.addClass("gbc_restoreColumnSort_action");
          this._contextMenu.addChildWidget(resetLabel, {
            clickCallback: function() {
              this.emit(context.constants.widgetEvents.tableHeaderSort, -1);
            }.bind(this)
          });

          // beware setFocus should not raise a scroll event (it will immediately close contextmenu)
          this._element.domFocus(null, this.getElement());

          this._contextMenu.reverseX = true;
          this._contextMenu.parentElement = domEvent.target;
          this._contextMenu.show();
        },

        /**
         * @inheritDoc
         */
        buildExtraContextMenuActions: function(contextMenu) {
          contextMenu.addAction("copyRow", i18next.t("gwc.contextMenu.copyRow"), null, "Ctrl+C", {
            clickCallback: function() {
              contextMenu.hide();
              this._copyCurrentRowInClipboard();
            }.bind(this)
          }, true);

          if (this.isMultiRowSelectionEnabled()) {
            contextMenu.addAction("selectAll", i18next.t("gwc.contextMenu.selectAll"), "font:FontAwesome.ttf:f0ea", "Ctrl+A", {
              clickCallback: function() {
                contextMenu.hide();
                this.emit(context.constants.widgetEvents.selectAll);
              }.bind(this)
            }, true);
          }
        },

        /**
         * Invalidate measure to force width & row height measure in next layout cycle
         */
        resetMeasure: function() {
          this.resetLayout();
          this.getLayoutEngine().forceMeasurement();
          this.getLayoutEngine().invalidateMeasure();
          if (this.getLayoutEngine().invalidatePreferredSize) {
            this.getLayoutEngine().invalidatePreferredSize();
          }
        },

        /**
         * Update table depending on parameters
         * @param {boolean} resetOrderedColumns - reset ordered columns
         * @param {boolean} layoutRow - update row height layout
         * @param {boolean} layoutCol - update col width layout
         */
        update: function(resetOrderedColumns, layoutRow, layoutCol) {

          if (resetOrderedColumns) {
            this.resetOrderedColumns();
          }
          if (this.getLayoutEngine().measureRowsCols(layoutRow, layoutCol)) {
            this.getLayoutEngine().measureDecoration();
            this.updateAllAggregate();
            this.updateFrozenColumns();
          }
        },

        /**
         * Change the type of view (classic, flipped, listview)
         * @param {String} viewType - type of view (classic, flipped, listview)
         * @param {boolean} [forceLayout] - if true, force layout of table
         */
        setViewType: function(viewType, forceLayout = false) {
          if (this._viewType !== viewType) {
            this._viewType = viewType;
            this.getElement().setAttribute("viewType", viewType);

            if (forceLayout) {
              this.update(false, true, true);
              this.emit(context.constants.widgetEvents.layout);
              this.updateVerticalScroll(true);
            }
          }
        },

        /**
         * Return type of view (classic, flipped, listview)
         * @return {String} (classic, flipped, listview)
         */
        getViewType: function() {
          return this._viewType;
        },

        /**
         * Is flipped view ?
         * @return {boolean} is flipped view ?
         */
        isFlipped: function() {
          return this._viewType === "flipped";
        },

        /**
         * Enable/disable alternate row color
         * @param {boolean} b - enable/disable alternate row color
         * @param {boolean} forceUpdate - force update of alternate row colors
         */
        setAlternateRows: function(b, forceUpdate = false) {
          let update = forceUpdate;
          if (this._alternateRows !== b) {
            this._alternateRows = b;

            let evenRowBackgroundColor = context.ThemeService.getValue("gbc-TableWidget-even-row-background-color");
            let oddRowBackgroundColor = context.ThemeService.getValue("gbc-TableWidget-odd-row-background-color");
            this._evenRowBackgroundColor = this._alternateRows ? evenRowBackgroundColor : "transparent";
            this._oddRowBackgroundColor = this._alternateRows ? oddRowBackgroundColor : "transparent";

            update = true;
          }

          if (update) {
            // update odd and even backcolor
            // if diff offset is odd, switch odd/even colors
            let switchOddEven = (this._offset % 2 !== 0);
            this.getElement().style.setProperty('--evenRowBackgroundColor', switchOddEven ? this._evenRowBackgroundColor : this
              ._oddRowBackgroundColor);
            this.getElement().style.setProperty('--oddRowBackgroundColor', switchOddEven ? this._oddRowBackgroundColor : this
              ._evenRowBackgroundColor);
          }
        },

        /**
         * Called when a scroll is done
         * @param {Object} event - scroll event
         */
        _onScroll: function(event) {

          this.afterDomMutator(function() {
            if (event.target) {
              // Emit scroll event for vertical scrolling
              this.emit(context.constants.widgetEvents.scroll, event, this.getRowHeight());
            }
          }.bind(this));

          // synchronize header & data horizontal scroll
          this.getHeaderGroupElement().scrollLeft = event.target.scrollLeft;
          this.getFooterGroupElement().scrollLeft = event.target.scrollLeft;

          this._previousScrollLeftValue = event.target.scrollLeft;
          this._previousScrollTopValue = event.target.scrollTop;

          // reset items selection after each scroll change
          this._resetItemsSelection();
        },

        /**
         * @inheritDoc
         */
        setScrolling: function(up, down) {
          // unnecessary for now
          //this.getScrollerElement().toggleClass("scrollingUp", up);
          //this.getScrollerElement().toggleClass("scrollingDown", down);
        },

        /**
         * Returns item widget
         * @param {number} row - item row
         * @param {number} col - item col
         * @returns {classes.RTableItemWidget} item widget
         * @publicdoc
         */
        getItem: function(row, col) {
          return this.getRows()[row].getItems()[col];
        },

        /**
         * Returns row widgets
         * @returns {classes.RTableRowWidget[]} array of row widgets
         * @publicdoc
         */
        getRows: function() {
          return this.getChildren();
        },

        /**
         * Returns header row widget
         * @returns {classes.RTableRowWidget} header row widget
         * @publicdoc
         */
        getHeaderRowWidget: function() {
          return this._headerRowWidget;
        },

        /**
         * Returns footer row widget
         * @returns {classes.RTableRowWidget} footer row widget
         * @publicdoc
         */
        getFooterAggregatesRowWidget: function() {
          return this._footerAggregatesRowWidget;
        },

        /**
         * @inheritDoc
         */
        setPageSize: function(pageSize) {
          if (this._pageSize !== pageSize) {
            this.getElement().style.setProperty('--pageSize', pageSize);
            this._resetItemsSelection(); // reset items selection after pageSize change
          }
          $super.setPageSize.call(this, pageSize);
        },

        /**
         * @inheritDoc
         */
        setBufferSize: function(bufferSize) {
          if (this._bufferSize !== bufferSize) {
            this.getElement().style.setProperty('--bufferSize', bufferSize);
          }
          $super.setBufferSize.call(this, bufferSize);
        },

        /**
         * @inheritDoc
         */
        setSize: function(size) {
          if (this._size !== size) {
            this.getElement().style.setProperty('--size', size);
          }
          $super.setSize.call(this, size);
        },

        /**
         * @inheritDoc
         */
        addChildWidget: function(widget, options) {
          options = options || {};

          if (options.isRowData) {
            let rowWidget = this.getRows()[options.rowIndex];

            // create row widget
            if (!rowWidget) {
              rowWidget = cls.WidgetFactory.createWidget("RTableRow", this.getBuildParameters());
              $super.addChildWidget.call(this, rowWidget);

              if (this.hasRowBound()) {
                rowWidget.addRowBoundDecorator();
              }
            }
            // add item to row widget
            rowWidget.addChildWidget(widget, options);
          } else if (widget.isInstanceOf(cls.RTableColumnWidget)) {
            options.headerItem = true;
            options.colWidget = widget;
            this.getHeaderRowWidget().addChildWidget(widget, options);
          } else {
            $super.addChildWidget.call(this, widget, options);

            if (widget.isInstanceOf(cls.ContextMenuWidget) && this.hasRowBound()) {
              // rowbound widget: must decorator on all rows
              for (const row of this.getRows()) {
                row.addRowBoundDecorator(); // TODO ?????
              }
            }
          }

          this.resetOrderedColumns();
        },

        /**
         * @inheritDoc
         */
        removeChildWidget: function(widget) {
          $super.removeChildWidget.call(this, widget);
          this.resetOrderedColumns();
        },

        /**
         * @inheritDoc
         */
        setVisibleRows: function(visibleRows) {
          if (this._visibleRows !== visibleRows) {
            this._visibleRows = visibleRows;
            let rows = this.getRows();
            for (let i = 0; i < rows.length; ++i) {
              let row = rows[i];
              row.setHidden(i >= visibleRows);
            }
          }
        },

        /**
         * @inheritDoc
         */
        setRowHeight: function(height) {
          if (this._rowHeight !== height) {
            this.getElement().style.setProperty('--rowHeight', height + "px");
          }
          $super.setRowHeight.call(this, height);
        },

        /**
         * @inheritDoc
         */
        setVerticalScroll: function(size, pageSize, offset, forceScroll) {

          // Pagination nav WIP
          //if (this._paginationWidget) {
          //  this._paginationWidget.update(size, pageSize, offset);
          //}

          this.setSize(size);
          this.setPageSize(pageSize);

          if (size !== null && this.getLayoutEngine().isLayoutDone()) {

            let top = 0;
            if (this.isEnabled()) {
              top = offset * this.getRowHeight();
            }
            this.getElement().style.setProperty('--scrollTop', top + "px");

            // if offset is different or if scrolltop value of current scrollarea is different too different from calculated value
            // need to rest scrolltop of scrollablearea
            if (!!forceScroll || (this.lastSentOffset === null || this.lastSentOffset === offset) && offset !== this._offset) {

              // need to do this because to scroll we need to wait the style "height" set just before is really applied in the dom
              this.afterDomMutator(function() {
                this.doScroll(top, false);
              }.bind(this));

              this._offset = offset;
            }
            this.lastSentOffset = null;
            this.setAlternateRows(this._alternateRows, true);

          }
          this.setScrolling(false, false);

        },

        /**
         * Returns if vertical scroll bar is at end
         * @returns {boolean} true if vertical Scroll bar is at end
         */
        isVerticalScrollAtEnd: function() {
          let scrollArea = this.getScrollableArea();
          return (scrollArea.scrollTop + scrollArea.clientHeight) === scrollArea.scrollHeight;
        },

        /**
         * Do native vertical scroll
         * @param {number} value - new scroll value
         * @param {boolean} delta - if true, value is added to old scroll value
         */
        doScroll: function(value, delta) {
          let top = value;
          if (delta) {
            top = (this.getScrollableArea().scrollTop + value);
          }
          this.getScrollableArea().scrollTop = top;
        },

        /**
         * Do a horizontal scrolling (column by column)
         * @param {string} direction - "left" or "right"
         */
        doHorizontalScroll: function(direction) {
          let scrollArea = this.getScrollableArea();
          let scrollPos = scrollArea.scrollLeft;
          let columns = this.getOrderedColumns();
          let width = 0;
          for (let i = 0; i < columns.length; i++) {
            let col = columns[i];
            if (col.isFrozen() === false && col.isHidden() === false) {
              let colWidth = col.getWidth();

              let isScrollAtStartColumn = (Math.abs(scrollPos - width) <= 2);
              let isScrollAtEndColumn = (Math.abs(scrollPos - (width + colWidth)) <= 2);
              if ((isScrollAtStartColumn || scrollPos > width) && (isScrollAtEndColumn || scrollPos < width + colWidth)) {
                if (isScrollAtStartColumn && direction === "right") {
                  scrollPos = width + colWidth;
                  direction = "left";
                } else if (isScrollAtEndColumn && direction === "right") {
                  scrollPos = width + colWidth;
                } else {
                  scrollArea.scrollLeft = direction === "right" ? width + colWidth : width;
                  break;
                }
              }
              width += colWidth;
            }
          }
        },

        /**
         * @inheritDoc
         */
        setCurrentRow: function(row, ensureRowVisible) {
          this._currentRow = row;
          let children = this.getRows();
          let length = children.length;
          for (let i = 0; i < length; ++i) {
            let rowWidget = children[i];
            rowWidget.setCurrent(i === row);
          }
        },

        /**
         * @inheritDoc
         */
        setCurrentColumn: function(col) {
          this._currentColumn = col;
          let columns = this.getColumns();
          for (let i = 0; i < columns.length; i++) {
            if (columns[i].setCurrent) {
              columns[i].setCurrent(i === col);
            }
          }
        },

        /** Returns current column
         * @returns {number} current column
         * @public
         */
        getCurrentColumn: function() {
          return this._currentColumn;
        },

        /**
         * Add a table column (virtual)
         * @param {classes.RTableColumnWidget} col - table column
         */
        addColumn: function(col) {
          this._columns.push(col);
        },

        /**
         * Returns an array with all table columns
         * @return {classes.RTableColumnWidget[]} table columns array
         */
        getColumns: function() {
          return this._columns;
        },

        /**
         * Reset cache of ordered columns.
         */
        resetOrderedColumns: function() {
          this._orderedColumns = null;
        },

        /**
         * Returns column widgets (visual order)
         * @returns {classes.RTableColumnWidget[]} array of column widgets
         * @publicdoc
         */
        getOrderedColumns: function() {
          let columns = this.getColumns();
          if (this._orderedColumns === null || columns.length !== this._orderedColumns.length) {
            let children = columns.slice();
            children.sort(function(a, b) {
              return a.getOrder() - b.getOrder();
            });
            this._orderedColumns = children;
          }
          return this._orderedColumns;
        },

        /**
         * Set sorted column and type
         * @param sortType - sort type "asc" or "desc" (empty string for no sort)
         * @param sortColumn - column sorted (-1 for no sort)
         */
        setSort: function(sortType, sortColumn) {
          let columns = this.getColumns();

          for (let i = 0; i < columns.length; i++) {
            if (i === sortColumn) {
              columns[i].setSortDecorator(sortType);
            } else {
              columns[i].setSortDecorator("");
            }
          }
        },

        /**
         * Enable/disable row hover
         * @param {boolean} rowHover - if true enable row hover, else disable it
         */
        setRowHover: function(rowHover) {
          if (this._rowHover !== rowHover) {
            this._rowHover = rowHover;
            this._element.toggleClass("rowHover", Boolean(rowHover));
          }
        },

        /**
         * @param {boolean} enable - true if the table should allow multi-row selection, false otherwise
         */
        setMultiRowSelectionEnabled: function(enable) {
          if (this._multiRowSelectionEnabled !== enable) {
            this._multiRowSelectionEnabled = enable;
            this._element.toggleClass("multiRowSelection", enable);
          }
        },

        /**
         * Returns if multi-row selection is enabled
         * @returns {boolean} true if the table allow multi-row selection, false otherwise
         * @publicdoc
         */
        isMultiRowSelectionEnabled: function() {
          return this._multiRowSelectionEnabled;
        },

        /**
         * Sets the specified row is selected
         * @param {number} row - index of the row
         * @param {boolean} selected - true if the row should be selected, false otherwise
         */
        setRowSelected: function(row, selected) {
          if (row < this.getRows().length) {
            this.getRows()[row].setSelected(selected);
          }
        },

        /**
         * Returns if the specified row is selected
         * @param {number} row - index of the row
         * @returns {boolean} true if the row is selected, false otherwise
         */
        isRowSelected: function(row) {
          return (row < this.getRows().length) && this.getRows()[row].isSelected();
        },

        /**
         * Auto fit all column widths
         */
        autoFitAllColumns: function() {
          let columns = this.getColumns();
          for (let i = 0; i < columns.length; i++) {
            let tc = columns[i];
            tc.autoSetWidth();
          }
        },

        /**
         * Auto fit column widths so all columns visible.
         */
        fitToViewAllColumns: function() {
          // phase 1 work out total
          let columns = this.getColumns();
          let totalAvail = this.getDataAreaWidth();
          let totalCurrent = 0;
          let tc = null,
            i = 0;
          for (i = 0; i < columns.length; i++) {
            tc = columns[i];
            if (!tc.isHidden()) {
              if (tc.isSizable()) {
                totalCurrent = totalCurrent + tc.getWidth();
              } else {
                totalAvail = totalAvail - tc.getWidth();
              }
            }
          }
          // phase 2 set column width in proportion to space available
          let newTotal = 0;
          if (totalCurrent > 0) {
            for (i = 0; i < columns.length; i++) {
              tc = columns[i];
              if (!tc.isHidden() && tc.isSizable()) {
                let w = Math.round(tc.getWidth() * (totalAvail / totalCurrent));
                newTotal = newTotal + w;
                if (newTotal > totalAvail) {
                  w = w - (newTotal - totalAvail); // to be sure that the total of width is not > totalAvail
                }
                tc.setUserWidthFromInteraction(w);
              }
            }
          }
        },

        /**
         * @inheritDoc
         */
        setEnabled: function(enabled) {
          if (this._enabled !== enabled) {
            $super.setEnabled.call(this, enabled);

            this._resetItemsSelection();
            this.updateVerticalScroll(enabled);
          }
        },

        // ============== START - HEADER Event/DnD FUNCTIONS ===================

        /**
         * Handle drag over on header
         * @param {Object} event - DOM event
         * @private
         */
        _onHeaderDragOver: function(evt) {
          this._dndMouseDragX = evt.clientX || evt.screenX; // Fix for FF

          // Prevent default on dragover, to remove forbidden icon on drag
          if (this._dndMode) {
            evt.preventCancelableDefault();
          }

          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (!columnWidget) {
            return;
          }
          columnWidget.onReorderingDragOver(evt);
        },

        /**
         * Handle drag start on header
         * @param {Object} evt - dragstart event
         */
        _onHeaderDragStart: function(evt) {
          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (!columnWidget) {
            return;
          }

          if (evt.target.hasClass("resizer")) { // drag start on resizer
            columnWidget.onResizerDragStart(evt);
          } else if (evt.target.hasClass("headerText")) { // drag start on headerText
            columnWidget.onReorderingDragStart(evt);
          }
        },

        /**
         * Handle drag start on header
         * @param {Object} evt - dragend event
         */
        _onHeaderDragEnd: function(evt) {
          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (!columnWidget || !evt.target.hasClass) {
            return;
          }

          if (evt.target.hasClass("resizer")) { // drag end on resizer
            columnWidget.onResizerDragEnd(evt);
          } else if (evt.target.hasClass("headerText")) { // drag end on headerText
            columnWidget.onReorderingDragEnd(evt);
          }
        },

        /**
         * Handle drag start on header
         * @param {Object} evt - drag start event
         */
        _onHeaderDrag: function(evt) {
          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (!columnWidget || !evt.target.hasClass) {
            return;
          }

          if (evt.target.hasClass("resizer")) { // drag end on resizer
            columnWidget.onResizerDrag(evt);
          }
        },

        /**
         * Handle drop event on header
         * @param {Object} evt - drop event
         */
        _onHeaderDrop: function(evt) {
          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (columnWidget) {
            columnWidget.onReorderingDrop(evt);
          } else if (this._dndMode === "columnReordering") {
            if (this._dndReorderingDragOverWidget === null) { // it means user drop column on the header but after the last column
              let orderedColumns = this.getOrderedColumns();
              this._dndDraggedColumnWidget.reorderColumns(this._dndDraggedColumnWidget, orderedColumns[
                orderedColumns.length - 1]);
            }
          }
        },

        /**
         * Handle drag leave on header
         * @param {Object} evt - drag leave event
         */
        _onHeaderDragLeave: function(evt) {
          let columnWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableColumnWidget");
          if (!columnWidget) {
            return;
          }
          columnWidget.onReorderingDragLeave(evt);
        },

        // ============== END - HEADER Event/DnD FUNCTIONS ===================

        // ============== START - ITEMS CLIENT SELECTION FUNCTIONS ===================

        /**
         * Set if item selection is the default behavior (disable dnd in this case)
         * @param {boolean} b
         */
        setDefaultItemSelection: function(b) {
          this._defaultItemSelection = b;
          if (b === true) {
            this.setDndItemEnabled(false);
          }
        },

        /**
         * Check if this mouse event can allow item selection
         * @param {Object} evt - mouse event
         * @returns {boolean}
         */
        _isEventAllowItemSelection: function(evt) {
          return (this.isDisplayMode() && (evt.ctrlKey || evt.metaKey || this._defaultItemSelection)) || (this.isInputMode() && (
            evt.ctrlKey ||
            evt.metaKey || (this._defaultItemSelection &&
              !this._enabled)));
        },

        /**
         * Returns true if there are some items selected
         * @returns {boolean} true if there are some items selected
         */
        hasItemsSelected: function() {
          if (this._itemSelectionElement === null) {
            return false;
          }
          return !(this._itemSelectionElement.hasClass("hidden"));
        },

        /**
         * Reset items selection
         */
        _resetItemsSelection: function() {
          if (this._firstItemSelected !== null) {
            this._itemSelectionInProgress = false;
            this._firstItemSelected = null;
            if (this._itemSelectionElement) {
              this._itemSelectionElement.addClass("hidden");
            }
            this._setItemSelection(false);
          }
        },

        // Store mouse move prev positions
        _itemSelectionMouseMovePrevX: 0,
        _itemSelectionMouseMovePrevY: 0,

        /**
         * Handle mouseDown event for table items
         * @param {Object} evt - mousedown event
         */
        _onItemMouseDown: function(evt) {

          this._itemSelectionMouseMovePrevX = evt.screenX;
          this._itemSelectionMouseMovePrevY = evt.screenY;

          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");

          this._resetItemsSelection();

          // Start item selection
          if (itemWidget && this._isEventAllowItemSelection(evt)) {

            // To avoid text selection in input array
            evt.stopPropagation();
            evt.preventCancelableDefault();

            // Create selection rect element
            if (this._itemSelectionElement === null) {
              this._itemSelectionElement = document.createElement("span");
              this._itemSelectionElement.addClass("gbc_RTableItemSelectionArea");
              this._itemSelectionElement.addClass("hidden");
              this._element.appendChild(this._itemSelectionElement);
            }
            this._itemSelectionInProgress = true;
            this._firstItemSelected = itemWidget;

            // bind mousemove event
            this.getElement().on("mousemove.RTableWidget", this._onItemMouseMove.bind(this));

            // disable dnd
            this._temporaryEnabledDndOnItem(false, this._firstItemSelected);
          }
        },

        /**
         * Stop item selection in progress
         * @param {Object} evt - mouse event
         */
        _stopInProgressItemSelection: function(evt) {
          this._itemSelectionInProgress = false;
          if (this._isEventAllowItemSelection(evt)) {
            // re-enable dnd
            this._temporaryEnabledDndOnItem(this._dndItemEnabled, this._firstItemSelected);
          }
        },

        /**
         * Handle mouseUp event for table items
         * @param {Object} evt - mouseup event
         */
        _onItemMouseUp: function(evt) {

          // unbind mousemove event
          this.getElement().off("mousemove.RTableWidget");

          this._itemSelectionMouseMovePrevX = 0;
          this._itemSelectionMouseMovePrevY = 0;

          this._stopInProgressItemSelection(evt);
        },

        /**
         * Handle mouseLeave event for table items
         * @param {Object} evt - mouseleave event
         */
        _onItemMouseLeave: function(evt) {
          this._stopInProgressItemSelection(evt);
        },

        /**
         * Handle mouseMove event for table items
         * @param {Object} evt - mousemove event
         */
        _onItemMouseMove: function(evt) {
          let movementX = (this._itemSelectionMouseMovePrevX ? evt.screenX - this._itemSelectionMouseMovePrevX : 0);
          let movementY = (this._itemSelectionMouseMovePrevY ? evt.screenY - this._itemSelectionMouseMovePrevY : 0);

          if (Math.abs(movementX) > 1 || Math.abs(movementY) > 1) { // execute code only if movement > 1px
            if (this._itemSelectionInProgress && this._isEventAllowItemSelection(evt)) {
              let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
              if (itemWidget) {
                if (this._firstItemSelected !== null) {
                  this._setItemSelection(true, this._firstItemSelected, itemWidget);
                }
              }
            }
          }

          this._itemSelectionMouseMovePrevX = evt.screenX;
          this._itemSelectionMouseMovePrevY = evt.screenY;
        },

        /**
         * Copy current items selection in the clipboard
         */
        _copySelectionInClipboard: function() {
          let rows = [];
          let rowIndex;

          let orderedColumns = this.getOrderedColumns();
          for (let i = 0; i < orderedColumns.length; i++) {
            let col = orderedColumns[i];

            rowIndex = 0;
            for (let j = 0; j < col.getChildren().length; j++) {
              let item = col.getChildren()[j];

              if (item.isClientSelected()) {

                let text = item.getChildren()[0].getClipboardValue() + "\t";
                if (rows.length <= rowIndex) {
                  rows.push(text);
                } else {
                  rows[rowIndex] += text;
                }
                rowIndex++;
              }
            }
          }
          for (let i = 0; i < rows.length; ++i) {
            rows[i] = rows[i].substring(0, rows[i].length - 1);
          }
          cls.ClipboardHelper.copyTo(rows.join("\r\n"), this._element);
        },

        /**
         * Copy current row items in the clipboard
         */
        _copyCurrentRowInClipboard: function() {
          let row = "";

          let orderedColumns = this.getOrderedColumns();
          for (let i = 0; i < orderedColumns.length; i++) {
            let col = orderedColumns[i];
            if (!col.isHidden()) {
              if (this._currentRow >= 0 && this._currentRow < col.getChildren().length) {
                let item = col.getChildren()[this._currentRow];
                row += item.getChildren()[0].getClipboardValue();
                if (i < orderedColumns.length - 1) {
                  row += '\t';
                }
              }
            }
          }

          cls.ClipboardHelper.copyTo(row, this._element);
        },

        /**
         * Copy current cell item in the clipboard
         */
        _copyCurrentCellInClipboard: function() {
          let cell = "";
          let col = this.getColumns()[this._currentColumn];

          if (this._currentRow >= 0 && this._currentRow < col.getChildren().length) {
            let item = col.getChildren()[this._currentRow];
            cell = item.getChildren()[0].getClipboardValue();
          }

          cls.ClipboardHelper.copyTo(cell, this._element);
        },

        /**
         * Select items
         * @param {boolean} b - true/false select or unselect items
         * @param {classes.TableColumnItemWidget} [startSelectedItem]
         * @param {classes.TableColumnItemWidget} [endSelectedItem]
         */
        _setItemSelection: function(b, startSelectedItem, endSelectedItem) {

          let realStartRow = -1;
          let realEndRow = -1;
          let realStartCol = -1;
          let realEndCol = -1;

          this._itemSelectionHasChanged = false;

          if (b && startSelectedItem && endSelectedItem) {

            let startCol = startSelectedItem.getColumnWidget().getOrderedColumnIndex();
            let startRow = startSelectedItem.getRowIndex();
            let endCol = !endSelectedItem ? startCol : endSelectedItem.getColumnWidget().getOrderedColumnIndex();
            let endRow = !endSelectedItem ? startRow : endSelectedItem.getRowIndex();

            realStartRow = (startRow < endRow) ? startRow : endRow;
            realEndRow = (startRow < endRow) ? endRow : startRow;
            realStartCol = (startCol < endCol) ? startCol : endCol;
            realEndCol = (startCol < endCol) ? endCol : startCol;

            let mostLeftItem = (realStartCol === startCol) ? startSelectedItem : endSelectedItem;
            let mostRightItem = (realStartCol === startCol) ? endSelectedItem : startSelectedItem;
            let left = mostLeftItem.getElement().getBoundingClientRect().left;
            let right = mostRightItem.getElement().getBoundingClientRect().right;

            let mostTopItem = (realStartRow === startRow) ? startSelectedItem : endSelectedItem;
            let mostBottomItem = (realStartRow === startRow) ? endSelectedItem : startSelectedItem;
            let top = mostTopItem.getElement().getBoundingClientRect().top;
            let bottom = mostBottomItem.getElement().getBoundingClientRect().bottom;
            let tableTop = this.getElement().getBoundingClientRect().top;
            let tableLeft = this.getElement().getBoundingClientRect().left;

            this.setStyle(".gbc_RTableItemSelectionArea", {
              "left": (left - tableLeft) + "px",
              "top": (top - tableTop) + "px",
              "width": (right - left) + "px",
              "height": (bottom - top) + "px"
            });

            this._itemSelectionElement.removeClass("hidden");
            this._itemSelectionHasChanged = true;
          }

          for (let i = 0; i < this.getOrderedColumns().length; i++) {
            let col = this.getOrderedColumns()[i];
            for (let j = 0; j < col.getChildren().length; j++) {
              let item = col.getChildren()[j];

              let select = (b && i >= realStartCol && i <= realEndCol && j >= realStartRow && j <= realEndRow);
              item.setClientSelected(select);
            }
          }
        },

        /**
         * Enable or disable Dnd on a item
         * @param {boolean} b - true/false enable/disable Dnd on item
         * @param {classes.TableColumnItemWidget} item
         */
        _temporaryEnabledDndOnItem: function(b, item) {
          if (item) {
            item.setDndEnabled(b);

            if (b) {
              this.getContainerElement().setAttribute("draggable", "true");
            } else {
              this.getContainerElement().removeAttribute("draggable");
            }
          }
        },
        // ============== END - ITEMS CLIENT SELECTION FUNCTIONS ===================

        // ============== START - ITEMS DnD FUNCTIONS ===================

        /**
         * Is Dnd of items enabled ?
         * @returns {boolean} is item dnd enabled ?
         */
        isDndItemEnabled: function() {
          return this._dndItemEnabled;
        },

        /**
         * Enable Dnd of items
         * @param {boolean} b
         */
        setDndItemEnabled: function(b) {
          if (b && this._defaultItemSelection) {
            return; // no dnd if default is item selection
          }

          if (this._dndItemEnabled !== b) {
            this._dndItemEnabled = b;

            let columns = this.getColumns();
            for (let i = 0; i < columns.length; i++) {
              columns[i].setDndItemEnabled(b);
            }

            let containerElement = this.getContainerElement();
            if (b) {
              containerElement.setAttribute("draggable", "true");
              containerElement.on("dragstart.TableWidget", this._onItemDragStart.bind(this));
              containerElement.on("dragend.TableWidget", this._onItemDragEnd.bind(this));
              containerElement.on("dragover.TableWidget", this._onItemDragOver.bind(this));
              containerElement.on("drop.TableWidget", this._onItemDrop.bind(this));
              containerElement.on("dragleave.TableWidget", this._onItemDragLeave.bind(this));
              containerElement.on("dragenter.TableWidget", this._onItemDragEnter.bind(this));
            } else {
              containerElement.removeAttribute("draggable");
              containerElement.off("dragstart.TableWidget");
              containerElement.off("dragend.TableWidget");
              containerElement.off("dragover.TableWidget");
              containerElement.off("drop.TableWidget");
              containerElement.off("dragleave.TableWidget");
              containerElement.off("dragenter.TableWidget");
            }
          }
        },

        /**
         * Handle dragStart event for table items
         * @param {Object} evt - dragstart event
         */
        _onItemDragStart: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDragStart) {
            itemWidget.onDragStart(evt);
          }
        },
        /**
         * Handle dragEnd event for table items
         * @param {Object} evt - dragend event
         */
        _onItemDragEnd: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDragEnd) {
            itemWidget.onDragEnd(evt);
          }
        },
        /**
         * Handle dragOver event for table items
         * @param {Object} evt - dragover event
         */
        _onItemDragOver: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDragOver) {
            itemWidget.onDragOver(evt);
          } else {
            if (evt.target.hasClass("gbc_TableDataGroup")) {
              let firstColumnWidget = this.getColumns()[0];
              firstColumnWidget.onDragOverAfterLastItem(evt);
            }
          }
        },
        /**
         * Handle drop event for table items
         * @param {Object} evt - drop event
         */
        _onItemDrop: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDrop) {
            itemWidget.onDrop(evt);
          } else {
            if (evt.target.hasClass("gbc_TableDataGroup")) {
              let firstColumnWidget = this.getColumns()[0];
              firstColumnWidget.onDropAfterLastItem();
            }
          }
        },
        /**
         * Handle dragLeave event for table items
         * @param {Object} evt - dragleave event
         */
        _onItemDragLeave: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDragLeave) {
            itemWidget.onDragLeave(evt);
          }
        },
        /**
         * Handle dragEnter event for table items
         * @param {Object} evt - dragenter event
         */
        _onItemDragEnter: function(evt) {
          let itemWidget = gbc.WidgetService.getWidgetFromElement(evt.target, "gbc_RTableItemWidget");
          if (itemWidget && itemWidget.onDragEnter) {
            itemWidget.onDragEnter(evt);
          }
        },
        // ============== END - ITEMS DnD FUNCTIONS =====================

        // ============== START - FROZEN COLUMNS FUNCTIONS ===================
        /**
         * Update frozen columns.
         */
        updateFrozenColumns: function() {
          let columns = this.getOrderedColumns();

          for (let i = 0; i < columns.length; i++) {
            let currentColumn = columns[i];

            if (i < this._leftFrozenColumns) {
              // left frozen column
              currentColumn.setLastLeftFrozen((i + 1) === this._leftFrozenColumns);
              currentColumn.setLeftFrozen(true);
              currentColumn.setFirstRightFrozen(false);
              currentColumn.setRightFrozen(false);
            } else if (columns.length - i <= this._rightFrozenColumns) {
              // right frozen column
              currentColumn.setLastLeftFrozen(false);
              currentColumn.setLeftFrozen(false);
              currentColumn.setFirstRightFrozen((columns.length - i) === this._rightFrozenColumns);
              currentColumn.setRightFrozen(true);
            } else {
              // regular column
              currentColumn.setLastLeftFrozen(false);
              currentColumn.setLeftFrozen(false);
              currentColumn.setFirstRightFrozen(false);
              currentColumn.setRightFrozen(false);
            }
          }
        },

        /**
         * Sets the number of left frozen columns.
         * @param {number} n - number of left frozen columns
         * @publicdoc
         */
        setLeftFrozenColumns: function(n) {
          if (this._leftFrozenColumns !== n) {
            this._leftFrozenColumns = n;
          }
        },

        /**
         * Sets the number of right frozen columns.
         * @param {number} n - number of right frozen columns
         * @publicdoc
         */
        setRightFrozenColumns: function(n) {
          if (this._rightFrozenColumns !== n) {
            this._rightFrozenColumns = n;
          }
        },

        /**
         * Returns number of left frozen columns
         * @returns {number} number of left frozen columns
         * @publicdoc
         */
        getLeftFrozenColumns: function() {
          return this._leftFrozenColumns;
        },

        /**
         * Returns number of right frozen columns
         * @returns {number} number of right frozen columns
         * @publicdoc
         */
        getRightFrozenColumns: function() {
          return this._rightFrozenColumns;
        },

        /**
         * Returns true if table can have frozen columns
         * @returns {boolean} true if table can have frozen columns
         * @publicdoc
         */
        isFrozenTable: function() {
          return this._frozenTable;
        },

        /**
         * Sets if table can contains frozen cols.
         * @param {boolean} frozen - true if table can have frozen columns
         */
        setFrozenTable: function(frozen) {
          this._frozenTable = frozen;
        },
        // ============== END - FROZEN COLUMNS FUNCTIONS =====================

        // ============== START - FOOTER/AGGREGATE FUNCTIONS ===================
        /**
         * Defines if the footer element is needed (used to display aggregate)
         * @param {boolean} b - true to display footer, false to hide it
         */
        setHasFooter: function(b) {
          if (this._hasFooter !== b) {
            this._hasFooter = b;
            this.getFooterGroupElement().toggleClass("hidden", !b);
          }
        },

        /**
         * Returns if table has a footer (used for aggregate)
         * @returns {boolean} true if footer is visible
         */
        hasFooter: function() {
          return this._hasFooter;
        },

        /**
         * Global text for aggregates
         * @param {string} text - global aggregate text
         */
        setAggregateGlobalText: function(text) {
          if (text !== "") {
            if (!this._aggregateGlobalTextElement) {
              this._aggregateGlobalTextElement = document.createElement("div");
              this._aggregateGlobalTextElement.addClass("gbc_TableAggregateGlobalText");
            }
            this._aggregateGlobalTextElement.textContent = text;

            this._footerAggregatesRowWidget.getElement().prependChild(this.getAggregateGlobalTextElement());
          }
        },

        /**
         * Update all aggregates
         */
        updateAllAggregate: function() {
          if (this.hasFooter()) {
            for (const columnWidget of this.getColumns()) {
              columnWidget.setAggregate(null);
            }
          }
        },

        // ============== END - FOOTER/AGGREGATE FUNCTIONS ===================

        // ============== START - STYLE FUNCTIONS ===================
        /**
         * Show/hide table X grid
         * @param {boolean} showGridX - if true always show grid
         */
        setShowGridX: function(showGridX) {
          if (this._showGridX !== showGridX) {
            this._showGridX = showGridX;
            this._element.toggleClass("showGridX", Boolean(showGridX));
          }
        },

        /**
         * Show/hide table Y grid
         * @param {boolean} showGridY - if true always show grid
         */
        setShowGridY: function(showGridY) {
          if (this._showGridY !== showGridY) {
            this._showGridY = showGridY;
            this._element.toggleClass("showGridY", Boolean(showGridY));
          }
        },

        /**
         * Hide/Show column headers
         * @param {boolean} hidden - true if header must be hidden
         */
        setHeaderHidden: function(hidden) {
          if (this._headerHidden !== hidden) {
            this._headerHidden = hidden;
            this._element.toggleClass("headerHidden", Boolean(hidden));
          }
        },

        /**
         * Set header columns alignment
         * @param {string} alignment - (left, center, right, auto)
         */
        setHeaderAlignment: function(alignment) {
          if (this._headerAlignment !== alignment) {
            this._headerAlignment = alignment;

            if (alignment === "auto") {
              // if alignment is auto don't force specific alignement
              return;
            }

            let columns = this.getColumns();
            for (let i = 0; i < columns.length; i++) {
              let col = columns[i];
              col.setTextAlign(alignment, true);
            }
          }
        },

        /**
         * Get header columns alignment
         * @return {string} alignment - (left, center, right, auto)
         */
        getHeaderAlignment: function() {
          return this._headerAlignment;
        },

        /**
         * @inheritDoc
         */
        setHighlightColor: function(color) {
          if (this._highlightColor !== color) {
            this._highlightColor = color;

            color = (color === null ? null : color + " !important");

            this.setStyle({
              selector: ":not(.disabled).highlightCurrentRow .gbc_RTableRowWidget.currentRow .gbc_RTableItemWidget:not(.currentColumn)",
              appliesOnRoot: true
            }, {
              "background-color": color
            });

            this.setStyle({
              selector: ":not(.disabled).highlightCurrentCell .gbc_RTableRowWidget.currentRow .gbc_RTableItemWidget.currentColumn",
              appliesOnRoot: true
            }, {
              "background-color": color
            });
          }
        },

        /**
         * @inheritDoc
         */
        setHighlightTextColor: function(color) {
          if (this._highlightTextColor !== color) {
            this._highlightTextColor = color;

            this.setStyle({
              selector: ":not(.disabled).highlightCurrentRow .currentRow .gbc_RTableItemWidget:not(.currentColumn)",
              appliesOnRoot: true
            }, {
              "color": color === null ? null : color + " !important",
              "fill": color === null ? null : color + " !important"
            });

            this.setStyle({
              selector: ":not(.disabled).highlightCurrentCell .gbc_RTableRowWidget.currentRow .gbc_RTableItemWidget.currentColumn",
              appliesOnRoot: true
            }, {
              "color": color === null ? null : color + " !important",
              "fill": color === null ? null : color + " !important"
            });
          }
        },
        /**
         * @inheritDoc
         */
        setHighlightCurrentRow: function(b) {
          if (this._highlightCurrentRow !== b) {
            this._highlightCurrentRow = b;
            this.getElement().toggleClass("highlightCurrentRow", b);
            this.getElement().toggleClass("noHighlightCurrentRow", !b);
          }
        },

        /**
         * @inheritDoc
         */
        setHighlightCurrentCell: function(b) {
          if (this._highlightCurrentCell !== b) {
            this._highlightCurrentCell = b;
            this.getElement().toggleClass("highlightCurrentCell", b);
            this.getElement().toggleClass("noHighlightCurrentCell", !b);
          }
        },

        /**
         * Update highlight row and cell
         */
        updateHighlight: function() {
          //this.setCurrentRow(this._currentRow);
          //this.setCurrentColumn(this._currentColumn);
        },

        // ============== END - STYLE FUNCTIONS ===================

        // ============== START - DOM ELEMENT GETTERS ===================
        /**
         * @inheritDoc
         */
        getScrollableArea: function() {
          return this.getContainerElement();
        },

        /**
         * Returns header group DOM Element
         * @returns {HTMLElement} header group DOM Element
         * @publicdoc
         */
        getHeaderGroupElement: function() {
          if (!this._headerGroupElement) {
            this._headerGroupElement = this.getElement().getElementsByClassName("gbc_TableHeaderGroup")[0];
          }
          return this._headerGroupElement;
        },

        /**
         * Returns footer group DOM Element
         * @returns {HTMLElement} footer group DOM Element
         * @publicdoc
         */
        getFooterGroupElement: function() {
          if (!this._footerGroupElement) {
            this._footerGroupElement = this.getElement().getElementsByClassName("gbc_TableFooterGroup")[0];
          }
          return this._footerGroupElement;
        },

        /**
         * Returns scroller DOM Element
         * @returns {HTMLElement} scroller DOM Element
         * @publicdoc
         */
        getScrollerElement: function() {
          if (!this._scrollerElement) {
            this._scrollerElement = this.getElement().getElementsByClassName("scroller")[0];
          }
          return this._scrollerElement;
        },

        /**
         * Returns aggregate global text DOM Element
         * @returns {HTMLElement} aggregate global text DOM Element
         */
        getAggregateGlobalTextElement: function() {
          return this._aggregateGlobalTextElement;
        }
        // ============== END - DOM ELEMENT GETTERS =====================
      };
    });
    cls.WidgetFactory.registerBuilder("RTable", cls.RTableWidget);
    cls.WidgetFactory.registerBuilder("Table[tableType=responsive]", cls.RTableWidget);
  });