@websy/websy-designs 1.0.4 → 1.1.0

package/dist/websy-designs.js

@@ -34,6 +34,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   WebsyRouter
   WebsyResultList
   WebsyTable
+  WebsyTable2
   WebsyChart
   WebsyChartTooltip
   WebsyLegend
@@ -45,6 +46,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   APIService
   ButtonGroup
   WebsyUtils
+  Pager
 */
 
 /* global XMLHttpRequest fetch ENV */
@@ -292,11 +294,16 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     this.oneDay = 1000 * 60 * 60 * 24;
     this.currentselection = [];
     this.validDates = [];
+    this.validYears = [];
+    this.customRangeSelected = true;
     var DEFAULTS = {
       defaultRange: 0,
       minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
       maxAllowedDate: this.floorDate(new Date(new Date())),
+      minAllowedYear: 1970,
+      maxAllowedYear: new Date().getFullYear(),
       daysOfWeek: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+      mode: 'date',
       monthMap: {
         0: 'Jan',
         1: 'Feb',
@@ -313,35 +320,49 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       },
       ranges: []
     };
-    DEFAULTS.ranges = [{
-      label: 'All Dates',
-      range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
-    }, {
-      label: 'Today',
-      range: [this.floorDate(new Date())]
-    }, {
-      label: 'Yesterday',
-      range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
-    }, {
-      label: 'Last 7 Days',
-      range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
-    }, {
-      label: 'This Month',
-      range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
-    }, {
-      label: 'Last Month',
-      range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
-    }, {
-      label: 'This Year',
-      range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear()))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear())))]
-    }, {
-      label: 'Last Year',
-      range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear() - 1))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear() - 1)))]
-    }];
+    DEFAULTS.ranges = {
+      date: [{
+        label: 'All Dates',
+        range: [DEFAULTS.minAllowedDate, DEFAULTS.maxAllowedDate]
+      }, {
+        label: 'Today',
+        range: [this.floorDate(new Date())]
+      }, {
+        label: 'Yesterday',
+        range: [this.floorDate(new Date().setDate(new Date().getDate() - 1))]
+      }, {
+        label: 'Last 7 Days',
+        range: [this.floorDate(new Date().setDate(new Date().getDate() - 6)), this.floorDate(new Date())]
+      }, {
+        label: 'This Month',
+        range: [this.floorDate(new Date().setDate(1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() + 1) - this.oneDay)]
+      }, {
+        label: 'Last Month',
+        range: [this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth() - 1)), this.floorDate(new Date(new Date().setDate(1)).setMonth(new Date().getMonth()) - this.oneDay)]
+      }, {
+        label: 'This Year',
+        range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear()))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear())))]
+      }, {
+        label: 'Last Year',
+        range: [this.floorDate(new Date("1/1/".concat(new Date().getFullYear() - 1))), this.floorDate(new Date("12/31/".concat(new Date().getFullYear() - 1)))]
+      }],
+      year: [{
+        label: 'All Years',
+        range: [DEFAULTS.minAllowedYear, DEFAULTS.maxAllowedYear]
+      }, {
+        label: 'Last 5 Years',
+        range: [new Date().getFullYear() - 4, DEFAULTS.maxAllowedYear]
+      }, {
+        label: 'Last 10 Years',
+        range: [new Date().getFullYear() - 9, DEFAULTS.maxAllowedYear]
+      }]
+    };
     this.options = _extends({}, DEFAULTS, options);
     this.selectedRange = this.options.defaultRange || 0;
-    this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.defaultRange || 0].range);
+    this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.mode][this.options.defaultRange || 0].range);
     this.priorSelectedDates = null;
+    this.priorselection = null;
+    this.priorCustomRangeSelected = null;
 
     if (!elementId) {
       console.log('No element Id provided');
@@ -353,7 +374,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     if (el) {
       this.elementId = elementId;
       el.addEventListener('click', this.handleClick.bind(this));
-      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.selectedRange].label, "</span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n          </div>\n          <div id='").concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n            <div class='websy-date-picker-ranges'>\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <button class='websy-btn websy-dp-cancel'>Cancel</button>\n              <button class='websy-btn websy-dp-confirm'>Confirm</button>\n            </div>\n          </div>          \n        </div>\n      ");
+      el.addEventListener('mousedown', this.handleMouseDown.bind(this));
+      el.addEventListener('mouseover', this.handleMouseOver.bind(this));
+      el.addEventListener('mouseup', this.handleMouseUp.bind(this));
+      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n          </div>\n          <div id='").concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n            <div class='websy-date-picker-ranges'>\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n              <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n            </div>\n          </div>          \n        </div>\n      ");
       el.innerHTML = html;
       this.render();
     } else {
@@ -371,13 +395,20 @@ var WebsyDatePicker = /*#__PURE__*/function () {
 
       if (confirm === true) {
         if (this.options.onChange) {
-          this.options.onChange(this.selectedRangeDates);
+          if (this.customRangeSelected === true) {
+            this.options.onChange(this.selectedRangeDates, true);
+          } else {
+            this.options.onChange(this.currentselection, false);
+          }
         }
 
         this.updateRange();
       } else {
         this.selectedRangeDates = _toConsumableArray(this.priorSelectedDates);
         this.selectedRange = this.priorSelectedRange;
+        this.customRangeSelected = this.priorCustomRangeSelected;
+        this.currentselection = _toConsumableArray(this.priorselection);
+        this.highlightRange();
       }
     }
   }, {
@@ -404,22 +435,65 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         var index = event.target.getAttribute('data-index');
         this.selectRange(index);
         this.updateRange(index);
-      } else if (event.target.classList.contains('websy-dp-date')) {
-        if (event.target.classList.contains('websy-disabled-date')) {
-          return;
-        }
-
-        var timestamp = event.target.id.split('_')[0];
-        this.selectDate(+timestamp);
+      } else if (event.target.classList.contains('websy-dp-date')) {// if (event.target.classList.contains('websy-disabled-date')) {
+        //   return
+        // }
+        // const timestamp = event.target.id.split('_')[0]
+        // this.selectDate(+timestamp)
       } else if (event.target.classList.contains('websy-dp-confirm')) {
         this.close(true);
       } else if (event.target.classList.contains('websy-dp-cancel')) {
         this.close();
       }
     }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(event) {
+      this.mouseDown = true;
+      this.dragging = false;
+
+      if (event.target.classList.contains('websy-dp-date')) {
+        if (event.target.classList.contains('websy-disabled-date')) {
+          return;
+        }
+
+        if (this.customRangeSelected === true) {
+          this.currentselection = [];
+          this.customRangeSelected = false;
+        }
+
+        this.mouseDownId = +event.target.id.split('_')[0];
+        this.selectDate(this.mouseDownId);
+      }
+    }
+  }, {
+    key: "handleMouseOver",
+    value: function handleMouseOver(event) {
+      if (this.mouseDown === true) {
+        if (event.target.classList.contains('websy-dp-date')) {
+          if (event.target.classList.contains('websy-disabled-date')) {
+            return;
+          }
+
+          if (event.target.id.split('_')[0] !== this.mouseDownId) {
+            this.dragging = true;
+            this.selectDate(+event.target.id.split('_')[0]);
+          }
+        }
+      }
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp(event) {
+      this.mouseDown = false;
+      this.dragging = false;
+      this.mouseDownId = null;
+    }
   }, {
     key: "highlightRange",
     value: function highlightRange() {
+      var _this2 = this;
+
       var el = document.getElementById("".concat(this.elementId, "_dateList"));
       var dateEls = el.querySelectorAll('.websy-dp-date');
 
@@ -433,27 +507,72 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         return;
       }
 
-      var daysDiff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay);
+      if (this.customRangeSelected === true) {
+        var diff;
 
-      if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
-        daysDiff += 1;
-      }
+        if (this.options.mode === 'date') {
+          diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay);
 
-      for (var _i = 0; _i < daysDiff + 1; _i++) {
-        var d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
-        var dateEl = document.getElementById("".concat(d.getTime(), "_date"));
+          if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
+            diff += 1;
+          }
+        } else if (this.options.mode === 'year') {
+          diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0];
 
-        if (dateEl) {
-          dateEl.classList.add('selected');
+          if (this.selectedRangeDates[this.selectedRangeDates.length - 1] !== this.selectedRangeDates[0]) {// diff += 1
+          }
+        }
 
-          if (d.getTime() === this.selectedRangeDates[0].getTime()) {
-            dateEl.classList.add('first');
+        for (var _i = 0; _i < diff + 1; _i++) {
+          var d = void 0;
+          var rangeStart = void 0;
+          var rangeEnd = void 0;
+
+          if (this.options.mode === 'date') {
+            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
+            d = d.getTime();
+            rangeStart = this.selectedRangeDates[0].getTime();
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
+          } else if (this.options.mode === 'year') {
+            d = this.selectedRangeDates[0] + _i;
+            rangeStart = this.selectedRangeDates[0];
+            rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1];
           }
 
-          if (d.getTime() === this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()) {
-            dateEl.classList.add('last');
+          var dateEl = void 0;
+
+          if (this.options.mode === 'date') {
+            dateEl = document.getElementById("".concat(d.getTime(), "_date"));
+          } else if (this.options.mode === 'year') {
+            dateEl = document.getElementById("".concat(d, "_year"));
+          }
+
+          if (dateEl) {
+            dateEl.classList.add('selected');
+
+            if (d === rangeStart) {
+              dateEl.classList.add("".concat(this.options.sortDirection === 'desc' ? 'last' : 'first'));
+            }
+
+            if (d === rangeEnd) {
+              dateEl.classList.add("".concat(this.options.sortDirection === 'desc' ? 'first' : 'last'));
+            }
           }
         }
+      } else {
+        this.currentselection.forEach(function (d) {
+          var dateEl;
+
+          if (_this2.options.mode === 'date') {
+            dateEl = document.getElementById("".concat(d, "_date"));
+          } else if (_this2.options.mode === 'year') {
+            dateEl = document.getElementById("".concat(d, "_year"));
+          }
+
+          dateEl.classList.add('selected');
+          dateEl.classList.add('first');
+          dateEl.classList.add('last');
+        });
       }
     }
   }, {
@@ -466,6 +585,8 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       contentEl.classList.add('active');
       this.priorSelectedDates = _toConsumableArray(this.selectedRangeDates);
       this.priorSelectedRange = this.selectedRange;
+      this.priorselection = _toConsumableArray(this.currentselection);
+      this.priorCustomRangeSelected = this.customRangeSelected;
       this.scrollRangeIntoView();
     }
   }, {
@@ -493,61 +614,111 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   }, {
     key: "renderDates",
     value: function renderDates(disabledDates) {
+      var _this3 = this;
+
       var disabled = [];
       this.validDates = [];
+      this.validYears = [];
 
       if (disabledDates) {
         disabled = disabledDates.map(function (d) {
+          if (_this3.options.mode === 'date') {
+            return d.getTime();
+          } else if (_this3.options.mode === 'year') {
+            return d;
+          }
+
           return d.getTime();
         });
       } // first disabled all of the ranges
 
 
-      this.options.ranges.forEach(function (r) {
+      this.options.ranges[this.options.mode].forEach(function (r) {
         return r.disabled = true;
       });
-      var daysDiff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1;
+      var diff;
+
+      if (this.options.mode === 'date') {
+        diff = Math.ceil((this.options.maxAllowedDate.getTime() - this.options.minAllowedDate.getTime()) / this.oneDay) + 1;
+      } else if (this.options.mode === 'year') {
+        diff = this.options.maxAllowedYear - this.options.minAllowedYear + 1;
+      }
+
       var months = {};
+      var yearList = [];
 
-      for (var i = 0; i < daysDiff; i++) {
-        var d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + i * this.oneDay));
-        var monthYear = "".concat(this.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
+      for (var i = 0; i < diff; i++) {
+        if (this.options.mode === 'date') {
+          var d = this.floorDate(new Date(this.options.minAllowedDate.getTime() + i * this.oneDay));
+          var monthYear = "".concat(this.options.monthMap[d.getMonth()], " ").concat(d.getFullYear());
 
-        if (!months[monthYear]) {
-          months[monthYear] = [];
-        }
+          if (!months[monthYear]) {
+            months[monthYear] = [];
+          }
 
-        if (disabled.indexOf(d.getTime()) === -1) {
-          this.validDates.push(d.getTime());
-        }
+          if (disabled.indexOf(d.getTime()) === -1) {
+            this.validDates.push(d.getTime());
+          }
 
-        months[monthYear].push({
-          date: d,
-          dayOfMonth: d.getDate(),
-          dayOfWeek: d.getDay(),
-          id: d.getTime(),
-          disabled: disabled.indexOf(d.getTime()) !== -1
-        });
+          months[monthYear].push({
+            date: d,
+            dayOfMonth: d.getDate(),
+            dayOfWeek: d.getDay(),
+            id: d.getTime(),
+            disabled: disabled.indexOf(d.getTime()) !== -1
+          });
+        } else if (this.options.mode === 'year') {
+          var _d = this.options.minAllowedYear + i;
+
+          yearList.push({
+            year: _d,
+            id: _d,
+            disabled: disabled.indexOf(_d) !== -1
+          });
+
+          if (disabled.indexOf(_d) === -1) {
+            this.validYears.push(_d);
+          }
+        }
       } // check each range to see if it can be enabled
 
 
-      for (var _i2 = 0; _i2 < this.options.ranges.length; _i2++) {
-        var r = this.options.ranges[_i2]; // check the first date
+      for (var _i2 = 0; _i2 < this.options.ranges[this.options.mode].length; _i2++) {
+        var r = this.options.ranges[this.options.mode][_i2];
 
-        if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
-          r.disabled = false;
-        } else if (r.range[1]) {
-          // check the last date
-          if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
+        if (this.options.mode === 'date') {
+          // check the first date
+          if (this.validDates.indexOf(r.range[0].getTime()) !== -1) {
             r.disabled = false;
-          } else {
-            // check the full range until a match is found
-            for (var _i3 = r.range[0].getTime(); _i3 <= r.range[1].getTime(); _i3 += this.oneDay) {
-              var testDate = this.floorDate(new Date(_i3));
+          } else if (r.range[1]) {
+            // check the last date
+            if (this.validDates.indexOf(r.range[1].getTime()) !== -1) {
+              r.disabled = false;
+            } else {
+              // check the full range until a match is found
+              for (var _i3 = r.range[0].getTime(); _i3 <= r.range[1].getTime(); _i3 += this.oneDay) {
+                var testDate = this.floorDate(new Date(_i3));
 
-              if (this.validDates.indexOf(testDate.getTime()) !== -1) {
-                r.disabled = false;
-                break;
+                if (this.validDates.indexOf(testDate.getTime()) !== -1) {
+                  r.disabled = false;
+                  break;
+                }
+              }
+            }
+          }
+        } else if (this.options.mode === 'year') {
+          if (this.validYears.indexOf(r.range[0]) !== -1) {
+            r.disabled = false;
+          } else if (r.range[1]) {
+            if (this.validYears.indexOf(r.range[1]) !== -1) {
+              r.disabled = false;
+            } else {
+              // check the full range until a match is found
+              for (var _i4 = r.range[0]; _i4 <= r.range[1]; _i4++) {
+                if (this.validYears.indexOf(r.range[0] + _i4) !== -1) {
+                  r.disabled = false;
+                  break;
+                }
               }
             }
           }
@@ -555,48 +726,73 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       }
 
       var html = '';
-      html += "\n      <ul class='websy-dp-days-header'>\n    ";
-      html += this.options.daysOfWeek.map(function (d) {
-        return "<li>".concat(d, "</li>");
-      }).join('');
-      html += "\n      </ul>\n      <div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'>\n    ");
 
-      for (var key in months) {
-        html += "\n        <div class='websy-dp-month-container'>\n          <span id='".concat(key.replace(/\s/g, '_'), "'>").concat(key, "</span>\n          <ul>\n      ");
+      if (this.options.mode === 'date') {
+        html += "\n        <ul class='websy-dp-days-header'>\n      ";
+        html += this.options.daysOfWeek.map(function (d) {
+          return "<li>".concat(d, "</li>");
+        }).join('');
+        html += "\n        </ul>         \n        <div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'>\n      ");
+
+        for (var key in months) {
+          html += "\n          <div class='websy-dp-month-container'>\n            <span id='".concat(key.replace(/\s/g, '_'), "'>").concat(key, "</span>\n            <ul>\n        ");
+
+          if (months[key][0].dayOfWeek > 0) {
+            var paddedDays = [];
 
-        if (months[key][0].dayOfWeek > 0) {
-          var paddedDays = [];
+            for (var _i5 = 0; _i5 < months[key][0].dayOfWeek; _i5++) {
+              paddedDays.push("<li>&nbsp;</li>");
+            }
 
-          for (var _i4 = 0; _i4 < months[key][0].dayOfWeek; _i4++) {
-            paddedDays.push("<li>&nbsp;</li>");
+            html += paddedDays.join('');
           }
 
-          html += paddedDays.join('');
+          html += months[key].map(function (d) {
+            return "<li id='".concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
+          }).join('');
+          html += "\n            </ul>\n          </div>\n        ";
+        }
+
+        html += '</div>';
+      } else if (this.options.mode === 'year') {
+        if (this.options.sortDirection === 'desc') {
+          yearList.reverse();
         }
 
-        html += months[key].map(function (d) {
-          return "<li id='".concat(d.id, "_date' class='websy-dp-date ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.dayOfMonth, "</li>");
+        html += "<div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'><ul>");
+        html += yearList.map(function (d) {
+          return "<li id='".concat(d.id, "_year' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
         }).join('');
-        html += "\n          </ul>\n        </div>\n      ";
+        html += "</ul></div>";
       }
 
-      html += '</div>';
       return html;
     }
   }, {
     key: "renderRanges",
     value: function renderRanges() {
-      var _this2 = this;
+      var _this4 = this;
 
-      return this.options.ranges.map(function (r, i) {
-        return "\n      <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this2.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n    ");
-      }).join('');
+      return this.options.ranges[this.options.mode].map(function (r, i) {
+        return "\n      <li data-index='".concat(i, "' class='websy-date-picker-range ").concat(i === _this4.selectedRange ? 'active' : '', " ").concat(r.disabled === true ? 'websy-disabled-range' : '', "'>").concat(r.label, "</li>\n    ");
+      }).join('') + "<li data-index='-1' class='websy-date-picker-range ".concat(this.selectedRange === -1 ? 'active' : '', "'>Custom</li>");
     }
   }, {
     key: "scrollRangeIntoView",
     value: function scrollRangeIntoView() {
       if (this.selectedRangeDates[0]) {
-        var el = document.getElementById("".concat(this.selectedRangeDates[0].getTime(), "_date"));
+        var el;
+
+        if (this.options.mode === 'date') {
+          el = document.getElementById("".concat(this.selectedRangeDates[0].getTime(), "_date"));
+        } else if (this.options.mode === 'year') {
+          if (this.options.sortDirection === 'desc') {
+            el = document.getElementById("".concat(this.selectedRangeDates[this.selectedRangeDates.length - 1], "_year"));
+          } else {
+            el = document.getElementById("".concat(this.selectedRangeDates[0], "_year"));
+          }
+        }
+
         var parentEl = document.getElementById("".concat(this.elementId, "_dateList"));
 
         if (el && parentEl) {
@@ -610,18 +806,33 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       if (this.currentselection.length === 0) {
         this.currentselection.push(timestamp);
       } else {
-        if (timestamp > this.currentselection[0]) {
-          this.currentselection.push(timestamp);
+        if (this.dragging === true) {
+          this.currentselection = [this.mouseDownId];
+
+          if (timestamp > this.currentselection[0]) {
+            this.currentselection.push(timestamp);
+          } else {
+            this.currentselection.splice(0, 0, timestamp);
+          }
+
+          this.customRangeSelected = true;
         } else {
-          this.currentselection.splice(0, 0, timestamp);
+          this.currentselection.push(timestamp);
+          this.currentselection.sort(function (a, b) {
+            return a - b;
+          });
+          this.customRangeSelected = false;
         }
       }
 
-      this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])];
+      if (this.options.mode === 'date') {
+        this.selectedRangeDates = [new Date(this.currentselection[0]), new Date(this.currentselection[1] || this.currentselection[0])];
+      } else if (this.options.mode === 'year') {
+        this.selectedRangeDates = [this.currentselection[0], this.currentselection[1] || this.currentselection[0]];
+      } // if (this.currentselection.length === 2) {
+      //   this.currentselection = [] 
+      // }    
 
-      if (this.currentselection.length === 2) {
-        this.currentselection = [];
-      }
 
       this.selectedRange = -1;
       this.highlightRange();
@@ -629,8 +840,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
   }, {
     key: "selectRange",
     value: function selectRange(index) {
-      if (this.options.ranges[index]) {
-        this.selectedRangeDates = _toConsumableArray(this.options.ranges[index].range);
+      if (this.options.ranges[this.options.mode][index]) {
+        this.selectedRangeDates = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
+        this.currentselection = _toConsumableArray(this.options.ranges[this.options.mode][index].range);
         this.selectedRange = +index;
         this.highlightRange();
         this.close(true);
@@ -640,38 +852,69 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     key: "selectCustomRange",
     value: function selectCustomRange(range) {
       this.selectedRange = -1;
-      this.selectedRangeDates = range;
+      this.selectedRangeDates = range; // check if the custom range matches a configured range
+
+      for (var i = 0; i < this.options.ranges[this.options.mode].length; i++) {
+        if (this.options.ranges[this.options.mode][i].range.length === 1) {
+          if (this.options.ranges[this.options.mode][i].range[0] === range[0]) {
+            this.selectedRange = i;
+            break;
+          }
+        } else if (this.options.ranges[this.options.mode][i].range.length === 2) {
+          if (this.options.ranges[this.options.mode][i].range[0] === range[0] && this.options.ranges[this.options.mode][i].range[1] === range[1]) {
+            this.selectedRange = i;
+            break;
+          }
+        }
+      }
+
       this.highlightRange();
       this.updateRange();
     }
   }, {
     key: "setDateBounds",
     value: function setDateBounds(range) {
-      if (this.options.ranges[0].label === 'All Dates') {
-        this.options.ranges[0].range = [range[0], range[1] || range[0]];
+      if (['All Dates', 'All Years'].indexOf(this.options.ranges[this.options.mode][0].label) !== -1) {
+        this.options.ranges[this.options.mode][0].range = [range[0], range[1] || range[0]];
       }
 
-      this.options.minAllowedDate = range[0];
-      this.options.maxAllowedDate = range[1] || range[0];
+      if (this.options.mode === 'date') {
+        this.options.minAllowedDate = range[0];
+        this.options.maxAllowedDate = range[1] || range[0];
+      } else if (this.options.mode === 'year') {
+        this.options.minAllowedYear = range[0];
+        this.options.maxAllowedYear = range[1] || range[0];
+      }
     }
   }, {
     key: "updateRange",
     value: function updateRange() {
+      var _this5 = this;
+
       var range;
 
       if (this.selectedRange === -1) {
-        var start = this.selectedRangeDates[0].toLocaleDateString();
+        var list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(function (d) {
+          if (_this5.options.mode === 'date') {
+            return d.toLocaleDateString();
+          } else if (_this5.options.mode === 'year') {
+            return d;
+          }
+        });
+        var start = list[0];
         var end = '';
 
-        if (this.selectedRangeDates[1] && this.selectedRangeDates[0].getTime() !== this.selectedRangeDates[1].getTime()) {
-          end = " - ".concat(this.selectedRangeDates[1].toLocaleDateString());
+        if (this.customRangeSelected === true) {
+          end = " - ".concat(list[list.length - 1]);
+        } else {
+          start = "".concat(list.length, " selected");
         }
 
         range = {
           label: "".concat(start).concat(end)
         };
       } else {
-        range = this.options.ranges[this.selectedRange];
+        range = this.options.ranges[this.options.mode][this.selectedRange];
       }
 
       var el = document.getElementById(this.elementId);
@@ -703,6 +946,8 @@ Date.prototype.floor = function () {
 
 var WebsyDropdown = /*#__PURE__*/function () {
   function WebsyDropdown(elementId, options) {
+    var _this6 = this;
+
     _classCallCheck(this, WebsyDropdown);
 
     var DEFAULTS = {
@@ -735,6 +980,28 @@ var WebsyDropdown = /*#__PURE__*/function () {
       el.addEventListener('keyup', this.handleKeyUp.bind(this));
       el.addEventListener('mouseout', this.handleMouseOut.bind(this));
       el.addEventListener('mousemove', this.handleMouseMove.bind(this));
+      var headerLabel = this.selectedItems.map(function (s) {
+        return _this6.options.items[s].label || _this6.options.items[s].value;
+      }).join(this.options.multiValueDelimiter);
+      var headerValue = this.selectedItems.map(function (s) {
+        return _this6.options.items[s].value || _this6.options.items[s].label;
+      }).join(this.options.multiValueDelimiter);
+      var html = "\n        <div class='websy-dropdown-container ".concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', "'>\n          <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n            <span id='").concat(this.elementId, "_headerLabel' class='websy-dropdown-header-label'>").concat(this.options.label, "</span>\n            <span data-info='").concat(headerLabel, "' class='websy-dropdown-header-value' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span>\n            <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n            <svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n      ");
+
+      if (this.options.allowClear === true) {
+        html += "\n          <svg class='clear' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n        ";
+      }
+
+      html += "          \n          </div>\n          <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n      ");
+
+      if (this.options.disableSearch !== true) {
+        html += "\n          <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n        ");
+      }
+
+      html += "\n            <div id='".concat(this.elementId, "_itemsContainer' class='websy-dropdown-items'>\n              <ul id='").concat(this.elementId, "_items'>              \n              </ul>\n            </div><!--\n            --><div class='websy-dropdown-custom'></div>\n          </div>\n        </div>\n      ");
+      el.innerHTML = html;
+      var scrollEl = document.getElementById("".concat(this.elementId, "_itemsContainer"));
+      scrollEl.addEventListener('scroll', this.handleScroll.bind(this));
       this.render();
     } else {
       console.log('No element found with Id', elementId);
@@ -742,6 +1009,9 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }
 
   _createClass(WebsyDropdown, [{
+    key: "appendRows",
+    value: function appendRows() {}
+  }, {
     key: "clearSelected",
     value: function clearSelected() {
       this.selectedItems = [];
@@ -864,6 +1134,15 @@ var WebsyDropdown = /*#__PURE__*/function () {
         clearTimeout(this.tooltipTimeoutFn);
       }
     }
+  }, {
+    key: "handleScroll",
+    value: function handleScroll(event) {
+      if (event.target.classList.contains('websy-dropdown-items')) {
+        if (this.options.onScroll) {
+          this.options.onScroll(event);
+        }
+      }
+    }
   }, {
     key: "open",
     value: function open(options) {
@@ -888,43 +1167,56 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-
       if (!this.elementId) {
         console.log('No element Id provided for Websy Dropdown');
         return;
-      }
-
-      var el = document.getElementById(this.elementId);
-      var headerLabel = this.selectedItems.map(function (s) {
-        return _this3.options.items[s].label || _this3.options.items[s].value;
-      }).join(this.options.multiValueDelimiter);
-      var headerValue = this.selectedItems.map(function (s) {
-        return _this3.options.items[s].value || _this3.options.items[s].label;
-      }).join(this.options.multiValueDelimiter);
-      var html = "\n      <div class='websy-dropdown-container ".concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', "'>\n        <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n          <span id='").concat(this.elementId, "_headerLabel' class='websy-dropdown-header-label'>").concat(this.options.label, "</span>\n          <span data-info='").concat(headerLabel, "' class='websy-dropdown-header-value' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span>\n          <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n          <svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n    ");
-
-      if (this.options.allowClear === true) {
-        html += "\n        <svg class='clear' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n      ";
-      }
-
-      html += "          \n        </div>\n        <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n        <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n    ");
+      } // const el = document.getElementById(this.elementId)
+      // const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
+      // const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+      // let html = `
+      //   <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
+      //     <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
+      //       <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
+      //       <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
+      //       <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
+      //       <svg class='arrow' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
+      // `
+      // if (this.options.allowClear === true) {
+      //   html += `
+      //     <svg class='clear' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+      //   `
+      // }
+      // html += `          
+      //     </div>
+      //     <div id='${this.elementId}_mask' class='websy-dropdown-mask'></div>
+      //     <div id='${this.elementId}_content' class='websy-dropdown-content'>
+      // `
+      // if (this.options.disableSearch !== true) {
+      //   html += `
+      //     <input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
+      //   `
+      // }
+      // html += `
+      //       <div class='websy-dropdown-items'>
+      //         <ul id='${this.elementId}_items'>              
+      //         </ul>
+      //       </div><!--
+      //       --><div class='websy-dropdown-custom'></div>
+      //     </div>
+      //   </div>
+      // `
+      // el.innerHTML = html
 
-      if (this.options.disableSearch !== true) {
-        html += "\n        <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n      ");
-      }
 
-      html += "\n          <div class='websy-dropdown-items'>\n            <ul id='".concat(this.elementId, "_items'>              \n            </ul>\n          </div><!--\n          --><div class='websy-dropdown-custom'></div>\n        </div>\n      </div>\n    ");
-      el.innerHTML = html;
       this.renderItems();
     }
   }, {
     key: "renderItems",
     value: function renderItems() {
-      var _this4 = this;
+      var _this7 = this;
 
       var html = this.options.items.map(function (r, i) {
-        return "\n      <li data-index='".concat(i, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this4.selectedItems.indexOf(i) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
+        return "\n      <li data-index='".concat(i, "' class='websy-dropdown-item ").concat((r.classes || []).join(' '), " ").concat(_this7.selectedItems.indexOf(i) !== -1 ? 'active' : '', "'>").concat(r.label, "</li>\n    ");
       }).join('');
       var el = document.getElementById("".concat(this.elementId, "_items"));
 
@@ -943,7 +1235,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
   }, {
     key: "updateHeader",
     value: function updateHeader(item) {
-      var _this5 = this;
+      var _this8 = this;
 
       var el = document.getElementById(this.elementId);
       var headerEl = document.getElementById("".concat(this.elementId, "_header"));
@@ -981,23 +1273,25 @@ var WebsyDropdown = /*#__PURE__*/function () {
 
       if (labelEl) {
         if (this.selectedItems.length === 1) {
-          labelEl.innerHTML = item.label;
-          labelEl.setAttribute('data-info', item.label);
-          inputEl.value = item.value;
+          if (item) {
+            labelEl.innerHTML = item.label;
+            labelEl.setAttribute('data-info', item.label);
+            inputEl.value = item.value;
+          }
         } else if (this.selectedItems.length > 1) {
           if (this.options.showCompleteSelectedList === true) {
             var selectedLabels = this.selectedItems.map(function (s) {
-              return _this5.options.items[s].label || _this5.options.items[s].value;
+              return _this8.options.items[s].label || _this8.options.items[s].value;
             }).join(this.options.multiValueDelimiter);
             var selectedValues = this.selectedItems.map(function (s) {
-              return _this5.options.items[s].value || _this5.options.items[s].label;
+              return _this8.options.items[s].value || _this8.options.items[s].label;
             }).join(this.options.multiValueDelimiter);
             labelEl.innerHTML = selectedLabels;
             labelEl.setAttribute('data-info', selectedLabels);
             inputEl.value = selectedValues;
           } else {
             var _selectedValues = this.selectedItems.map(function (s) {
-              return _this5.options.items[s].value || _this5.options.items[s].label;
+              return _this8.options.items[s].value || _this8.options.items[s].label;
             }).join(this.options.multiValueDelimiter);
 
             labelEl.innerHTML = "".concat(this.selectedItems.length, " selected");
@@ -1103,12 +1397,9 @@ var WebsyForm = /*#__PURE__*/function () {
     var el = document.getElementById(elementId);
 
     if (el) {
-      if (this.options.classes) {
-        this.options.classes.forEach(function (c) {
-          return el.classList.add(c);
-        });
-      }
-
+      // if (this.options.classes) {
+      //   this.options.classes.forEach(c => el.classList.add(c))
+      // }
       el.addEventListener('click', this.handleClick.bind(this));
       el.addEventListener('keyup', this.handleKeyUp.bind(this));
       el.addEventListener('keydown', this.handleKeyDown.bind(this));
@@ -1129,13 +1420,13 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "checkRecaptcha",
     value: function checkRecaptcha() {
-      var _this6 = this;
+      var _this9 = this;
 
       return new Promise(function (resolve, reject) {
-        if (_this6.options.useRecaptcha === true) {
-          if (_this6.recaptchaValue) {
-            _this6.apiService.add('/google/checkrecaptcha', JSON.stringify({
-              grecaptcharesponse: _this6.recaptchaValue
+        if (_this9.options.useRecaptcha === true) {
+          if (_this9.recaptchaValue) {
+            _this9.apiService.add('/google/checkrecaptcha', JSON.stringify({
+              grecaptcharesponse: _this9.recaptchaValue
             })).then(function (response) {
               if (response.success && response.success === true) {
                 resolve(true);
@@ -1193,14 +1484,14 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "processComponents",
     value: function processComponents(components, callbackFn) {
-      var _this7 = this;
+      var _this10 = this;
 
       if (components.length === 0) {
         callbackFn();
       } else {
         components.forEach(function (c) {
           if (typeof WebsyDesigns[c.component] !== 'undefined') {
-            var comp = new WebsyDesigns[c.component]("".concat(_this7.elementId, "_input_").concat(c.field, "_component"), c.options);
+            c.instance = new WebsyDesigns[c.component]("".concat(_this10.elementId, "_input_").concat(c.field, "_component"), c.options);
           } else {// some user feedback here
           }
         });
@@ -1221,27 +1512,27 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(update, data) {
-      var _this8 = this;
+      var _this11 = this;
 
       var el = document.getElementById(this.elementId);
       var componentsToProcess = [];
 
       if (el) {
-        var html = "\n        <form id=\"".concat(this.elementId, "Form\">\n      ");
+        var html = "\n        <form id=\"".concat(this.elementId, "Form\" class=\"").concat(this.options.classes || '', "\">\n      ");
         this.options.fields.forEach(function (f, i) {
           if (f.component) {
             componentsToProcess.push(f);
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <div id='").concat(_this8.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <div id='").concat(_this11.elementId, "_input_").concat(f.field, "_component' class='form-component'></div>\n            </div><!--\n          ");
           } else if (f.type === 'longtext') {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <textarea\n                id=\"").concat(_this8.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                name=\"").concat(f.field, "\" \n                class=\"websy-input websy-textarea\"\n              ></textarea>\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <textarea\n                id=\"").concat(_this11.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                placeholder=\"").concat(f.placeholder || '', "\"\n                name=\"").concat(f.field, "\" \n                class=\"websy-input websy-textarea\"\n              ></textarea>\n            </div><!--\n          ");
           } else {
-            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes, "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <input \n                id=\"").concat(_this8.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat(f.type || 'text', "\" \n                class=\"websy-input\" \n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.value || '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n            </div><!--\n          ");
+            html += "\n            ".concat(i > 0 ? '-->' : '', "<div class='").concat(f.classes || '', "'>\n              ").concat(f.label ? "<label for=\"".concat(f.field, "\">").concat(f.label, "</label>") : '', "\n              <input \n                id=\"").concat(_this11.elementId, "_input_").concat(f.field, "\"\n                ").concat(f.required === true ? 'required' : '', " \n                type=\"").concat(f.type || 'text', "\" \n                class=\"websy-input\" \n                name=\"").concat(f.field, "\" \n                placeholder=\"").concat(f.placeholder || '', "\"\n                value=\"").concat(f.value || '', "\"\n                valueAsDate=\"").concat(f.type === 'date' ? f.value : '', "\"\n                oninvalidx=\"this.setCustomValidity('").concat(f.invalidMessage || 'Please fill in this field.', "')\"\n              />\n            </div><!--\n          ");
           }
         });
-        html += "\n        --><button class=\"websy-btn submit ".concat(this.options.submit.classes, "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n      ");
+        html += "\n        --><button class=\"websy-btn submit ".concat(this.options.submit.classes || '', "\">").concat(this.options.submit.text || 'Save', "</button>").concat(this.options.cancel ? '<!--' : '', "\n      ");
 
         if (this.options.cancel) {
-          html += "\n          --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes, "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n        ");
+          html += "\n          --><button class=\"websy-btn cancel ".concat(this.options.cancel.classes || '', "\">").concat(this.options.cancel.text || 'Cancel', "</button>\n        ");
         }
 
         html += "          \n        </form>\n        <div id=\"".concat(this.elementId, "_validationFail\" class=\"websy-validation-failure\"></div>\n      ");
@@ -1252,8 +1543,8 @@ var WebsyForm = /*#__PURE__*/function () {
 
         el.innerHTML = html;
         this.processComponents(componentsToProcess, function () {
-          if (_this8.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
-            _this8.recaptchaReady();
+          if (_this11.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
+            _this11.recaptchaReady();
           }
         });
       }
@@ -1261,7 +1552,7 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "submitForm",
     value: function submitForm() {
-      var _this9 = this;
+      var _this12 = this;
 
       var formEl = document.getElementById("".concat(this.elementId, "Form"));
 
@@ -1275,22 +1566,22 @@ var WebsyForm = /*#__PURE__*/function () {
               data[key] = value;
             });
 
-            if (_this9.options.url) {
-              _this9.apiService.add(_this9.options.url, data).then(function (result) {
-                if (_this9.options.clearAfterSave === true) {
+            if (_this12.options.url) {
+              _this12.apiService.add(_this12.options.url, data).then(function (result) {
+                if (_this12.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
 
-                _this9.options.onSuccess.call(_this9, result);
+                _this12.options.onSuccess.call(_this12, result);
               }, function (err) {
                 console.log('Error submitting form data:', err);
 
-                _this9.options.onError.call(_this9, err);
+                _this12.options.onError.call(_this12, err);
               });
-            } else if (_this9.options.submitFn) {
-              _this9.options.submitFn(data, function () {
-                if (_this9.options.clearAfterSave === true) {
+            } else if (_this12.options.submitFn) {
+              _this12.options.submitFn(data, function () {
+                if (_this12.options.clearAfterSave === true) {
                   // this.render()
                   formEl.reset();
                 }
@@ -1310,17 +1601,17 @@ var WebsyForm = /*#__PURE__*/function () {
   }, {
     key: "data",
     set: function set(d) {
-      var _this10 = this;
+      var _this13 = this;
 
       if (!this.options.fields) {
         this.options.fields = [];
       }
 
       var _loop = function _loop(key) {
-        _this10.options.fields.forEach(function (f) {
+        _this13.options.fields.forEach(function (f) {
           if (f.field === key) {
             f.value = d[key];
-            var el = document.getElementById("".concat(_this10.elementId, "_input_").concat(f.field));
+            var el = document.getElementById("".concat(_this13.elementId, "_input_").concat(f.field));
             el.value = f.value;
           }
         });
@@ -1520,10 +1811,6 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
         html += this.renderBlock(this.options.items, 'main', 0);
         html += "</div>";
         el.innerHTML = html;
-
-        if (this.options.navigator) {
-          this.options.navigator.registerElements(el);
-        }
       }
     }
   }, {
@@ -1619,6 +1906,122 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
 
   return WebsyNavigationMenu;
 }();
+/* global WebsyDesigns */
+
+
+var Pager = /*#__PURE__*/function () {
+  function Pager(elementId, options) {
+    var _this14 = this;
+
+    _classCallCheck(this, Pager);
+
+    this.elementId = elementId;
+    var DEFAULTS = {
+      pageSizePrefix: 'Show',
+      pageSizeSuffix: 'rows',
+      pageSizeOptions: [{
+        label: '10',
+        value: 10
+      }, {
+        label: '20',
+        value: 20
+      }, {
+        label: '50',
+        value: 50
+      }, {
+        label: '100',
+        value: 100
+      }],
+      selectedPageSize: 20,
+      pageLabel: 'Page',
+      showPageSize: true,
+      activePage: 0,
+      pages: []
+    };
+    this.options = _extends({}, DEFAULTS, options);
+    var el = document.getElementById(this.elementId);
+
+    if (el) {
+      var html = "\n        <div class=\"websy-pager-container\">\n      ";
+
+      if (this.options.showPageSize === true) {
+        html += "\n          ".concat(this.options.pageSizePrefix, " <div id=\"").concat(this.elementId, "_pageSizeSelector\" class=\"websy-page-selector\"></div> ").concat(this.options.pageSizeSuffix, "          \n        ");
+      }
+
+      html += "\n          <ul id=\"".concat(this.elementId, "_pageList\" class=\"websy-page-list\"></ul>        \n        </div> \n      ");
+      el.innerHTML = html;
+      el.addEventListener('click', this.handleClick.bind(this));
+
+      if (this.options.showPageSize === true) {
+        this.pageSizeSelector = new WebsyDesigns.Dropdown("".concat(this.elementId, "_pageSizeSelector"), {
+          selectedItems: [this.options.pageSizeOptions.indexOf(this.options.selectedPageSize)],
+          items: this.pageSizeOptions.map(function (p) {
+            return {
+              label: p.toString(),
+              value: p
+            };
+          }),
+          allowClear: false,
+          disableSearch: true,
+          onItemSelected: function onItemSelected(selectedItem) {
+            if (_this14.options.onChangePageSize) {
+              _this14.options.onChangePageSize(selectedItem.value);
+            }
+          }
+        });
+      }
+
+      this.render();
+    }
+  }
+
+  _createClass(Pager, [{
+    key: "handleClick",
+    value: function handleClick(event) {
+      if (event.target.classList.contains('websy-page-num')) {
+        var pageNum = +event.target.getAttribute('data-index');
+
+        if (this.options.onSetPage) {
+          this.options.onSetPage(this.options.pages[pageNum]);
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this15 = this;
+
+      var el = document.getElementById("".concat(this.elementId, "_pageList"));
+
+      if (el) {
+        var pages = this.options.pages.map(function (item, index) {
+          return "<li data-index=\"".concat(index, "\" class=\"websy-page-num ").concat(_this15.options.activePage === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+        });
+        var startIndex = 0;
+
+        if (this.options.pages.length > 8) {
+          startIndex = Math.max(0, this.options.activePage - 4);
+          pages = pages.splice(startIndex, 10);
+
+          if (startIndex > 0) {
+            pages.splice(0, 0, "<li>".concat(this.options.pageLabel, "&nbsp;</li><li data-page=\"0\" class=\"websy-page-num\">First</li><li>...</li>"));
+          } else {
+            pages.splice(0, 0, "<li>".concat(this.options.pageLabel, "&nbsp;</li>"));
+          }
+
+          if (this.options.activePage < this.options.pages.length - 1) {
+            pages.push('<li>...</li>');
+            pages.push("<li data-page=\"".concat(this.options.pages.length - 1, "\" class=\"websy-page-num\">Last</li>"));
+          }
+        }
+
+        el.innerHTML = pages.join('');
+      }
+    }
+  }]);
+
+  return Pager;
+}();
 /* global WebsyDesigns Blob */
 
 
@@ -1660,58 +2063,58 @@ var WebsyPDFButton = /*#__PURE__*/function () {
   _createClass(WebsyPDFButton, [{
     key: "handleClick",
     value: function handleClick(event) {
-      var _this11 = this;
+      var _this16 = this;
 
       if (event.target.classList.contains('websy-pdf-button')) {
         this.loader.show();
         setTimeout(function () {
-          if (_this11.options.targetId) {
-            var el = document.getElementById(_this11.options.targetId);
+          if (_this16.options.targetId) {
+            var el = document.getElementById(_this16.options.targetId);
 
             if (el) {
               var pdfData = {
                 options: {}
               };
 
-              if (_this11.options.pdfOptions) {
-                pdfData.options = _extends({}, _this11.options.pdfOptions);
+              if (_this16.options.pdfOptions) {
+                pdfData.options = _extends({}, _this16.options.pdfOptions);
               }
 
-              if (_this11.options.header) {
-                if (_this11.options.header.elementId) {
-                  var headerEl = document.getElementById(_this11.options.header.elementId);
+              if (_this16.options.header) {
+                if (_this16.options.header.elementId) {
+                  var headerEl = document.getElementById(_this16.options.header.elementId);
 
                   if (headerEl) {
                     pdfData.header = headerEl.outerHTML;
 
-                    if (_this11.options.header.css) {
-                      pdfData.options.headerCSS = _this11.options.header.css;
+                    if (_this16.options.header.css) {
+                      pdfData.options.headerCSS = _this16.options.header.css;
                     }
                   }
-                } else if (_this11.options.header.html) {
-                  pdfData.header = _this11.options.header.html;
+                } else if (_this16.options.header.html) {
+                  pdfData.header = _this16.options.header.html;
 
-                  if (_this11.options.header.css) {
-                    pdfData.options.headerCSS = _this11.options.header.css;
+                  if (_this16.options.header.css) {
+                    pdfData.options.headerCSS = _this16.options.header.css;
                   }
                 } else {
-                  pdfData.header = _this11.options.header;
+                  pdfData.header = _this16.options.header;
                 }
               }
 
-              if (_this11.options.footer) {
-                if (_this11.options.footer.elementId) {
-                  var footerEl = document.getElementById(_this11.options.footer.elementId);
+              if (_this16.options.footer) {
+                if (_this16.options.footer.elementId) {
+                  var footerEl = document.getElementById(_this16.options.footer.elementId);
 
                   if (footerEl) {
                     pdfData.footer = footerEl.outerHTML;
 
-                    if (_this11.options.footer.css) {
-                      pdfData.options.footerCSS = _this11.options.footer.css;
+                    if (_this16.options.footer.css) {
+                      pdfData.options.footerCSS = _this16.options.footer.css;
                     }
                   }
                 } else {
-                  pdfData.footer = _this11.options.footer;
+                  pdfData.footer = _this16.options.footer;
                 }
               }
 
@@ -1720,23 +2123,23 @@ var WebsyPDFButton = /*#__PURE__*/function () {
               // document.getElementById(`${this.elementId}_pdfFooter`).value = pdfData.footer
               // document.getElementById(`${this.elementId}_form`).submit()
 
-              _this11.service.add('', pdfData, {
+              _this16.service.add('', pdfData, {
                 responseType: 'blob'
               }).then(function (response) {
-                _this11.loader.hide();
+                _this16.loader.hide();
 
                 var blob = new Blob([response], {
                   type: 'application/pdf'
                 });
                 var msg = "\n                <div class='text-center websy-pdf-download'>\n                  <div>Your file is ready to download</div>\n                  <a href='".concat(URL.createObjectURL(blob), "' target='_blank'\n              ");
 
-                if (_this11.options.directDownload === true) {
-                  msg += "download='".concat(_this11.options.fileName || 'Export', ".pdf'");
+                if (_this16.options.directDownload === true) {
+                  msg += "download='".concat(_this16.options.fileName || 'Export', ".pdf'");
                 }
 
-                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this11.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
+                msg += "\n                  >\n                    <button class='websy-btn download-pdf'>".concat(_this16.options.buttonText, "</button>\n                  </a>\n                </div>\n              ");
 
-                _this11.popup.show({
+                _this16.popup.show({
                   message: msg,
                   mask: true
                 });
@@ -1921,7 +2324,7 @@ var WebsyPubSub = /*#__PURE__*/function () {
 
 var WebsyResultList = /*#__PURE__*/function () {
   function WebsyResultList(elementId, options) {
-    var _this12 = this;
+    var _this17 = this;
 
     _classCallCheck(this, WebsyResultList);
 
@@ -1949,9 +2352,9 @@ var WebsyResultList = /*#__PURE__*/function () {
 
     if (_typeof(options.template) === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(function (templateString) {
-        _this12.options.template = templateString;
+        _this17.options.template = templateString;
 
-        _this12.render();
+        _this17.render();
       });
     } else {
       this.render();
@@ -1970,7 +2373,7 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "buildHTML",
     value: function buildHTML(d) {
-      var _this13 = this;
+      var _this18 = this;
 
       var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var html = "";
@@ -1978,7 +2381,7 @@ var WebsyResultList = /*#__PURE__*/function () {
       if (this.options.template) {
         if (d.length > 0) {
           d.forEach(function (row, ix) {
-            var template = "".concat(ix > 0 ? '-->' : '').concat(_this13.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
+            var template = "".concat(ix > 0 ? '-->' : '').concat(_this18.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
 
             var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
 
@@ -2098,7 +2501,7 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "handleClick",
     value: function handleClick(event) {
-      var _this14 = this;
+      var _this19 = this;
 
       if (event.target.classList.contains('clickable')) {
         var l = event.target.getAttribute('data-event');
@@ -2116,8 +2519,8 @@ var WebsyResultList = /*#__PURE__*/function () {
           l = l[0];
           params = params.map(function (p) {
             if (typeof p !== 'string' && typeof p !== 'number') {
-              if (_this14.rows[+id]) {
-                p = _this14.rows[+id][p];
+              if (_this19.rows[+id]) {
+                p = _this19.rows[+id][p];
               }
             } else if (typeof p === 'string') {
               p = p.replace(/"/g, '').replace(/'/g, '');
@@ -2139,13 +2542,13 @@ var WebsyResultList = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this15 = this;
+      var _this20 = this;
 
       if (this.options.entity) {
         this.apiService.get(this.options.entity).then(function (results) {
-          _this15.rows = results.rows;
+          _this20.rows = results.rows;
 
-          _this15.resize();
+          _this20.resize();
         });
       } else {
         this.resize();
@@ -2224,7 +2627,7 @@ var WebsyRouter = /*#__PURE__*/function () {
   _createClass(WebsyRouter, [{
     key: "addGroup",
     value: function addGroup(group) {
-      var _this16 = this;
+      var _this21 = this;
 
       if (!this.groups[group]) {
         var els = document.querySelectorAll(".websy-view[data-group=\"".concat(group, "\"]"));
@@ -2232,7 +2635,7 @@ var WebsyRouter = /*#__PURE__*/function () {
         if (els) {
           console.log('els', els);
           this.getClosestParent(els[0], function (parent) {
-            _this16.groups[group] = {
+            _this21.groups[group] = {
               activeView: '',
               views: [],
               parent: parent.getAttribute('data-view')
@@ -2553,12 +2956,12 @@ var WebsyRouter = /*#__PURE__*/function () {
   }, {
     key: "showComponents",
     value: function showComponents(view) {
-      var _this17 = this;
+      var _this22 = this;
 
       if (this.options.views && this.options.views[view] && this.options.views[view].components) {
         this.options.views[view].components.forEach(function (c) {
           if (typeof c.instance === 'undefined') {
-            _this17.prepComponent(c.elementId, c.options);
+            _this22.prepComponent(c.elementId, c.options);
 
             c.instance = new c.Component(c.elementId, c.options);
           } else if (c.instance.render) {
@@ -2925,7 +3328,7 @@ var Switch = /*#__PURE__*/function () {
 
 var WebsyTemplate = /*#__PURE__*/function () {
   function WebsyTemplate(elementId, options) {
-    var _this18 = this;
+    var _this23 = this;
 
     _classCallCheck(this, WebsyTemplate);
 
@@ -2951,9 +3354,9 @@ var WebsyTemplate = /*#__PURE__*/function () {
 
     if (_typeof(options.template) === 'object' && options.template.url) {
       this.templateService.get(options.template.url).then(function (templateString) {
-        _this18.options.template = templateString;
+        _this23.options.template = templateString;
 
-        _this18.render();
+        _this23.render();
       });
     } else {
       this.render();
@@ -2963,7 +3366,7 @@ var WebsyTemplate = /*#__PURE__*/function () {
   _createClass(WebsyTemplate, [{
     key: "buildHTML",
     value: function buildHTML() {
-      var _this19 = this;
+      var _this24 = this;
 
       var html = "";
 
@@ -3025,14 +3428,14 @@ var WebsyTemplate = /*#__PURE__*/function () {
                 }
 
                 if (polarity === true) {
-                  if (typeof _this19.options.data[parts[0]] !== 'undefined' && _this19.options.data[parts[0]] === parts[1]) {
+                  if (typeof _this24.options.data[parts[0]] !== 'undefined' && _this24.options.data[parts[0]] === parts[1]) {
                     // remove the <if> tags
                     removeAll = false;
                   } else if (parts[0] === parts[1]) {
                     removeAll = false;
                   }
                 } else if (polarity === false) {
-                  if (typeof _this19.options.data[parts[0]] !== 'undefined' && _this19.options.data[parts[0]] !== parts[1]) {
+                  if (typeof _this24.options.data[parts[0]] !== 'undefined' && _this24.options.data[parts[0]] !== parts[1]) {
                     // remove the <if> tags
                     removeAll = false;
                   }
@@ -3259,10 +3662,10 @@ var WebsyUtils = {
       var s = '';
       var d = 1; // let out
 
-      for (var _i5 = 0; _i5 < ranges.length; _i5++) {
-        if (n >= ranges[_i5].divider) {
-          d = ranges[_i5].divider;
-          s = ranges[_i5].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')                
+      for (var _i6 = 0; _i6 < ranges.length; _i6++) {
+        if (n >= ranges[_i6].divider) {
+          d = ranges[_i6].divider;
+          s = ranges[_i6].suffix; // out = (n / ranges[i].divider).toFixed(decimals).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$100,')                
 
           break;
         }
@@ -3300,7 +3703,7 @@ var WebsyUtils = {
 
 var WebsyTable = /*#__PURE__*/function () {
   function WebsyTable(elementId, options) {
-    var _this20 = this;
+    var _this25 = this;
 
     _classCallCheck(this, WebsyTable);
 
@@ -3338,8 +3741,8 @@ var WebsyTable = /*#__PURE__*/function () {
           allowClear: false,
           disableSearch: true,
           onItemSelected: function onItemSelected(selectedItem) {
-            if (_this20.options.onChangePageSize) {
-              _this20.options.onChangePageSize(selectedItem.value);
+            if (_this25.options.onChangePageSize) {
+              _this25.options.onChangePageSize(selectedItem.value);
             }
           }
         });
@@ -3360,7 +3763,7 @@ var WebsyTable = /*#__PURE__*/function () {
   _createClass(WebsyTable, [{
     key: "appendRows",
     value: function appendRows(data) {
-      var _this21 = this;
+      var _this26 = this;
 
       this.hideError();
       var bodyHTML = '';
@@ -3368,37 +3771,41 @@ var WebsyTable = /*#__PURE__*/function () {
       if (data) {
         bodyHTML += data.map(function (r, rowIndex) {
           return '<tr>' + r.map(function (c, i) {
-            if (_this21.options.columns[i].show !== false) {
+            if (_this26.options.columns[i].show !== false) {
               var style = '';
 
               if (c.style) {
                 style += c.style;
               }
 
-              if (_this21.options.columns[i].width) {
-                style += "width: ".concat(_this21.options.columns[i].width, "; ");
+              if (_this26.options.columns[i].width) {
+                style += "width: ".concat(_this26.options.columns[i].width, "; ");
               }
 
               if (c.backgroundColor) {
                 style += "background-color: ".concat(c.backgroundColor, "; ");
+
+                if (!c.color) {
+                  style += "color: ".concat(WebsyDesigns.Utils.getLightDark(c.backgroundColor), "; ");
+                }
               }
 
               if (c.color) {
                 style += "color: ".concat(c.color, "; ");
               }
 
-              if (_this21.options.columns[i].showAsLink === true && c.value.trim() !== '') {
-                return "\n                <td \n                  data-row-index='".concat(_this21.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this21.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this21.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this21.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
-              } else if ((_this21.options.columns[i].showAsNavigatorLink === true || _this21.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
-                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this21.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='trigger-item ").concat(_this21.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this21.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this21.options.columns[i].linkText || c.value, "</td>\n              ");
+              if (_this26.options.columns[i].showAsLink === true && c.value.trim() !== '') {
+                return "\n                <td \n                  data-row-index='".concat(_this26.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this26.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this26.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this26.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
+              } else if ((_this26.options.columns[i].showAsNavigatorLink === true || _this26.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
+                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this26.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='trigger-item ").concat(_this26.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this26.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this26.options.columns[i].linkText || c.value, "</td>\n              ");
               } else {
                 var info = c.value;
 
-                if (_this21.options.columns[i].showAsImage === true) {
+                if (_this26.options.columns[i].showAsImage === true) {
                   c.value = "\n                  <img src='".concat(c.value, "'>\n                ");
                 }
 
-                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this21.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this21.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
+                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this26.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this26.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
               }
             }
           }).join('') + '</tr>';
@@ -3557,7 +3964,7 @@ var WebsyTable = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(data) {
-      var _this22 = this;
+      var _this27 = this;
 
       if (!this.options.columns) {
         return;
@@ -3582,7 +3989,7 @@ var WebsyTable = /*#__PURE__*/function () {
 
       var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
         if (c.show !== false) {
-          return "\n        <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            <!--").concat(c.searchable === true ? _this22.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n          </div>\n        </th>\n        ");
+          return "\n        <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            <!--").concat(c.searchable === true ? _this27.buildSearchIcon(c.qGroupFieldDefs[0]) : '', "-->\n          </div>\n        </th>\n        ");
         }
       }).join('') + '</tr>';
       var headEl = document.getElementById("".concat(this.elementId, "_head"));
@@ -3601,7 +4008,7 @@ var WebsyTable = /*#__PURE__*/function () {
 
         if (pagingEl) {
           var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
-            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this22.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this27.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
           });
           var startIndex = 0;
 
@@ -3664,12 +4071,550 @@ var WebsyTable = /*#__PURE__*/function () {
 
   return WebsyTable;
 }();
+/* global WebsyDesigns */
+
+
+var WebsyTable2 = /*#__PURE__*/function () {
+  function WebsyTable2(elementId, options) {
+    var _this28 = this;
+
+    _classCallCheck(this, WebsyTable2);
+
+    var DEFAULTS = {
+      pageSize: 20,
+      paging: 'scroll',
+      cellSize: 35,
+      virtualScroll: false,
+      leftColumns: 0
+    };
+    this.elementId = elementId;
+    this.options = _extends({}, DEFAULTS, options);
+    this.rowCount = 0;
+    this.busy = false;
+    this.tooltipTimeoutFn = null;
+    this.data = [];
+    var el = document.getElementById(this.elementId);
+
+    if (el) {
+      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <table id=\"").concat(this.elementId, "_table\">            \n            <thead id=\"").concat(this.elementId, "_head\">\n            </thead>\n            <tbody id=\"").concat(this.elementId, "_body\">\n            </tbody>\n            <tfoot id=\"").concat(this.elementId, "_foot\">\n            </tfoot>\n          </table>      \n          <div id=\"").concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n            <div>\n              <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n              <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n            </div>            \n          </div>\n          <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n            <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n          </div>\n          <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n            <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n          </div>\n          <div id=\"").concat(this.elementId, "_dropdownContainer\"></div>\n          <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n        </div>\n      ");
+
+      if (this.options.paging === 'pages') {
+        html += "\n          <div class=\"websy-table-paging-container\">\n            Show <div id=\"".concat(this.elementId, "_pageSizeSelector\" class=\"websy-vis-page-selector\"></div> rows\n            <ul id=\"").concat(this.elementId, "_pageList\" class=\"websy-vis-page-list\"></ul>\n          </div>\n        ");
+      }
+
+      var pageOptions = [10, 20, 50, 100, 200];
+      el.innerHTML = html;
+
+      if (this.options.paging === 'pages') {
+        this.pageSizeSelector = new WebsyDesigns.Dropdown("".concat(this.elementId, "_pageSizeSelector"), {
+          selectedItems: [pageOptions.indexOf(this.options.pageSize)],
+          items: pageOptions.map(function (p) {
+            return {
+              label: p.toString(),
+              value: p
+            };
+          }),
+          allowClear: false,
+          disableSearch: true,
+          onItemSelected: function onItemSelected(selectedItem) {
+            if (_this28.options.onChangePageSize) {
+              _this28.options.onChangePageSize(selectedItem.value);
+            }
+          }
+        });
+      }
+
+      el.addEventListener('click', this.handleClick.bind(this));
+      el.addEventListener('mouseout', this.handleMouseOut.bind(this));
+      el.addEventListener('mousemove', this.handleMouseMove.bind(this));
+      el.addEventListener('mousedown', this.handleMouseDown.bind(this));
+      el.addEventListener('mouseup', this.handleMouseUp.bind(this));
+      document.addEventListener('mouseup', this.handleGlobalMouseUp.bind(this));
+      var scrollEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
+      scrollEl.addEventListener('scroll', this.handleScroll.bind(this));
+      this.loadingDialog = new WebsyDesigns.LoadingDialog("".concat(this.elementId, "_loadingContainer"));
+      this.render();
+    } else {
+      console.error("No element found with ID ".concat(this.elementId));
+    }
+  }
+
+  _createClass(WebsyTable2, [{
+    key: "appendRows",
+    value: function appendRows(data) {
+      var _this29 = this;
+
+      this.hideError();
+      var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
+      var bodyHTML = '';
+
+      if (data) {
+        bodyHTML += data.map(function (r, rowIndex) {
+          return '<tr>' + r.map(function (c, i) {
+            if (_this29.options.columns[i].show !== false) {
+              var style = "height: ".concat(_this29.options.cellSize, "px; line-height: ").concat(_this29.options.cellSize, "px;");
+
+              if (c.style) {
+                style += c.style;
+              }
+
+              if (_this29.options.columns[i].width) {
+                style += "width: ".concat(_this29.options.columns[i].width, "; ");
+              }
+
+              if (c.backgroundColor) {
+                style += "background-color: ".concat(c.backgroundColor, "; ");
+              }
+
+              if (c.color) {
+                style += "color: ".concat(c.color, "; ");
+              }
+
+              if (_this29.options.columns[i].showAsLink === true && c.value.trim() !== '') {
+                return "\n                <td \n                  data-row-index='".concat(_this29.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this29.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >\n                  <a href='").concat(c.value, "' target='").concat(_this29.options.columns[i].openInNewTab === true ? '_blank' : '_self', "'>").concat(c.displayText || _this29.options.columns[i].linkText || c.value, "</a>\n                </td>\n              ");
+              } else if ((_this29.options.columns[i].showAsNavigatorLink === true || _this29.options.columns[i].showAsRouterLink === true) && c.value.trim() !== '') {
+                return "\n                <td \n                  data-view='".concat(c.value, "' \n                  data-row-index='").concat(_this29.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='trigger-item ").concat(_this29.options.columns[i].clickable === true ? 'clickable' : '', " ").concat(_this29.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.displayText || _this29.options.columns[i].linkText || c.value, "</td>\n              ");
+              } else {
+                var info = c.value;
+
+                if (_this29.options.columns[i].showAsImage === true) {
+                  c.value = "\n                  <img src='".concat(c.value, "'>\n                ");
+                }
+
+                return "\n                <td \n                  data-info='".concat(info, "' \n                  data-row-index='").concat(_this29.rowCount + rowIndex, "' \n                  data-col-index='").concat(i, "' \n                  class='").concat(_this29.options.columns[i].classes || '', "' \n                  style='").concat(style, "'\n                  colspan='").concat(c.colspan || 1, "'\n                  rowspan='").concat(c.rowspan || 1, "'\n                >").concat(c.value, "</td>\n              ");
+              }
+            }
+          }).join('') + '</tr>';
+        }).join('');
+        this.data = this.data.concat(data);
+        this.rowCount = this.data.length;
+      }
+
+      bodyEl.innerHTML += bodyHTML;
+
+      if (this.options.virtualScroll === true) {
+        // get height of the thead      
+        if (this.options.paging !== 'pages') {
+          var headEl = document.getElementById("".concat(this.elementId, "_head"));
+          var vScrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
+          vScrollContainerEl.style.top = "".concat(headEl.clientHeight, "px");
+        }
+
+        var hScrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
+        var left = 0;
+        var cells = bodyEl.querySelectorAll("tr:first-of-type td");
+
+        for (var i = 0; i < this.options.leftColumns; i++) {
+          left += cells[i].offsetWidth || cells[i].clientWidth;
+        }
+
+        hScrollContainerEl.style.left = "".concat(left, "px");
+      }
+    }
+  }, {
+    key: "buildSearchIcon",
+    value: function buildSearchIcon(columnIndex) {
+      return "\n      <div class=\"websy-table-search-icon\" data-col-index=\"".concat(columnIndex, "\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-f</title><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>\n      </div>\n    ");
+    }
+  }, {
+    key: "handleClick",
+    value: function handleClick(event) {
+      if (event.target.classList.contains('download-button')) {
+        window.viewManager.dataExportController.exportData(this.options.model);
+      }
+
+      if (event.target.classList.contains('sortable-column')) {
+        var colIndex = +event.target.getAttribute('data-index');
+        var column = this.options.columns[colIndex];
+
+        if (this.options.onSort) {
+          this.options.onSort(event, column, colIndex);
+        } else {
+          this.internalSort(column, colIndex);
+        } // const colIndex = +event.target.getAttribute('data-index')
+        // const dimIndex = +event.target.getAttribute('data-dim-index')
+        // const expIndex = +event.target.getAttribute('data-exp-index')
+        // const reverse = event.target.getAttribute('data-reverse') === 'true'
+        // const patchDefs = [{
+        //   qOp: 'replace',
+        //   qPath: '/qHyperCubeDef/qInterColumnSortOrder',
+        //   qValue: JSON.stringify([colIndex])
+        // }]
+        // patchDefs.push({
+        //   qOp: 'replace',
+        //   qPath: `/qHyperCubeDef/${dimIndex > -1 ? 'qDimensions' : 'qMeasures'}/${dimIndex > -1 ? dimIndex : expIndex}/qDef/qReverseSort`,
+        //   qValue: JSON.stringify(reverse)
+        // })
+        // this.options.model.applyPatches(patchDefs) // .then(() => this.render())
+
+      } else if (event.target.classList.contains('websy-table-search-icon')) {
+        // let field = event.target.getAttribute('data-field')
+        // window.viewManager.views.global.objects[1].instance.show(field, { x: event.pageX, y: event.pageY }, () => {
+        //   event.target.classList.remove('active')
+        // })
+        var _colIndex2 = +event.target.getAttribute('data-col-index');
+
+        if (this.options.columns[_colIndex2].onSearch) {
+          this.options.columns[_colIndex2].onSearch(event, this.options.columns[_colIndex2]);
+        }
+      } else if (event.target.classList.contains('clickable')) {
+        var _colIndex3 = +event.target.getAttribute('data-col-index');
+
+        var rowIndex = +event.target.getAttribute('data-row-index');
+
+        if (this.options.onClick) {
+          this.options.onClick(event, this.data[rowIndex][_colIndex3], this.data[rowIndex], this.options.columns[_colIndex3]);
+        }
+      } else if (event.target.classList.contains('websy-page-num')) {
+        var pageNum = +event.target.getAttribute('data-page');
+
+        if (this.options.onSetPage) {
+          this.options.onSetPage(pageNum);
+        }
+      }
+    }
+  }, {
+    key: "handleMouseDown",
+    value: function handleMouseDown(event) {
+      if (event.target.classList.contains('websy-scroll-handle')) {
+        this.scrolling = true;
+        var el = document.getElementById(this.elementId);
+        el.classList.add('scrolling');
+      }
+
+      if (event.target.classList.contains('websy-scroll-handle-x')) {
+        var handleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
+        this.handleXStart = handleEl.offsetLeft;
+        this.scrollXStart = event.clientX;
+        this.scrollDirection = 'X';
+      }
+    }
+  }, {
+    key: "handleGlobalMouseUp",
+    value: function handleGlobalMouseUp(event) {
+      this.scrolling = false;
+      var el = document.getElementById(this.elementId);
+      el.classList.remove('scrolling');
+    }
+  }, {
+    key: "handleMouseUp",
+    value: function handleMouseUp(event) {
+      this.scrolling = false;
+      var el = document.getElementById(this.elementId);
+      el.classList.remove('scrolling');
+    }
+  }, {
+    key: "handleMouseMove",
+    value: function handleMouseMove(event) {
+      if (this.tooltipTimeoutFn) {
+        event.target.classList.remove('websy-delayed-info');
+        clearTimeout(this.tooltipTimeoutFn);
+      }
+
+      if (event.target.tagName === 'TD') {
+        this.tooltipTimeoutFn = setTimeout(function () {
+          event.target.classList.add('websy-delayed-info');
+        }, 500);
+      }
+
+      if (this.scrolling === true && this.options.virtualScroll === true) {
+        var tableContainerEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
+
+        if (this.scrollDirection === 'X') {
+          var handleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle")); // console.log(this.handleXStart + handleEl.offsetWidth + (event.clientX - this.scrollXStart), this.columnParameters.scrollableWidth)        
+
+          var startPoint = 0;
+
+          if (this.handleXStart + (event.clientX - this.scrollXStart) < this.columnParameters.scrollableWidth - handleEl.offsetWidth) {
+            handleEl.style.left = "".concat(this.handleXStart + (event.clientX - this.scrollXStart), "px");
+            startPoint = this.handleXStart + (event.clientX - this.scrollXStart);
+          } else {
+            startPoint = this.columnParameters.scrollableWidth - handleEl.offsetWidth;
+          }
+
+          if (this.handleXStart + (event.clientX - this.scrollXStart) < 0) {
+            handleEl.style.left = 0;
+            startPoint = 0;
+          }
+
+          if (this.options.onScrollX) {
+            this.options.onScrollX(startPoint);
+          }
+        }
+      }
+    }
+  }, {
+    key: "handleMouseOut",
+    value: function handleMouseOut(event) {
+      if (this.tooltipTimeoutFn) {
+        event.target.classList.remove('websy-delayed-info');
+        clearTimeout(this.tooltipTimeoutFn);
+      }
+    }
+  }, {
+    key: "handleScroll",
+    value: function handleScroll(event) {
+      if (this.options.onScroll && this.options.paging === 'scroll') {
+        this.options.onScroll(event);
+      }
+    }
+  }, {
+    key: "hideError",
+    value: function hideError() {
+      var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
+
+      if (el) {
+        el.classList.remove('has-error');
+      }
+
+      var tableEl = document.getElementById("".concat(this.elementId, "_table"));
+      tableEl.classList.remove('hidden');
+      var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
+
+      if (containerEl) {
+        containerEl.classList.remove('active');
+      }
+    }
+  }, {
+    key: "hideLoading",
+    value: function hideLoading() {
+      this.loadingDialog.hide();
+    }
+  }, {
+    key: "internalSort",
+    value: function internalSort(column, colIndex) {
+      this.options.columns.forEach(function (c, i) {
+        c.activeSort = i === colIndex;
+      });
+
+      if (column.sortFunction) {
+        this.data = column.sortFunction(this.data, column);
+      } else {
+        var sortProp = 'value';
+        var sortOrder = column.sort === 'asc' ? 'desc' : 'asc';
+        column.sort = sortOrder;
+        var sortType = column.sortType || 'alphanumeric';
+
+        if (column.sortProp) {
+          sortProp = column.sortProp;
+        }
+
+        this.data.sort(function (a, b) {
+          switch (sortType) {
+            case 'numeric':
+              if (sortOrder === 'asc') {
+                return a[colIndex][sortProp] - b[colIndex][sortProp];
+              } else {
+                return b[colIndex][sortProp] - a[colIndex][sortProp];
+              }
+
+            default:
+              if (sortOrder === 'asc') {
+                return a[colIndex][sortProp] > b[colIndex][sortProp] ? 1 : -1;
+              } else {
+                return a[colIndex][sortProp] < b[colIndex][sortProp] ? 1 : -1;
+              }
+
+          }
+        });
+      }
+
+      this.render(this.data);
+    }
+  }, {
+    key: "render",
+    value: function render(data) {
+      var _this30 = this;
+
+      if (!this.options.columns) {
+        return;
+      }
+
+      this.hideError();
+      this.data = [];
+      this.rowCount = 0;
+      var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
+      bodyEl.innerHTML = '';
+
+      if (this.options.allowDownload === true) {
+        // doesn't do anything yet
+        var el = document.getElementById(this.elementId);
+
+        if (el) {
+          el.classList.add('allow-download');
+        } else {
+          el.classList.remove('allow-download');
+        }
+      } // let colGroupHTML = this.options.columns.map(c => `<col style="${c.width ? 'width: ' + c.width : ''}"></col>`)
+
+
+      var headHTML = '<tr>' + this.options.columns.map(function (c, i) {
+        if (c.show !== false) {
+          return "\n        <th ".concat(c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : '', ">\n          <div class =\"tableHeader\">\n            <div class=\"leftSection\">\n              <div\n                class=\"tableHeaderField ").concat(['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : '', "\"\n                data-index=\"").concat(i, "\"                \n                data-sort=\"").concat(c.sort, "\"                \n              >\n                ").concat(c.name, "\n              </div>\n            </div>\n            <div class=\"").concat(c.activeSort ? c.sort + ' sortOrder' : '', "\"></div>\n            ").concat(c.searchable === true ? _this30.buildSearchIcon(i) : '', "\n          </div>\n        </th>\n        ");
+        }
+      }).join('') + '</tr>';
+      var headEl = document.getElementById("".concat(this.elementId, "_head"));
+      headEl.innerHTML = headHTML;
+      var dropdownHTML = "";
+      this.options.columns.forEach(function (c, i) {
+        if (c.searchable && c.searchField) {
+          dropdownHTML += "\n          <div id=\"".concat(_this30.elementId, "_columnSearch_").concat(i, "\" class=\"websy-modal-dropdown\"></div>\n        ");
+        }
+      });
+      var dropdownEl = document.getElementById("".concat(this.elementId, "_dropdownContainer"));
+      dropdownEl.innerHTML = dropdownHTML; // const colGroupEl = document.getElementById(`${this.elementId}_cols`)
+      // colGroupEl.innerHTML = colGroupHTML
+      // let footHTML = '<tr>' + this.options.columns.map((c, i) => {
+      //   if (c.show !== false) {
+      //     return `
+      //       <th></th>
+      //     `
+      //   }
+      // }).join('') + '</tr>'
+      // const footEl = document.getElementById(`${this.elementId}_foot`)
+      // footEl.innerHTML = footHTML
+
+      if (this.options.paging === 'pages') {
+        var pagingEl = document.getElementById("".concat(this.elementId, "_pageList"));
+
+        if (pagingEl) {
+          var pages = new Array(this.options.pageCount).fill('').map(function (item, index) {
+            return "<li data-page=\"".concat(index, "\" class=\"websy-page-num ").concat(_this30.options.pageNum === index ? 'active' : '', "\">").concat(index + 1, "</li>");
+          });
+          var startIndex = 0;
+
+          if (this.options.pageCount > 8) {
+            startIndex = Math.max(0, this.options.pageNum - 4);
+            pages = pages.splice(startIndex, 10);
+
+            if (startIndex > 0) {
+              pages.splice(0, 0, "<li>Page&nbsp;</li><li data-page=\"0\" class=\"websy-page-num\">First</li><li>...</li>");
+            } else {
+              pages.splice(0, 0, '<li>Page&nbsp;</li>');
+            }
+
+            if (this.options.pageNum < this.options.pageCount - 1) {
+              pages.push('<li>...</li>');
+              pages.push("<li data-page=\"".concat(this.options.pageCount - 1, "\" class=\"websy-page-num\">Last</li>"));
+            }
+          }
+
+          pagingEl.innerHTML = pages.join('');
+        }
+      }
+
+      if (data) {
+        this.appendRows(data);
+      }
+    }
+  }, {
+    key: "showError",
+    value: function showError(options) {
+      var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
+
+      if (el) {
+        el.classList.add('has-error');
+      }
+
+      var tableEl = document.getElementById("".concat(this.elementId, "_table"));
+      tableEl.classList.add('hidden');
+      var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
+
+      if (containerEl) {
+        containerEl.classList.add('active');
+      }
+
+      if (options.title) {
+        var titleEl = document.getElementById("".concat(this.elementId, "_errorTitle"));
+
+        if (titleEl) {
+          titleEl.innerHTML = options.title;
+        }
+      }
+
+      if (options.message) {
+        var messageEl = document.getElementById("".concat(this.elementId, "_errorMessage"));
+
+        if (messageEl) {
+          messageEl.innerHTML = options.message;
+        }
+      }
+    }
+  }, {
+    key: "setHorizontalScroll",
+    value: function setHorizontalScroll(options) {
+      var el = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
+
+      if (options.width) {
+        el.style.width = "".concat(options.width, "px");
+      }
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth(width) {
+      var el = document.getElementById("".concat(this.elementId, "_table"));
+
+      if (el) {
+        el.style.width = "".concat(width, "px");
+      }
+    }
+  }, {
+    key: "showLoading",
+    value: function showLoading(options) {
+      this.loadingDialog.show(options);
+    }
+  }, {
+    key: "getColumnParameters",
+    value: function getColumnParameters(values) {
+      var _this31 = this;
+
+      var tableEl = document.getElementById("".concat(this.elementId, "_table"));
+      tableEl.style.tableLayout = 'auto';
+      tableEl.style.width = 'auto';
+      var bodyEl = document.getElementById("".concat(this.elementId, "_body"));
+      bodyEl.innerHTML = '<tr>' + values.map(function (c) {
+        return "\n      <td                 \n        style='height: ".concat(_this31.options.cellSize, "px; line-height: ").concat(_this31.options.cellSize, "px;'\n      >").concat(c.value || '&nbsp;', "</td>\n    ");
+      }).join('') + '</tr>'; // get height of the first data cell
+
+      var cells = bodyEl.querySelectorAll("tr:first-of-type td");
+      var tableContainerEl = document.getElementById("".concat(this.elementId, "_tableContainer"));
+      var cellHeight = cells[0].offsetHeight || cells[0].clientHeight;
+      var cellWidths = [];
+      var nonScrollableWidth = 0;
+
+      for (var i = 0; i < cells.length; i++) {
+        if (i < this.options.leftColumns) {
+          nonScrollableWidth += values[i].width || cells[i].offsetWidth || cells[i].clientWidth;
+        }
+
+        cellWidths.push(values[i].width || cells[i].offsetWidth || cells[i].clientWidth);
+      } // const cellWidth = firstDataCell.offsetWidth || firstDataCell.clientWidth        
+      // tableEl.style.width = ''
+
+
+      this.columnParameters = {
+        cellHeight: cellHeight,
+        cellWidths: cellWidths,
+        availableHeight: tableContainerEl.offsetHeight || tableContainerEl.clientHeight,
+        availableWidth: tableContainerEl.offsetWidth || tableContainerEl.clientWidth,
+        nonScrollableWidth: nonScrollableWidth,
+        scrollableWidth: (tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth
+      };
+      bodyEl.innerHTML = '';
+      tableEl.style.tableLayout = '';
+      tableEl.style.width = '';
+      return this.columnParameters;
+    }
+  }]);
+
+  return WebsyTable2;
+}();
 /* global d3 include WebsyDesigns */
 
 
 var WebsyChart = /*#__PURE__*/function () {
   function WebsyChart(elementId, options) {
-    var _this23 = this;
+    var _this32 = this;
 
     _classCallCheck(this, WebsyChart);
 
@@ -3717,22 +4662,22 @@ var WebsyChart = /*#__PURE__*/function () {
     this.invertOverride = function (input, input2) {
       var xAxis = 'bottomAxis';
 
-      if (_this23.options.orientation === 'horizontal') {
+      if (_this32.options.orientation === 'horizontal') {
         xAxis = 'leftAxis';
       }
 
-      var width = _this23[xAxis].step();
+      var width = _this32[xAxis].step();
 
       var output;
 
-      var domain = _toConsumableArray(_this23[xAxis].domain());
+      var domain = _toConsumableArray(_this32[xAxis].domain());
 
-      if (_this23.options.orientation === 'horizontal') {
+      if (_this32.options.orientation === 'horizontal') {
         domain = domain.reverse();
       }
 
       for (var j = 0; j < domain.length; j++) {
-        var breakA = _this23[xAxis](domain[j]) - width / 2;
+        var breakA = _this32[xAxis](domain[j]) - width / 2;
         var breakB = breakA + width;
 
         if (input > breakA && input <= breakB) {
@@ -3832,10 +4777,10 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "handleEventMouseMove",
     value: function handleEventMouseMove(event, d) {
-      var _this24 = this;
+      var _this33 = this;
 
       var bisectDate = d3.bisector(function (d) {
-        return _this24.parseX(d.x.value);
+        return _this33.parseX(d.x.value);
       }).left;
 
       if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -3874,8 +4819,8 @@ var WebsyChart = /*#__PURE__*/function () {
         }
 
         this.options.data.series.forEach(function (s) {
-          if (_this24.options.data[xData].scale !== 'Time') {
-            xPoint = _this24[xAxis](_this24.parseX(xLabel));
+          if (_this33.options.data[xData].scale !== 'Time') {
+            xPoint = _this33[xAxis](_this33.parseX(xLabel));
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
                 if (!d.y.color) {
@@ -3890,13 +4835,13 @@ var WebsyChart = /*#__PURE__*/function () {
             var pointA = s.data[index - 1];
             var pointB = s.data[index];
 
-            if (_this24.options.orientation === 'horizontal') {
+            if (_this33.options.orientation === 'horizontal') {
               pointA = _toConsumableArray(s.data).reverse()[index - 1];
               pointB = _toConsumableArray(s.data).reverse()[index];
             }
 
             if (pointA && !pointB) {
-              xPoint = _this24[xAxis](_this24.parseX(pointA.x.value));
+              xPoint = _this33[xAxis](_this33.parseX(pointA.x.value));
               tooltipTitle = pointA.x.value;
 
               if (!pointA.y.color) {
@@ -3906,12 +4851,12 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointA.y);
 
               if (typeof pointA.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointA.x.value);
+                tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointA.x.value);
               }
             }
 
             if (pointB && !pointA) {
-              xPoint = _this24[xAxis](_this24.parseX(pointB.x.value));
+              xPoint = _this33[xAxis](_this33.parseX(pointB.x.value));
               tooltipTitle = pointB.x.value;
 
               if (!pointB.y.color) {
@@ -3921,14 +4866,14 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointB.y);
 
               if (typeof pointB.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
+                tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
               }
             }
 
             if (pointA && pointB) {
-              var d0 = _this24[xAxis](_this24.parseX(pointA.x.value));
+              var d0 = _this33[xAxis](_this33.parseX(pointA.x.value));
 
-              var d1 = _this24[xAxis](_this24.parseX(pointB.x.value));
+              var d1 = _this33[xAxis](_this33.parseX(pointB.x.value));
 
               var mid = Math.abs(d0 - d1) / 2;
 
@@ -3937,7 +4882,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointB.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointB.y.color) {
@@ -3950,7 +4895,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointA.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this24.options.dateFormat || _this24.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this33.options.dateFormat || _this33.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointA.y.color) {
@@ -4005,7 +4950,7 @@ var WebsyChart = /*#__PURE__*/function () {
         }
 
         this.tooltip.setHeight(this.plotHeight);
-        this.tooltip.show(tooltipTitle, tooltipHTML, posOptions); // }
+        this.options.showTooltip && this.tooltip.show(tooltipTitle, tooltipHTML, posOptions); // }
         // else {
         //   xPoint = x0
         // }      
@@ -4055,7 +5000,7 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(options) {
-      var _this25 = this;
+      var _this34 = this;
 
       /* global d3 options */
       if (typeof options !== 'undefined') {
@@ -4124,7 +5069,7 @@ var WebsyChart = /*#__PURE__*/function () {
             var legendData = this.options.data.series.map(function (s, i) {
               return {
                 value: s.label || s.key,
-                color: s.color || _this25.options.colors[i % _this25.options.colors.length]
+                color: s.color || _this34.options.colors[i % _this34.options.colors.length]
               };
             });
 
@@ -4363,7 +5308,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.data.bottom.formatter) {
               bAxisFunc.tickFormat(function (d) {
-                return _this25.options.data.bottom.formatter(d);
+                return _this34.options.data.bottom.formatter(d);
               });
             }
 
@@ -4390,8 +5335,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
           if (this.options.margin.axisLeft > 0) {
             this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-              if (_this25.options.data.left.formatter) {
-                d = _this25.options.data.left.formatter(d);
+              if (_this34.options.data.left.formatter) {
+                d = _this34.options.data.left.formatter(d);
               }
 
               return d;
@@ -4428,8 +5373,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
               this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-                if (_this25.options.data.right.formatter) {
-                  d = _this25.options.data.right.formatter(d);
+                if (_this34.options.data.right.formatter) {
+                  d = _this34.options.data.right.formatter(d);
                 }
 
                 return d;
@@ -4455,16 +5400,16 @@ var WebsyChart = /*#__PURE__*/function () {
 
           this.options.data.series.forEach(function (series, index) {
             if (!series.key) {
-              series.key = _this25.createIdentity();
+              series.key = _this34.createIdentity();
             }
 
             if (!series.color) {
-              series.color = _this25.options.colors[index % _this25.options.colors.length];
+              series.color = _this34.options.colors[index % _this34.options.colors.length];
             }
 
-            _this25["render".concat(series.type || 'bar')](series, index);
+            _this34["render".concat(series.type || 'bar')](series, index);
 
-            _this25.renderLabels(series, index);
+            _this34.renderLabels(series, index);
           });
         }
       }
@@ -4472,17 +5417,17 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderarea",
     value: function renderarea(series, index) {
-      var _this26 = this;
+      var _this35 = this;
 
       /* global d3 series index */
       var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
         return d3.area().x(function (d) {
-          return _this26[xAxis](_this26.parseX(d.x.value));
+          return _this35[xAxis](_this35.parseX(d.x.value));
         }).y0(function (d) {
-          return _this26[yAxis](0);
+          return _this35[yAxis](0);
         }).y1(function (d) {
-          return _this26[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this26.options.curveStyle]);
+          return _this35[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this35.options.curveStyle]);
       };
 
       var xAxis = 'bottomAxis';
@@ -4560,7 +5505,7 @@ var WebsyChart = /*#__PURE__*/function () {
             return 0;
           }
         } else {
-          if (this.options.grouping === 'stacked') {
+          if (this.options.grouping !== 'stacked') {
             return this[xAxis](this.parseX(d.x.value));
           } else {
             return this[xAxis](this.parseX(d.x.value)) + i * barWidth;
@@ -4570,7 +5515,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       function getBarY(d, i) {
         if (this.options.orientation === 'horizontal') {
-          if (this.options.grouping === 'stacked') {
+          if (this.options.grouping !== 'stacked') {
             return this[xAxis](this.parseX(d.x.value));
           } else {
             return this[xAxis](this.parseX(d.x.value)) + (d.y.index || i) * barWidth;
@@ -4655,15 +5600,15 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderline",
     value: function renderline(series, index) {
-      var _this27 = this;
+      var _this36 = this;
 
       /* global series index d3 */
       var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
         return d3.line().x(function (d) {
-          return _this27[xAxis](_this27.parseX(d.x.value));
+          return _this36[xAxis](_this36.parseX(d.x.value));
         }).y(function (d) {
-          return _this27[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this27.options.curveStyle]);
+          return _this36[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this36.options.curveStyle]);
       };
 
       var xAxis = 'bottomAxis';
@@ -4701,14 +5646,14 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "rendersymbol",
     value: function rendersymbol(series, index) {
-      var _this28 = this;
+      var _this37 = this;
 
       /* global d3 series index series.key */
       var drawSymbol = function drawSymbol(size) {
         return d3.symbol() // .type(d => {
         //   return d3.symbols[0]
         // })
-        .size(size || _this28.options.symbolSize);
+        .size(size || _this37.options.symbolSize);
       };
 
       var xAxis = 'bottomAxis';
@@ -4726,7 +5671,7 @@ var WebsyChart = /*#__PURE__*/function () {
       symbols.attr('d', function (d) {
         return drawSymbol(d.y.size || series.symbolSize)(d);
       }).transition(this.transition).attr('fill', 'white').attr('stroke', series.color).attr('transform', function (d) {
-        return "translate(".concat(_this28[xAxis](_this28.parseX(d.x.value)), ", ").concat(_this28[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this37[xAxis](_this37.parseX(d.x.value)), ", ").concat(_this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       }); // Enter
 
       symbols.enter().append('path').attr('d', function (d) {
@@ -4735,7 +5680,7 @@ var WebsyChart = /*#__PURE__*/function () {
       .attr('fill', 'white').attr('stroke', series.color).attr('class', function (d) {
         return "symbol symbol_".concat(series.key);
       }).attr('transform', function (d) {
-        return "translate(".concat(_this28[xAxis](_this28.parseX(d.x.value)), ", ").concat(_this28[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this37[xAxis](_this37.parseX(d.x.value)), ", ").concat(_this37[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       });
     }
   }, {
@@ -4890,7 +5835,7 @@ var WebsyLegend = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize() {
-      var _this29 = this;
+      var _this38 = this;
 
       var el = document.getElementById(this.elementId);
 
@@ -4903,7 +5848,7 @@ var WebsyLegend = /*#__PURE__*/function () {
         // }
         var html = "\n        <div class='text-".concat(this.options.align, "'>\n      ");
         html += this._data.map(function (d, i) {
-          return _this29.getLegendItemHTML(d);
+          return _this38.getLegendItemHTML(d);
         }).join('');
         html += "\n        <div>\n      ";
         el.innerHTML = html;
@@ -5076,7 +6021,7 @@ var WebsyMap = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this30 = this;
+      var _this39 = this;
 
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -5085,7 +6030,7 @@ var WebsyMap = /*#__PURE__*/function () {
         var legendData = this.options.data.polygons.map(function (s, i) {
           return {
             value: s.label || s.key,
-            color: s.color || _this30.options.colors[i % _this30.options.colors.length]
+            color: s.color || _this39.options.colors[i % _this39.options.colors.length]
           };
         });
         var longestValue = legendData.map(function (s) {
@@ -5149,7 +6094,7 @@ var WebsyMap = /*#__PURE__*/function () {
 
       if (this.polygons) {
         this.polygons.forEach(function (p) {
-          return _this30.map.removeLayer(p);
+          return _this39.map.removeLayer(p);
         });
       }
 
@@ -5207,18 +6152,18 @@ var WebsyMap = /*#__PURE__*/function () {
           }
 
           if (!p.options.color) {
-            p.options.color = _this30.options.colors[i % _this30.options.colors.length];
+            p.options.color = _this39.options.colors[i % _this39.options.colors.length];
           }
 
           var pol = L.polygon(p.data.map(function (c) {
             return c.map(function (d) {
               return [d.Latitude, d.Longitude];
             });
-          }), p.options).addTo(_this30.map);
+          }), p.options).addTo(_this39.map);
 
-          _this30.polygons.push(pol);
+          _this39.polygons.push(pol);
 
-          _this30.map.fitBounds(pol.getBounds());
+          _this39.map.fitBounds(pol.getBounds());
         });
       } // if (this.data.markers.length > 0) {            
       //   el.classList.remove('hidden')
@@ -5350,7 +6295,9 @@ var WebsyDesigns = {
   WebsyRouter: WebsyRouter,
   Router: WebsyRouter,
   WebsyTable: WebsyTable,
+  WebsyTable2: WebsyTable2,
   Table: WebsyTable,
+  Table2: WebsyTable2,
   WebsyChart: WebsyChart,
   Chart: WebsyChart,
   WebsyChartTooltip: WebsyChartTooltip,
@@ -5367,6 +6314,7 @@ var WebsyDesigns = {
   Utils: WebsyUtils,
   ButtonGroup: ButtonGroup,
   WebsySwitch: Switch,
+  Pager: Pager,
   Switch: Switch
 };
 WebsyDesigns.service = new WebsyDesigns.APIService('');