@websy/websy-designs 1.2.32 → 1.3.0

package/dist/websy-designs-es6.debug.js

@@ -6,11 +6,13 @@
   WebsyPubSub
   WebsyForm
   WebsyDatePicker
+  WebsyDragDrop
   WebsyDropdown
   WebsyRouter
   WebsyResultList
   WebsyTable
   WebsyTable2
+  WebsyTable3
   WebsyChart
   WebsyChartTooltip
   WebsyLegend
@@ -423,6 +425,7 @@ class WebsyDatePicker {
     if (typeof d === 'number') {
       d = new Date(d)
     }
+    // d.setTime(d.getTime() + d.getTimezoneOffset() * 60000)
     return new Date(d.setHours(0, 0, 0, 0))
   }
   handleClick (event) {
@@ -441,11 +444,7 @@ class WebsyDatePicker {
       this.updateRange(index)
     }
     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)
@@ -474,7 +473,8 @@ class WebsyDatePicker {
   handleMouseDown (event) {    
     if (this.shiftPressed === true && this.currentselection.length > 0) {
       this.mouseDownId = this.currentselection[this.currentselection.length - 1]
-      this.selectDate(+event.target.id.split('_')[1])
+      let dateId = event.target.getAttribute('data-id')
+      this.selectDate(+dateId)
     }
     else {
       this.mouseDown = true
@@ -487,7 +487,7 @@ class WebsyDatePicker {
           this.currentselection = []
           this.customRangeSelected = false 
         }       
-        this.mouseDownId = +event.target.id.split('_')[1]       
+        this.mouseDownId = +event.target.getAttribute('data-id')
         this.selectDate(this.mouseDownId)
       }
     }    
@@ -498,9 +498,10 @@ class WebsyDatePicker {
         if (event.target.classList.contains('websy-disabled-date')) {
           return
         }
-        if (event.target.id.split('_')[1] !== this.mouseDownId) {
+        let dateId = +event.target.getAttribute('data-id')
+        if (dateId !== this.mouseDownId) {
           this.dragging = true
-          this.selectDate(+event.target.id.split('_')[1])
+          this.selectDate(dateId)
         }
       }
     }
@@ -548,6 +549,7 @@ class WebsyDatePicker {
         let rangeEnd
         if (this.options.mode === 'date') {          
           d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
+          d.setHours(0, 0, 0, 0)
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -817,7 +819,7 @@ class WebsyDatePicker {
           }
           html += paddedDays.join('')
         }
-        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
+        html += months[key].map(d => `<li id='${this.elementId}_${d.id}_date' data-id='${d.id}' class='websy-dp-date ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.dayOfMonth}</li>`).join('')
         html += `
             </ul>
           </div>
@@ -938,7 +940,7 @@ class WebsyDatePicker {
   selectRange (index, confirm = true) {
     if (this.options.ranges[this.options.mode][index]) {
       this.selectedRangeDates = [...this.options.ranges[this.options.mode][index].range]
-      this.currentselection = [...this.options.ranges[this.options.mode][index].range]
+      this.currentselection = this.options.ranges[this.options.mode][index].range.map(d => d.getTime())
       this.selectedRange = +index
       const el = document.getElementById(`${this.elementId}_header`)
       if (el) {
@@ -1109,6 +1111,276 @@ Date.prototype.floor = function () {
   return new Date(`${this.getMonth() + 1}/${this.getDate()}/${this.getFullYear()}`)
 }
 
+/* global WebsyDesigns GlobalPubSub */ 
+class WebsyDragDrop {
+  constructor (elementId, options) {
+    const DEFAULTS = {
+      items: [],
+      orientation: 'horizontal',
+      dropPlaceholder: 'Drop item here'
+    }
+    this.busy = false
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.elementId = elementId
+    if (!elementId) {
+      console.log('No element Id provided for Websy DragDrop')		
+      return
+    }
+    const el = document.getElementById(elementId)
+    if (el) {
+      el.innerHTML = `
+        <div id='${this.elementId}_container' class='websy-drag-drop-container ${this.options.orientation}'>
+          <div>
+        </div>
+      `
+      el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('dragstart', this.handleDragStart.bind(this))      
+      el.addEventListener('dragover', this.handleDragOver.bind(this))
+      el.addEventListener('dragleave', this.handleDragLeave.bind(this))
+      el.addEventListener('drop', this.handleDrop.bind(this))
+      window.addEventListener('dragend', this.handleDragEnd.bind(this))
+    }
+    else {
+      console.error(`No element found with ID ${this.elementId}`)
+    }
+    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))        
+    GlobalPubSub.subscribe(this.elementId, 'add', this.addItem.bind(this))
+    this.render()
+  }
+  addItem (data) {
+    if (data.target === this.elementId && this.busy === false) {
+      this.busy = true
+      console.log('adding item to dd')
+      // check that an item with the same id doesn't already exist
+      let index = this.getItemIndex(data.item.id)
+      if (index === -1) {
+        this.options.items.splice(data.index, 0, data.item)
+        const startEl = document.getElementById(`${this.elementId}start_item`)
+        if (startEl) {
+          if (this.options.items.length === 0) {
+            startEl.classList.add('empty')
+          }
+          else {
+            startEl.classList.remove('empty')
+          }
+        }
+        if (this.options.onItemAdded) {
+          this.options.onItemAdded()
+        } 
+      }       
+      this.busy = false
+    }    
+  }
+  createItemHtml (elementId, index, item) {
+    if (!item.id) {
+      item.id = WebsyDesigns.Utils.createIdentity()
+    }
+    let html = `
+      <div id='${item.id}_item' class='websy-dragdrop-item' draggable='true' data-id='${item.id}'>        
+        <div id='${item.id}_itemInner' class='websy-dragdrop-item-inner' data-id='${item.id}'>
+    `
+    if (item.component) {
+      html += `<div id='${item.id}_component'></div>`
+    }
+    else {
+      html += `${item.html || item.label || ''}`
+    }
+    html += `
+        </div>
+        <div id='${item.id}_dropZone' class='websy-drop-zone droppable' data-index='${item.id}' data-side='right' data-id='${item.id}' data-placeholder='${this.options.dropPlaceholder}'></div>    
+      </div>
+    `
+    return html
+  }
+  getItemIndex (id) {
+    for (let i = 0; i < this.options.items.length; i++) {
+      if (this.options.items[i].id === id) {
+        return i
+      }      
+    }
+    return -1
+  }
+  handleClick (event) {
+
+  }
+  handleDragStart (event) {    
+    this.draggedId = event.target.getAttribute('data-id')      
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('application/wd-item', JSON.stringify({el: event.target.id, id: this.elementId, itemId: this.draggedId}))
+    // console.log('drag start', event)
+    event.target.style.opacity = 0.5
+    this.dragging = true
+  }
+  handleDragOver (event) {
+    // console.log('drag over', event.target.classList)
+    if (event.preventDefault) {
+      event.preventDefault()
+    }
+    if (!event.target.classList.contains('droppable')) {
+      return
+    }
+    event.target.classList.add('drag-over')
+  }
+  handleDragLeave (event) {
+    // console.log('drag leave', event.target.classList)
+    if (!event.target.classList.contains('droppable')) {
+      return
+    }
+    event.target.classList.remove('drag-over')
+    // let side = event.target.getAttribute('data-side')
+    // let id = event.target.getAttribute('data-id')    
+    // let droppedItem = this.options.items[id]
+    // this.removeExpandedDrop(side, id, droppedItem)  
+  }
+  handleDrop (event) {
+    // console.log('drag drop')
+    // console.log(event.dataTransfer.getData('application/wd-item'))
+    const data = JSON.parse(event.dataTransfer.getData('application/wd-item'))
+    if (event.preventDefault) {
+      event.preventDefault()
+    }
+    if (!event.target.classList.contains('droppable')) {
+      return
+    }
+    let side = event.target.getAttribute('data-side')
+    let id = event.target.getAttribute('data-id')
+    let index = this.getItemIndex(id)
+    let draggedIndex = this.getItemIndex(data.id)
+    let droppedItem = this.options.items[index]
+    if (side === 'right') {
+      index += 1
+    }   
+    if (draggedIndex === -1) {
+      // console.log('requestForDDItem')
+      GlobalPubSub.publish(data.id, 'requestForDDItem', {
+        group: this.options.group,
+        source: data.id,
+        target: this.elementId,
+        index,
+        id: data.itemId
+      })
+    } 
+    else if (index > draggedIndex) {            
+      // insert and then remove     
+      this.options.items.splice(index, 0, droppedItem)
+      this.options.items.splice(draggedIndex, 1)     
+      if (this.options.onOrderUpdated) {
+        this.options.onOrderUpdated()
+      }              
+    }
+    else {      
+      // remove and then insert
+      this.options.items.splice(draggedIndex, 1)
+      this.options.items.splice(index, 0, droppedItem)
+      if (this.options.onOrderUpdated) {
+        this.options.onOrderUpdated()
+      } 
+    }
+    // this.removeExpandedDrop(side, id, droppedItem)
+    // const draggedEl = document.getElementById(`${this.elementId}_${this.draggedId}_item`)
+    const draggedEl = document.getElementById(data.el)
+    const droppedEl = document.getElementById(`${id}_item`)
+    if (draggedEl) {
+      droppedEl.insertAdjacentElement('afterend', draggedEl) 
+    }    
+    let dragOverEl = droppedEl.querySelector('.drag-over')
+    if (dragOverEl) {
+      dragOverEl.classList.remove('drag-over')
+    }
+  }
+  handleDragEnd (event) {    
+    // console.log('drag end')
+    event.target.style.opacity = 1
+    this.draggedId = null
+    this.dragging = false
+    const startEl = document.getElementById(`${this.elementId}start_item`)
+    if (startEl) {
+      if (this.options.items.length === 0) {
+        startEl.classList.add('empty')
+      }
+      else {
+        startEl.classList.remove('empty')
+      }
+    }
+  }
+  handleRequestForItem (data) {
+    if (data.group === this.options.group) {
+      let index = this.getItemIndex(data.id)
+      if (index !== -1) {
+        let itemToAdd = this.options.items.splice(index, 1)
+        GlobalPubSub.publish(data.target, 'add', {
+          target: data.target,
+          index: data.index,
+          item: itemToAdd[0]
+        })        
+      }
+    }
+  }
+  measureItems () {
+    const el = document.getElementById(`${this.elementId}_container`)
+    this.options.items.forEach(d => {
+
+    })
+  }
+  // removeExpandedDrop (side, id, droppedItem) {
+  //   let dropEl
+  //   const dropImageEl = document.getElementById(`${id}_itemInner`)
+  //   // const placeholderEl = document.getElementById(`${this.elementId}_${id}_dropZonePlaceholder`)
+  //   if (side === 'left') {
+  //     dropEl = document.getElementById(`${this.elementId}_${id}_dropZoneLeft`) 
+  //     dropImageEl.style.left = `0px`
+  //   }
+  //   else if (side === 'right') {
+  //     dropEl = document.getElementById(`${this.elementId}_${id}_dropZoneRight`)      
+  //   }
+  //   else {
+  //     dropEl = document.getElementById(`${this.elementId}_${id}_dropZoneEnd`)  
+  //   }
+  //   if (dropEl) {
+  //     const dropElSize = dropEl.getBoundingClientRect()      
+  //     dropEl.style.width = `${(dropElSize.width / 2)}px`
+  //     dropEl.style.marginLeft = null
+  //     dropEl.style.border = null
+  //   }
+  //   if (placeholderEl) {
+  //     placeholderEl.classList.remove('active')
+  //     placeholderEl.style.left = null
+  //     placeholderEl.style.right = null
+  //     placeholderEl.style.width = null
+  //     placeholderEl.style.height = null
+  //   }
+  // }
+  removeItem (id) {
+
+  }
+  render () {
+    const el = document.getElementById(`${this.elementId}_container`)
+    if (el) {
+      this.measureItems()
+      let html = `
+        <div id='${this.elementId}start_item' class='websy-dragdrop-item ${this.options.items.length === 0 ? 'empty' : ''}' data-id='${this.elementId}start'>
+          <div id='${this.elementId}start_dropZone' class='websy-drop-zone droppable' data-index='start' data-side='start' data-id='${this.elementId}start' data-placeholder='${this.options.dropPlaceholder}'></div>
+        </div>
+      `
+      html += this.options.items.map((d, i) => this.createItemHtml(this.elementId, i, d)).join('')
+      el.innerHTML = html
+      this.options.items.forEach((item, i) => {
+        if (item.component) {          
+          if (item.isQlikPlugin && WebsyDesigns.QlikPlugin[item.component]) {
+            item.instance = new WebsyDesigns.QlikPlugin[item.component](`${item.id}_component`, item.options)
+          }
+          else if (WebsyDesigns[item.component]) {
+            item.instance = new WebsyDesigns[item.component](`${item.id}_component`, item.options)
+          }
+          else {
+            console.error(`Component ${item.component} not found.`)
+          }
+        }
+      })
+    }
+  }
+}
+
 /* global WebsyUtils */ 
 class WebsyDropdown {
   constructor (elementId, options) {
@@ -1223,18 +1495,25 @@ class WebsyDropdown {
       if (typeof d.index === 'undefined') {
         d.index = i        
       }
+      d.currentIndex = i
       return d
-    })       
-    const el = document.getElementById(`${this.elementId}_items`)
-    if (el.childElementCount === 0) {
-      this.render()
+    })    
+    const headerEl = document.getElementById(`${this.elementId}_header`)   
+    if (headerEl) {
+      headerEl.classList[`${this.options.allowClear === true ? 'add' : 'remove'}`]('allow-clear')
     }
-    else {
-      if (this.options.items.length === 0) {
-        this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+    const el = document.getElementById(`${this.elementId}_items`)
+    if (el) {
+      if (el.childElementCount === 0) {
+        this.render()
       }
-      this.renderItems()
-    }    
+      else {
+        if (this.options.items.length === 0) {
+          this.options.items = [{label: this.options.noItemsText || 'No Items'}]
+        }
+        this.renderItems()
+      } 
+    }        
   }
   get data () {
     return this.options.items
@@ -1475,6 +1754,10 @@ class WebsyDropdown {
     const labelEl = document.getElementById(`${this.elementId}_selectedItems`)
     const inputEl = document.getElementById(`${this.elementId}_input`)
     const itemEls = el.querySelectorAll(`.websy-dropdown-item`)
+    let dataToUse = this._originalData
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     for (let i = 0; i < itemEls.length; i++) {
       itemEls[i].classList.remove('active')
       let index = itemEls[i].getAttribute('data-index')
@@ -1510,14 +1793,14 @@ class WebsyDropdown {
       }
       else if (this.selectedItems.length > 1) {
         if (this.options.showCompleteSelectedList === true) {
-          let selectedLabels = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          let selectedLabels = this.selectedItems.map(s => dataToUse[s].label || dataToUse[s].value).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = selectedLabels
           labelEl.setAttribute('data-info', selectedLabels)
           inputEl.value = selectedValues
         }
         else {
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => dataToUse[s].value || dataToUse[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = `${this.selectedItems.length} selected`
           labelEl.setAttribute('data-info', '')
           inputEl.value = selectedValues
@@ -1531,6 +1814,10 @@ class WebsyDropdown {
     }
   }
   updateSelected (index) {
+    let dataToUse = this._originalData && this._originalData.length > 0 ? this._originalData : this.options.items
+    if (this.options.onSearch) {
+      dataToUse = this.options.items
+    }
     if (typeof index !== 'undefined' && index !== null) {
       let pos = this.selectedItems.indexOf(index)      
       if (this.options.multiSelect === false) {
@@ -1545,10 +1832,11 @@ class WebsyDropdown {
         }
       } 
     }    
-    const item = this.options.items[index]
+    // const item = this.options.items[index]
+    const item = dataToUse[index]
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this.options.items, this.options)
+      this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options)
     }
     if (this.options.closeAfterSelection === true) {
       this.close() 
@@ -2469,18 +2757,35 @@ class WebsyPubSub {
     this.elementId = elementId
     this.subscriptions = {}
   }
-  publish (method, data) {
-    if (this.subscriptions[method]) {
-      this.subscriptions[method].forEach(fn => {
-        fn(data)
-      })
+  publish (id, method, data) {
+    if (arguments.length === 3) {    
+      if (this.subscriptions[id] && this.subscriptions[id][method]) {
+        this.subscriptions[id][method](data)
+      }
+    }
+    else {
+      if (this.subscriptions[id]) {
+        this.subscriptions[id].forEach(fn => {
+          fn(method)
+        })
+      }
     }
   }
-  subscribe (method, fn) {
-    if (!this.subscriptions[method]) {
-      this.subscriptions[method] = []
+  subscribe (id, method, fn) {
+    if (arguments.length === 3) {      
+      if (!this.subscriptions[id]) {
+        this.subscriptions[id] = {}
+      }
+      if (!this.subscriptions[id][method]) {
+        this.subscriptions[id][method] = fn
+      }
+    }
+    else {
+      if (!this.subscriptions[id]) {
+        this.subscriptions[id] = []
+      }
+      this.subscriptions[id].push(method)
     }
-    this.subscriptions[method].push(fn)
   }
 }
 
@@ -3701,6 +4006,7 @@ const WebsyUtils = {
     let red = 0
     let green = 0
     let blue = 0
+    let alpha = 1
     if (backgroundColor.indexOf('#') !== -1) {
       // hex color
       backgroundColor = backgroundColor.replace('#', '')
@@ -3712,13 +4018,15 @@ const WebsyUtils = {
     }
     else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
       // rgb color
-      colorParts = backgroundColor.replace(/rgb\(/gi, '').replace(/\)/gi, '')
+      colorParts = backgroundColor.replace(/rgba\(/gi, '').replace(/\)/gi, '')
+      colorParts = colorParts.replace(/rgb\(/gi, '')
       colorParts = colorParts.split(',')
       red = colorParts[0]
       green = colorParts[1]
       blue = colorParts[2]
+      alpha = colorParts[3] || 1
     }
-    return (red * 0.299 + green * 0.587 + blue * 0.114) > 186 ? darkColor : lightColor
+    return ((red * 0.299 + green * 0.587 + blue * 0.114) / alpha) > 186 ? darkColor : lightColor
   },
   measureText (text, rotation = 0, fontSize = '12px') {
     if (!isNaN(fontSize)) {
@@ -4168,8 +4476,15 @@ class WebsyTable {
     }
     let headHTML = '<tr>' + this.options.columns.map((c, i) => {
       if (c.show !== false) {
+        let style = ''             
+        if (c.style) {
+          style += c.style
+        }        
+        if (c.width) {
+          style += `width: ${(c.width || 'auto')};`
+        }   
         return `
-        <th ${c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : ''}>
+        <th style="${style}">
           <div class ="tableHeader">
             <div class="leftSection">
               <div
@@ -4583,7 +4898,12 @@ class WebsyTable2 {
     }
   }
   hideLoading () {
-    this.loadingDialog.hide()
+    if (this.options.onLoading) {
+      this.options.onLoading(false)
+    }
+    else {
+      this.loadingDialog.hide()
+    }
   }
   internalSort (column, colIndex) {
     this.options.columns.forEach((c, i) => {
@@ -4658,7 +4978,8 @@ class WebsyTable2 {
                 class="tableHeaderField ${['asc', 'desc'].indexOf(c.sort) !== -1 ? 'sortable-column' : ''}"
                 data-sort-index="${c.sortIndex || i}"
                 data-index="${i}"
-                data-sort="${c.sort}"                
+                data-sort="${c.sort}"
+                style="${c.style || ''}"                
               >
                 ${c.name}
               </div>
@@ -4760,7 +5081,12 @@ class WebsyTable2 {
     }
   }
   showLoading (options) {
-    this.loadingDialog.show(options)
+    if (this.options.onLoading) {
+      this.options.onLoading(true)
+    }
+    else {
+      this.loadingDialog.show(options)
+    }
   }
   getColumnParameters (values) {
     const tableEl = document.getElementById(`${this.elementId}_table`)
@@ -4824,6 +5150,603 @@ class WebsyTable2 {
   }
 }
 
+/* global WebsyDesigns */ 
+class WebsyTable3 {
+  constructor (elementId, options) {
+    this.elementId = elementId
+    const DEFAULTS = {
+      virtualScroll: false,
+      showTotalsAbove: true,
+      minHandleSize: 20,
+      maxColWidth: '50%',
+      allowPivoting: false,
+      searchIcon: `<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>`
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.sizes = {}
+    this.scrollDragging = false
+    this.cellDragging = false
+    this.vScrollRequired = false
+    this.hScrollRequired = false
+    this.pinnedColumns = 0
+    this.startRow = 0
+    this.endRow = 0
+    this.startCol = 0
+    this.endCol = 0    
+    this.mouseYStart = 0    
+    this.mouseYStart = 0
+    if (!elementId) {
+      console.log('No element Id provided for Websy Table')		
+      return
+    }
+    const el = document.getElementById(this.elementId)    
+    if (el) {
+      let html = `
+        <div id='${this.elementId}_tableContainer' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''}'>
+          <!--<div class="download-button">
+            <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>
+          </div>-->
+          <div id="${this.elementId}_tableInner" class="websy-table-inner-container">
+            <table id="${this.elementId}_tableHeader" class="websy-table-header"></table>
+            <table id="${this.elementId}_tableBody" class="websy-table-body"></table>
+            <table id="${this.elementId}_tableFooter" class="websy-table-footer"></table>
+            <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container">
+              <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
+            </div>
+            <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container">
+              <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
+            </div>
+          </div>     
+          <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
+            <div>
+              <div id="${this.elementId}_errorTitle"></div>
+              <div id="${this.elementId}_errorMessage"></div>
+            </div>            
+          </div>
+          <div id="${this.elementId}_dropdownContainer"></div>
+          <div id="${this.elementId}_loadingContainer"></div>
+        </div>
+      `      
+      if (this.options.paging === 'pages') {
+        html += `
+          <div class="websy-table-paging-container">
+            Show <div id="${this.elementId}_pageSizeSelector" class="websy-vis-page-selector"></div> rows
+            <ul id="${this.elementId}_pageList" class="websy-vis-page-list"></ul>
+          </div>
+        `
+      }
+      el.innerHTML = html
+      el.addEventListener('click', this.handleClick.bind(this))
+      el.addEventListener('mousedown', this.handleMouseDown.bind(this))
+      window.addEventListener('mousemove', this.handleMouseMove.bind(this))
+      window.addEventListener('mouseup', this.handleMouseUp.bind(this))
+      let scrollEl = document.getElementById(`${this.elementId}_tableBody`)
+      if (scrollEl) {
+        scrollEl.addEventListener('wheel', this.handleScrollWheel.bind(this))
+      }
+      this.loadingDialog = new WebsyDesigns.LoadingDialog(`${this.elementId}_loadingContainer`)
+      this.render(this.options.data)
+    }
+    else {
+      console.error(`No element found with ID ${this.elementId}`)
+    }
+  }
+  set columns (columns) {
+    this.options.columns = columns
+    this.renderColumnHeaders()
+  }
+  set totals (totals) {
+    this.options.totals = totals
+    this.renderTotals()
+  }
+  appendRows (data) {
+    this.hideError()
+    let bodyEl = document.getElementById(`${this.elementId}_tableBody`)    
+    if (bodyEl) {
+      if (this.options.virtualScroll === true) {
+        bodyEl.innerHTML = this.buildBodyHtml(data, true)
+      }      
+      else {
+        bodyEl.innerHTML += this.buildBodyHtml(data, true)
+      }
+    }
+    // this.data = this.data.concat(data)
+    // this.rowCount = this.data.length   
+  }
+  buildBodyHtml (data = [], useWidths = false) {
+    if (data.length === 0) {
+      return ''
+    }
+    let bodyHtml = ``
+    let sizingColumns = this.options.columns[this.options.columns.length - 1]
+    if (useWidths === true) {
+      bodyHtml += '<colgroup>'
+      bodyHtml += sizingColumns.map(c => `
+        <col
+          style='width: ${c.width || c.actualWidth}px!important'
+        ></col>
+      `).join('')
+      bodyHtml += '</colgroup>'
+    }
+    data.forEach(row => {
+      bodyHtml += `<tr class="websy-table-row">`
+      row.forEach((cell, cellIndex) => {
+        let style = ''
+        if (cell.style) {
+          style += cell.style
+        }
+        if (cell.backgroundColor) {
+          style += `background-color: ${cell.backgroundColor}; `
+          if (!cell.color) {
+            style += `color: ${WebsyDesigns.Utils.getLightDark(cell.backgroundColor)}; `  
+          }
+        }
+        if (cell.color) {
+          style += `color: ${cell.color}; `
+        }
+        bodyHtml += `<td 
+          class='websy-table-cell'
+          style='${style}'
+          data-info='${cell.value}'
+          colspan='${cell.colspan || 1}'
+          rowspan='${cell.rowspan || 1}'
+        `
+        // if (useWidths === true) {
+        //   bodyHtml += `
+        //     style='width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important'
+        //     width='${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}'
+        //   `
+        // }
+        bodyHtml += `
+        >
+          ${cell.value}
+        </td>`
+      })
+      bodyHtml += `</tr>`
+    })    
+    // bodyHtml += `</div>`    
+    return bodyHtml
+  }
+  buildHeaderHtml (useWidths = false) {
+    let headerHtml = ''
+    let sizingColumns = this.options.columns[this.options.columns.length - 1]
+    if (useWidths === true) {
+      headerHtml += '<colgroup>'
+      headerHtml += sizingColumns.map(c => `
+        <col
+          style='width: ${c.width || c.actualWidth}px!important'
+        ></col>
+      `).join('')
+      headerHtml += '</colgroup>'
+    }
+    this.options.columns.forEach((row, rowIndex) => {
+      if (useWidths === false && rowIndex !== this.options.columns.length - 1) {
+        // if we're calculating the size we only want to render the last row of column headers
+        return
+      }
+      headerHtml += `<tr class="websy-table-row  websy-table-header-row">`
+      row.forEach((col, colIndex) => {
+        headerHtml += `<td 
+          class='websy-table-cell'  
+          style='${col.style}'       
+          colspan='${col.colspan || 1}'
+          rowspan='${col.rowspan || 1}'
+        `
+        // if (useWidths === true && rowIndex === this.options.columns.length - 1) {
+        //   headerHtml += `
+        //     style='width: ${col.width || col.actualWidth}px'
+        //     width='${col.width || col.actualWidth}'
+        //   `
+        // }
+        headerHtml += `        
+          >
+          <div>
+            ${col.name}
+            ${col.searchable === true ? this.buildSearchIcon(col, colIndex) : ''}
+          </div>
+        </td>`
+      })
+      headerHtml += `</tr>`
+    })
+    const dropdownEl = document.getElementById(`${this.elementId}_dropdownContainer`)          
+    this.options.columns[this.options.columns.length - 1].forEach((c, i) => {
+      if (c.searchable && c.isExternalSearch === true) {      
+        const testEl = document.getElementById(`${this.elementId}_columnSearch_${c.dimId || i}`)
+        if (!testEl) {
+          const newE = document.createElement('div')
+          newE.id = `${this.elementId}_columnSearch_${c.dimId || i}`
+          newE.className = 'websy-modal-dropdown'
+          dropdownEl.appendChild(newE)
+        }
+      }
+    })      
+    return headerHtml
+  }
+  buildSearchIcon (col, index) {
+    return `
+      <div class="websy-table-search-icon" data-col-id="${col.dimId}" data-col-index="${index}">
+        <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>
+      </div>
+    `
+  } 
+  buildTotalHtml (useWidths = false) {
+    if (!this.options.totals) {
+      return ''
+    }
+    let totalHtml = `<tr class="websy-table-row  websy-table-total-row">`
+    this.options.totals.forEach((col, colIndex) => {
+      totalHtml += `<td 
+        class='websy-table-cell'
+        colspan='${col.colspan || 1}'
+        rowspan='${col.rowspan || 1}'
+      `
+      if (useWidths === true) {
+        totalHtml += `
+          style='width: ${this.options.columns[this.options.columns.length - 1][colIndex].width || this.options.columns[this.options.columns.length - 1][colIndex].actualWidth}px'
+          width='${col.width || col.actualWidth}'
+        `
+      }
+      totalHtml += `        
+        >
+        ${col.value}
+      </td>`
+    })
+    totalHtml += `</tr>`
+    return totalHtml
+  }
+  calculateSizes (sample = [], totalRowCount, totalColumnCount, pinnedColumns) {
+    this.totalRowCount = totalRowCount // probably need some error handling here if no value is passed in
+    this.totalColumnCount = totalColumnCount // probably need some error handling here if no value is passed in
+    this.pinnedColumns = pinnedColumns // probably need some error handling here if no value is passed in    
+    let outerEl = document.getElementById(this.elementId)
+    let tableEl = document.getElementById(`${this.elementId}_tableContainer`)
+    let headEl = document.getElementById(`${this.elementId}_tableHeader`)
+    headEl.style.width = 'auto'
+    headEl.innerHTML = this.buildHeaderHtml()        
+    this.sizes.outer = outerEl.getBoundingClientRect()
+    this.sizes.table = tableEl.getBoundingClientRect()
+    this.sizes.header = headEl.getBoundingClientRect()
+    let maxWidth
+    if (typeof this.options.maxColWidth === 'number') {
+      maxWidth = this.options.maxColWidth
+    }
+    else if (this.options.maxColWidth.indexOf('%') !== -1) {
+      maxWidth = this.sizes.outer.width * (+(this.options.maxColWidth.replace('%', '')) / 100)
+    }
+    else if (this.options.maxColWidth.indexOf('px') !== -1) {
+      maxWidth = +this.options.maxColWidth.replace('px', '')
+    }
+    let bodyEl = document.getElementById(`${this.elementId}_tableBody`)
+    bodyEl.style.width = 'auto'
+    bodyEl.innerHTML = this.buildBodyHtml([sample])
+    let footerEl = document.getElementById(`${this.elementId}_tableFooter`)
+    footerEl.innerHTML = this.buildTotalHtml()
+    this.sizes.total = footerEl.getBoundingClientRect()
+    const rows = Array.from(tableEl.querySelectorAll('.websy-table-row'))    
+    let totalWidth = 0
+    this.sizes.scrollableWidth = this.sizes.outer.width
+    rows.forEach((row, rowIndex) => {
+      Array.from(row.children).forEach((col, colIndex) => {
+        let colSize = col.getBoundingClientRect()
+        this.sizes.cellHeight = colSize.height        
+        if (this.options.columns[this.options.columns.length - 1][colIndex]) {
+          if (!this.options.columns[this.options.columns.length - 1][colIndex].actualWidth) {
+            this.options.columns[this.options.columns.length - 1][colIndex].actualWidth = 0
+          }
+          this.options.columns[this.options.columns.length - 1][colIndex].actualWidth = Math.min(Math.max(this.options.columns[this.options.columns.length - 1][colIndex].actualWidth, colSize.width), maxWidth)          
+          this.options.columns[this.options.columns.length - 1][colIndex].cellHeight = colSize.height          
+        }        
+      })      
+    })
+    this.options.columns[this.options.columns.length - 1].forEach((col, colIndex) => {
+      if (colIndex < this.pinnedColumns) {
+        this.sizes.scrollableWidth -= col.actualWidth
+      }
+    })
+    this.sizes.totalWidth = this.options.columns[this.options.columns.length - 1].reduce((a, b) => a + (b.width || b.actualWidth), 0)
+    const outerSize = outerEl.getBoundingClientRect()
+    if (this.sizes.totalWidth < outerSize.width) {
+      this.sizes.totalWidth = 0
+      let equalWidth = outerSize.width / this.options.columns[this.options.columns.length - 1].length
+      this.options.columns[this.options.columns.length - 1].forEach((c, i) => {
+        if (!c.width) {
+          if (c.actualWidth < equalWidth) {
+            // adjust the width
+            c.actualWidth = equalWidth
+          }
+        }
+        this.sizes.totalWidth += c.width || c.actualWidth
+        equalWidth = (outerSize.width - this.sizes.totalWidth) / (this.options.columns[this.options.columns.length - 1].length - (i + 1))
+      })
+    }
+    // take the height of the last cell as the official height for data cells
+    // this.sizes.dataCellHeight = this.options.columns[this.options.columns.length - 1].cellHeight
+    headEl.innerHTML = ''
+    bodyEl.innerHTML = ''
+    footerEl.innerHTML = ''
+    headEl.style.width = 'initial'
+    bodyEl.style.width = 'initial'
+    this.sizes.bodyHeight = this.sizes.table.height - (this.sizes.header.height + this.sizes.total.height)
+    this.sizes.rowsToRender = Math.ceil(this.sizes.bodyHeight / this.sizes.cellHeight)
+    this.sizes.rowsToRenderPrecise = this.sizes.bodyHeight / this.sizes.cellHeight
+    this.startRow = 0
+    this.endRow = this.sizes.rowsToRender
+    this.startCol = 0
+    this.endCol = this.options.columns[this.options.columns.length - 1].length
+    if (this.sizes.rowsToRender < this.totalRowCount) {
+      this.vScrollRequired = true      
+    }
+    if (this.sizes.totalWidth > this.sizes.outer.width) {
+      this.hScrollRequired = true
+    }
+    this.options.allColumns = this.options.columns.map(c => c)
+    console.log('sizes', this.sizes)
+    return this.sizes    
+  }
+  createSample (data) {
+    let output = []
+    this.options.columns[this.options.columns.length - 1].forEach((col, colIndex) => {
+      if (col.maxLength) {
+        output.push({value: new Array(col.maxLength).fill('W').join('')})
+      }
+      else if (data) {
+        let longest = ''
+        for (let i = 0; i < Math.min(data.length, 1000); i++) {          
+          if (longest.length < data[i][colIndex].value.length) {
+            longest = data[i][colIndex].value
+          }
+        }
+        output.push({value: longest})
+      }
+      else {
+        output.push({value: ''})
+      }
+    })
+    return output
+  }
+  handleClick (event) {
+    if (event.target.classList.contains('websy-table-search-icon')) {     
+      console.log('clicked on search icon')
+      const colIndex = +event.target.getAttribute('data-col-index')      
+      if (this.options.columns[this.options.columns.length - 1][colIndex].onSearch) {
+        this.options.columns[this.options.columns.length - 1][colIndex].onSearch(event, this.options.columns[this.options.columns.length - 1][colIndex])
+      } 
+    }
+  }
+  handleMouseDown (event) {
+    if (event.target.classList.contains('websy-scroll-handle-y')) {
+      // set up the scroll start values
+      this.scrollDragging = true
+      this.scrollDirection = 'y'
+      const scrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      this.handleYStart = scrollHandleEl.offsetTop
+      this.mouseYStart = event.pageY
+      console.log('mouse down', this.handleYStart, this.mouseYStart)
+      console.log(scrollHandleEl.offsetTop)
+    }
+    else if (event.target.classList.contains('websy-scroll-handle-x')) {
+      this.scrollDragging = true
+      this.scrollDirection = 'x'
+      const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      this.handleXStart = scrollHandleEl.offsetLeft
+      this.mouseXStart = event.pageX
+    }
+  }
+  handleMouseMove (event) {
+    // event.preventDefault()
+    if (this.scrollDragging === true) {
+      if (this.scrollDirection === 'y') {        
+        const diff = event.pageY - this.mouseYStart
+        this.scrollY(diff)
+      }
+      else if (this.scrollDirection === 'x') {
+        const diff = event.pageX - this.mouseXStart
+        this.scrollX(diff)
+      }
+    }
+  }
+  handleMouseUp (event) {
+    this.scrollDragging = false
+    this.cellDragging = false
+    this.handleYStart = null
+    this.mouseYStart = null
+    this.handleXStart = null
+    this.mouseXStart = null
+  }
+  handleScrollWheel (event) {
+    event.preventDefault()
+    console.log('scrollwheel', event)
+    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+      this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
+    }
+    else {
+      this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
+    }
+  }
+  hideError () {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (el) {
+      el.classList.remove('has-error')
+    }
+    const tableEl = document.getElementById(`${this.elementId}_tableInner`)
+    tableEl.classList.remove('hidden')
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.remove('active')
+    }
+  }
+  hideLoading () {
+    this.loadingDialog.hide()
+  }
+  render (data, calcSizes = true) {
+    if (!this.options.columns) {
+      console.log(`No columns provided for table with ID ${this.elementId}`)
+      return
+    }
+    if (this.options.columns.length === 0) {
+      console.log(`No columns provided for table with ID ${this.elementId}`)
+      return
+    }
+    // this.data = []
+    // Adjust the sizing of the header/body/footer
+    if (calcSizes === true) {
+      const sample = this.createSample(data)
+      this.calculateSizes(sample, data.length, (data[0] || []).length, 0)   
+    }    
+    console.log(this.options.columns)
+    const tableInnerEl = document.getElementById(`${this.elementId}_tableInner`)
+    if (tableInnerEl) {
+      tableInnerEl.style.width = `${this.sizes.totalWidth}px`
+    }
+    this.renderColumnHeaders()
+    this.renderTotals()
+    if (data) {      
+      this.appendRows(data)
+    }
+    let bodyEl = document.getElementById(`${this.elementId}_tableBody`)
+    // bodyEl.innerHTML = this.buildBodyHtml(data, true)
+    bodyEl.style.height = `calc(100% - ${this.sizes.header.height}px - ${this.sizes.total.height}px)`
+    if (this.options.virtualScroll === true) {
+      // set the scroll element positions
+      let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+      let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      if (this.vScrollRequired === true) {        
+        vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
+        vScrollEl.style.height = `${this.sizes.bodyHeight}px` 
+        vHandleEl.style.height = Math.max(this.options.minHandleSize, this.sizes.bodyHeight * (this.sizes.rowsToRenderPrecise / this.totalRowCount)) + 'px'
+      }
+      else {
+        vHandleEl.style.height = '0px'
+      } 
+      let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+      let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      if (this.hScrollRequired === true) {        
+        hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
+        hScrollEl.style.width = `${this.sizes.scrollableWidth - 20}px` 
+        hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalWidth)) + 'px'
+      }  
+      else {
+        hHandleEl.style.height = '0px'
+      } 
+    }    
+  }
+  renderColumnHeaders () {
+    let headEl = document.getElementById(`${this.elementId}_tableHeader`)    
+    if (headEl) {
+      headEl.innerHTML = this.buildHeaderHtml(true)
+    }
+  }
+  renderTotals () {
+    let headEl = document.getElementById(`${this.elementId}_tableHeader`)    
+    let totalHtml = this.buildTotalHtml(true)
+    if (this.options.showTotalsAbove === true) {
+      headEl.innerHTML += totalHtml
+    }
+    else {
+      const footerEl = document.getElementById(`${this.elementId}_tableFooter`)
+      if (footerEl) {
+        footerEl.innerHTML = totalHtml
+      }
+    }
+  }
+  resize () {
+
+  }
+  showError (options) {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (el) {
+      el.classList.add('has-error')
+    }
+    const tableEl = document.getElementById(`${this.elementId}_tableInner`)
+    tableEl.classList.add('hidden')
+    const containerEl = document.getElementById(`${this.elementId}_errorContainer`)
+    if (containerEl) {
+      containerEl.classList.add('active')
+    }
+    if (options.title) {
+      const titleEl = document.getElementById(`${this.elementId}_errorTitle`)
+      if (titleEl) {
+        titleEl.innerHTML = options.title
+      } 
+    }
+    if (options.message) {
+      const messageEl = document.getElementById(`${this.elementId}_errorMessage`)
+      if (messageEl) {
+        messageEl.innerHTML = options.message
+      } 
+    }
+  }
+  scrollX (diff) {
+    const scrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+    const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)    
+    let handlePos
+    if (typeof this.handleXStart !== 'undefined' && this.handleXStart !== null) {
+      handlePos = this.handleXStart + diff 
+    }
+    else {
+      handlePos = scrollHandleEl.offsetLeft + diff
+    }   
+    const scrollableSpace = scrollContainerEl.getBoundingClientRect().width - scrollHandleEl.getBoundingClientRect().width
+    console.log('dragging x', diff, scrollContainerEl.getBoundingClientRect().width - scrollHandleEl.getBoundingClientRect().width)
+    scrollHandleEl.style.left = Math.min(scrollableSpace, Math.max(0, handlePos)) + 'px'
+    if (this.options.onScroll) {
+      let actualLeft = (this.sizes.totalWidth - this.sizes.scrollableWidth) * (Math.min(scrollableSpace, Math.max(0, handlePos)) / scrollableSpace)
+      let cumulativeWidth = 0
+      this.startCol = 0
+      this.endCol = 0
+      for (let i = 0; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {            
+        cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth      
+        console.log('actualLeft', actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth)
+        if (actualLeft < cumulativeWidth) {
+          this.startCol = i  
+          break            
+        }             
+      } 
+      cumulativeWidth = 0                
+      for (let i = this.startCol; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {
+        cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth
+        if (cumulativeWidth < this.sizes.scrollableWidth) {              
+          this.endCol = i
+        }            
+      }
+      if (this.endCol < this.options.allColumns[this.options.allColumns.length - 1].length - 1) {
+        this.endCol += 1 
+      }          
+      if (this.endCol === this.options.allColumns[this.options.allColumns.length - 1].length - 1 && cumulativeWidth > this.sizes.totalWidth) {
+        this.startCol += 1
+      } 
+      this.endCol = Math.max(this.startCol, this.endCol)         
+      this.options.onScroll('y', this.startRow, this.endRow, this.startCol, this.endCol)
+    } 
+  }
+  scrollY (diff) {
+    const scrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+    const scrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)    
+    let handlePos
+    if (typeof this.handleYStart !== 'undefined' && this.handleYStart !== null) {
+      handlePos = this.handleYStart + diff 
+    }
+    else {
+      console.log('appending not resetting')
+      handlePos = scrollHandleEl.offsetTop + diff
+    }    
+    const scrollableSpace = scrollContainerEl.getBoundingClientRect().height - scrollHandleEl.getBoundingClientRect().height
+    console.log('dragging y', (diff), scrollContainerEl.getBoundingClientRect().height - scrollHandleEl.getBoundingClientRect().height)
+    scrollHandleEl.style.top = Math.min(scrollableSpace, Math.max(0, handlePos)) + 'px'
+    if (this.options.onScroll) {
+      this.startRow = Math.min(this.totalRowCount - this.sizes.rowsToRender, Math.max(0, Math.round((this.totalRowCount - this.sizes.rowsToRender) * (handlePos / scrollableSpace))))
+      this.endRow = this.startRow + this.sizes.rowsToRender
+      if (this.endRow === this.totalRowCount) {
+        this.startRow += 1
+      }
+      this.options.onScroll('y', this.startRow, this.endRow, this.startCol, this.endCol)
+    }
+  }
+  showLoading (options) {
+    this.loadingDialog.show(options)
+  }
+}
+
 /* global d3 include WebsyDesigns */ 
 class WebsyChart {
   constructor (elementId, options) {
@@ -5748,7 +6671,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   .transition(this.transition)  
-  .attr('fill', series.color)
+  .attr('fill', d => d.color || series.color)
 
 bars
   .enter()
@@ -5758,7 +6681,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   // .transition(this.transition)
-  .attr('fill', series.color)
+  .attr('fill', d => d.color || series.color)
   .attr('class', d => {
     return `bar bar_${series.key}`
   })
@@ -5788,7 +6711,7 @@ if (this.options.showLabels) {
     .attr('y', getLabelY.bind(this))    
     .attr('class', `label_${series.key}`)
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
-    .style('fill', this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(series.color))
+    .style('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
     .transition(this.transition)
     .text(d => d.y.label || d.y.value)
   
@@ -5801,7 +6724,7 @@ if (this.options.showLabels) {
     .attr('alignment-baseline', 'central')
     .attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle')
     .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
-    .style('fill', this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(series.color))
+    .style('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
@@ -6495,6 +7418,8 @@ const WebsyDesigns = {
   Form: WebsyForm,
   WebsyDatePicker,
   DatePicker: WebsyDatePicker,
+  WebsyDragDrop,
+  DragDrop: WebsyDragDrop,
   WebsyDropdown,
   Dropdown: WebsyDropdown,
   WebsyResultList,
@@ -6507,8 +7432,10 @@ const WebsyDesigns = {
   Router: WebsyRouter,
   WebsyTable,
   WebsyTable2,
+  WebsyTable3,
   Table: WebsyTable,
   Table2: WebsyTable2,
+  Table3: WebsyTable3,
   WebsyChart,
   Chart: WebsyChart,
   WebsyChartTooltip,
@@ -6535,5 +7462,6 @@ const WebsyDesigns = {
 }
 
 WebsyDesigns.service = new WebsyDesigns.APIService('')
+window.GlobalPubSub = new WebsyPubSub('empty', {})
 
 export default WebsyDesigns