12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033/// 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(true);

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

          // 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);
        },

        /**
         * @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 = null;
            if (options.colIndex > 0) {
              rowWidget = this.getRows()[options.rowIndex];
            }
            // create row widget
            if (!rowWidget) {
              rowWidget = cls.WidgetFactory.createWidget("RTableRow", this.getBuildParameters());
              $super.addChildWidget.call(this, rowWidget, options);

              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();
              }
            }
          }

          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);
          //}

          if (size !== null && this.getLayoutEngine().isLayoutDone()) {
            this.setSize(size);
            this.setPageSize(pageSize);

            var 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(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(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(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(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(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(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);
  });