@websy/websy-designs 1.2.33 → 1.3.1

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

@@ -375,6 +375,7 @@ class WebsyDatePicker {
     }
   }
   close (confirm, isRange = false) {
+    console.trace()
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
     const el = document.getElementById(this.elementId)
@@ -391,19 +392,19 @@ class WebsyDatePicker {
             for (let i = this.selectedRangeDates[0]; i < this.selectedRangeDates[1] + 1; i++) {
               hoursOut.push(this.options.hours[i])
             }            
-            this.options.onChange(hoursOut, true)        
+            this.options.onChange(hoursOut, true, this.selectedRange)        
           }     
           else {
-            this.options.onChange(this.selectedRangeDates, true)        
+            this.options.onChange(this.selectedRangeDates, true, this.selectedRange)        
           }          
         }
         else {
           if (this.options.mode === 'hour') {
             let hoursOut = this.currentselection.map(h => this.options.hours[h])
-            this.options.onChange(hoursOut, true)        
+            this.options.onChange(hoursOut, true, this.selectedRange)        
           }     
           else {
-            this.options.onChange(this.currentselection, isRange)
+            this.options.onChange(this.currentselection, isRange, this.selectedRange)
           }
         }
       }
@@ -425,7 +426,8 @@ class WebsyDatePicker {
     if (typeof d === 'number') {
       d = new Date(d)
     }
-    return new Date(d.setHours(0, 0, 0, 0))
+    // d.setTime(d.getTime() + d.getTimezoneOffset() * 60000)
+    return new Date(d.setUTCHours(12, 0, 0, 0))
   }
   handleClick (event) {
     if (event.target.classList.contains('websy-date-picker-header')) {
@@ -443,11 +445,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)
@@ -476,7 +474,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
@@ -489,7 +488,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)
       }
     }    
@@ -500,9 +499,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)
         }
       }
     }
@@ -550,6 +550,7 @@ class WebsyDatePicker {
         let rangeEnd
         if (this.options.mode === 'date') {          
           d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
+          d.setUTCHours(12, 0, 0, 0)
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -608,9 +609,11 @@ class WebsyDatePicker {
         else if (this.options.mode === 'hour') {
           dateEl = document.getElementById(`${this.elementId}_${d}_hour`)
         }
-        dateEl.classList.add('selected')
-        dateEl.classList.add('first')
-        dateEl.classList.add('last')
+        if (dateEl) {
+          dateEl.classList.add('selected')
+          dateEl.classList.add('first')
+          dateEl.classList.add('last')
+        }        
       })
     }
   }
@@ -819,7 +822,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>
@@ -832,7 +835,7 @@ class WebsyDatePicker {
         yearList.reverse()
       }
       html += `<div id='${this.elementId}_dateList' class='websy-dp-date-list'><ul>`
-      html += yearList.map(d => `<li id='${this.elementId}_${d.id}_year' class='websy-dp-date websy-dp-year ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.year}</li>`).join('')
+      html += yearList.map(d => `<li id='${this.elementId}_${d.id}_year' data-id='${d.id}' class='websy-dp-date websy-dp-year ${d.disabled === true ? 'websy-disabled-date' : ''}'>${d.year}</li>`).join('')
       html += `</ul></div>`
     }
     else if (this.options.mode === 'monthyear') {
@@ -849,7 +852,7 @@ class WebsyDatePicker {
           }
           html += paddedMonths.join('')
         }
-        html += this.monthYears[year].map(d => `<li id='${this.elementId}_${d.id}_monthyear' data-year='${d.year}' class='websy-dp-date websy-dp-monthyear'>${d.month}</li>`).join('')        
+        html += this.monthYears[year].map(d => `<li id='${this.elementId}_${d.id}_monthyear' data-id='${d.id}' data-year='${d.year}' class='websy-dp-date websy-dp-monthyear'>${d.month}</li>`).join('')        
         html += `</ul>`
       }
       html += `</div>`
@@ -940,17 +943,8 @@ 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) {
-        if (this.selectedRange === 0) {
-          el.classList.remove('range-selected')
-        }
-        else {
-          el.classList.add('range-selected')
-        }
-      }
       this.highlightRange()
       this.updateRange()      
       this.close(confirm, true)
@@ -959,14 +953,16 @@ class WebsyDatePicker {
   selectCustomRange (rangeInput) {
     this.selectedRange = -1
     let isContinuousRange = true
-    if (rangeInput.length === 1) {
-      this.selectedRangeDates = [...rangeInput]
-      this.customRangeSelected = true
-    }
-    else if (rangeInput.length === 2) {      
-      this.selectedRangeDates = [...rangeInput]
-      this.customRangeSelected = true
-    }
+    // if (rangeInput.length === 1) {
+    //   this.selectedRangeDates = [...rangeInput]
+    //   this.customRangeSelected = true
+    // }
+    // else if (rangeInput.length === 2) {      
+    //   this.selectedRangeDates = [...rangeInput]
+    //   this.customRangeSelected = true
+    // }
+    this.selectedRangeDates = [...rangeInput]
+    this.customRangeSelected = true
     rangeInput.forEach((r, i) => {
       if (i > 0) {
         if (this.options.mode === 'date' || this.options.mode === 'monthyear') {          
@@ -1104,6 +1100,15 @@ class WebsyDatePicker {
     if (labelEl) {
       labelEl.innerHTML = range.label      
     }
+    const headerEl = document.getElementById(`${this.elementId}_header`)
+    if (headerEl) {
+      if (this.selectedRange === 0) {
+        headerEl.classList.remove('range-selected')
+      }
+      else {
+        headerEl.classList.add('range-selected')
+      }
+    }
   }
 }
 
@@ -1117,7 +1122,8 @@ class WebsyDragDrop {
     const DEFAULTS = {
       items: [],
       orientation: 'horizontal',
-      dropPlaceholder: 'Drop item here'
+      dropPlaceholder: 'Drop item here',
+      accepts: 'application/wd-item'
     }
     this.busy = false
     this.options = Object.assign({}, DEFAULTS, options)
@@ -1143,9 +1149,7 @@ class WebsyDragDrop {
     else {
       console.error(`No element found with ID ${this.elementId}`)
     }
-    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))
-    console.log('constructor dd')
-    console.trace()
+    GlobalPubSub.subscribe(this.elementId, 'requestForDDItem', this.handleRequestForItem.bind(this))        
     GlobalPubSub.subscribe(this.elementId, 'add', this.addItem.bind(this))
     this.render()
   }
@@ -1178,7 +1182,7 @@ class WebsyDragDrop {
       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}_item' class='websy-dragdrop-item ${(item.classes || []).join(' ')}' draggable='true' data-id='${item.id}'>        
         <div id='${item.id}_itemInner' class='websy-dragdrop-item-inner' data-id='${item.id}'>
     `
     if (item.component) {
@@ -1207,24 +1211,27 @@ class WebsyDragDrop {
   }
   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
+    event.dataTransfer.effectAllowed = 'move'    
+    event.dataTransfer.setData(this.options.accepts, JSON.stringify({el: event.target.id, id: this.elementId, itemId: this.draggedId}))     
+    event.target.classList.add('dragging')
+    // event.target.style.opacity = 0.5
     this.dragging = true
   }
-  handleDragOver (event) {
-    console.log('drag over', event.target.classList)
+  handleDragOver (event) {    
     if (event.preventDefault) {
       event.preventDefault()
     }
+    console.log('drag', event.target.classList)
     if (!event.target.classList.contains('droppable')) {
       return
     }
+    if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+      return
+    }       
     event.target.classList.add('drag-over')
   }
   handleDragLeave (event) {
-    console.log('drag leave', event.target.classList)
+    // console.log('drag leave', event.target.classList)
     if (!event.target.classList.contains('droppable')) {
       return
     }
@@ -1235,15 +1242,18 @@ class WebsyDragDrop {
     // 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'))
+    // console.log('drag drop')
+    // console.log(event.dataTransfer.getData('application/wd-item'))    
+    const data = JSON.parse(event.dataTransfer.getData(this.options.accepts))
     if (event.preventDefault) {
       event.preventDefault()
     }
     if (!event.target.classList.contains('droppable')) {
       return
     }
+    if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+      return
+    }
     let side = event.target.getAttribute('data-side')
     let id = event.target.getAttribute('data-id')
     let index = this.getItemIndex(id)
@@ -1253,7 +1263,7 @@ class WebsyDragDrop {
       index += 1
     }   
     if (draggedIndex === -1) {
-      console.log('requestForDDItem')
+      // console.log('requestForDDItem')
       GlobalPubSub.publish(data.id, 'requestForDDItem', {
         group: this.options.group,
         source: data.id,
@@ -1291,8 +1301,9 @@ class WebsyDragDrop {
     }
   }
   handleDragEnd (event) {    
-    console.log('drag end')
+    // console.log('drag end')
     event.target.style.opacity = 1
+    event.target.classList.remove('dragging')
     this.draggedId = null
     this.dragging = false
     const startEl = document.getElementById(`${this.elementId}start_item`)
@@ -1497,6 +1508,7 @@ class WebsyDropdown {
       if (typeof d.index === 'undefined') {
         d.index = i        
       }
+      d.currentIndex = i
       return d
     })    
     const headerEl = document.getElementById(`${this.elementId}_header`)   
@@ -1504,15 +1516,17 @@ class WebsyDropdown {
       headerEl.classList[`${this.options.allowClear === true ? 'add' : 'remove'}`]('allow-clear')
     }
     const el = document.getElementById(`${this.elementId}_items`)
-    if (el.childElementCount === 0) {
-      this.render()
-    }
-    else {
-      if (this.options.items.length === 0) {
-        this.options.items = [{label: this.options.noItemsText || 'No 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
@@ -1753,6 +1767,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')
@@ -1788,14 +1806,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
@@ -1809,6 +1827,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) {
@@ -1824,10 +1846,10 @@ class WebsyDropdown {
       } 
     }    
     // const item = this.options.items[index]
-    const item = this._originalData[index] || this.options.items[index]
+    const item = dataToUse[index]
     this.updateHeader(item)
     if (item && this.options.onItemSelected) {
-      this.options.onItemSelected(item, this.selectedItems, this._originalData || this.options.items, this.options)
+      this.options.onItemSelected(item, this.selectedItems, dataToUse, this.options)
     }
     if (this.options.closeAfterSelection === true) {
       this.close() 
@@ -2755,9 +2777,9 @@ class WebsyPubSub {
       }
     }
     else {
-      if (this.subscriptions[method]) {
-        this.subscriptions[method].forEach(fn => {
-          fn(data)
+      if (this.subscriptions[id]) {
+        this.subscriptions[id].forEach(fn => {
+          fn(method)
         })
       }
     }
@@ -2772,10 +2794,10 @@ class WebsyPubSub {
       }
     }
     else {
-      if (!this.subscriptions[method]) {
-        this.subscriptions[method] = []
+      if (!this.subscriptions[id]) {
+        this.subscriptions[id] = []
       }
-      this.subscriptions[method].push(fn)
+      this.subscriptions[id].push(method)
     }
   }
 }
@@ -3997,6 +4019,7 @@ const WebsyUtils = {
     let red = 0
     let green = 0
     let blue = 0
+    let alpha = 1
     if (backgroundColor.indexOf('#') !== -1) {
       // hex color
       backgroundColor = backgroundColor.replace('#', '')
@@ -4008,13 +4031,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)) {
@@ -4464,8 +4489,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
@@ -5140,7 +5172,8 @@ class WebsyTable3 {
       showTotalsAbove: true,
       minHandleSize: 20,
       maxColWidth: '50%',
-      allowPivoting: false
+      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 = {}
@@ -5251,9 +5284,29 @@ class WebsyTable3 {
     data.forEach(row => {
       bodyHtml += `<tr class="websy-table-row">`
       row.forEach((cell, cellIndex) => {
+        if (typeof sizingColumns[cellIndex] === 'undefined') {
+          return // need to revisit this logic
+        }
+        let style = ''
+        if (cell.style) {
+          style += cell.style
+        }
+        if (useWidths === true) {
+          style += `max-width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important;`
+        }
+        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}; `
+        }
+        console.log('rowspan', cell.rowspan)
         bodyHtml += `<td 
-          class='websy-table-cell'
-          style='${cell.style}'
+          class='websy-table-cell ${(cell.classes || []).join(' ')}'
+          style='${style}'
           data-info='${cell.value}'
           colspan='${cell.colspan || 1}'
           rowspan='${cell.rowspan || 1}'
@@ -5292,7 +5345,7 @@ class WebsyTable3 {
         return
       }
       headerHtml += `<tr class="websy-table-row  websy-table-header-row">`
-      row.forEach(col => {
+      row.forEach((col, colIndex) => {
         headerHtml += `<td 
           class='websy-table-cell'  
           style='${col.style}'       
@@ -5307,13 +5360,35 @@ class WebsyTable3 {
         // }
         headerHtml += `        
           >
-          ${col.name}
+          <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 ''
@@ -5389,11 +5464,13 @@ class WebsyTable3 {
       }
     })
     this.sizes.totalWidth = this.options.columns[this.options.columns.length - 1].reduce((a, b) => a + (b.width || b.actualWidth), 0)
+    this.sizes.totalNonPinnedWidth = this.options.columns[this.options.columns.length - 1].filter((c, i) => i >= this.pinnedColumns).reduce((a, b) => a + (b.width || b.actualWidth), 0)
     const outerSize = outerEl.getBoundingClientRect()
     if (this.sizes.totalWidth < outerSize.width) {
       this.sizes.totalWidth = 0
+      this.sizes.totalNonPinnedWidth = 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) => {
+      this.options.columns[this.options.columns.length - 1].forEach((c, i) => {        
         if (!c.width) {
           if (c.actualWidth < equalWidth) {
             // adjust the width
@@ -5401,6 +5478,9 @@ class WebsyTable3 {
           }
         }
         this.sizes.totalWidth += c.width || c.actualWidth
+        if (i < this.pinnedColumns) {
+          this.sizes.totalNonPinnedWidth += c.width || c.actualWidth
+        }
         equalWidth = (outerSize.width - this.sizes.totalWidth) / (this.options.columns[this.options.columns.length - 1].length - (i + 1))
       })
     }
@@ -5421,9 +5501,15 @@ class WebsyTable3 {
     if (this.sizes.rowsToRender < this.totalRowCount) {
       this.vScrollRequired = true      
     }
+    else {
+      this.vScrollRequired = false 
+    }
     if (this.sizes.totalWidth > this.sizes.outer.width) {
       this.hScrollRequired = true
     }
+    else {
+      this.hScrollRequired = false
+    }
     this.options.allColumns = this.options.columns.map(c => c)
     console.log('sizes', this.sizes)
     return this.sizes    
@@ -5450,7 +5536,13 @@ class WebsyTable3 {
     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')) {
@@ -5547,20 +5639,26 @@ class WebsyTable3 {
     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
-      if (this.vScrollRequired === true) {
-        let vScrollEl = document.getElementById(`${this.elementId}_vScrollContainer`)
-        let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      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'
-      }   
-      if (this.hScrollRequired === true) {
-        let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
-        let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      }
+      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'
-      }   
+        hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
+      }  
+      else {
+        hHandleEl.style.width = '0px'
+      } 
     }    
   }
   renderColumnHeaders () {
@@ -5589,9 +5687,7 @@ class WebsyTable3 {
     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')
@@ -5610,6 +5706,19 @@ class WebsyTable3 {
     }
   }
   scrollX (diff) {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (!el.classList.contains('scrolling')) {
+      el.classList.add('scrolling')
+    }    
+    if (this.scrollTimeoutFn) {
+      clearTimeout(this.scrollTimeoutFn)
+    }
+    this.scrollTimeoutFn = setTimeout(() => {      
+      el.classList.remove('scrolling')
+    }, 200)    
+    if (this.hScrollRequired === false) {
+      return
+    }
     const scrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
     const scrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)    
     let handlePos
@@ -5623,13 +5732,13 @@ class WebsyTable3 {
     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 actualLeft = (this.sizes.totalNonPinnedWidth - 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++) {            
+      for (let i = this.pinnedColumns; 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, this.sizes.totalWidth, cumulativeWidth, 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            
@@ -5653,6 +5762,19 @@ class WebsyTable3 {
     } 
   }
   scrollY (diff) {
+    const el = document.getElementById(`${this.elementId}_tableContainer`)
+    if (!el.classList.contains('scrolling')) {
+      el.classList.add('scrolling')
+    }    
+    if (this.scrollTimeoutFn) {
+      clearTimeout(this.scrollTimeoutFn)
+    }
+    this.scrollTimeoutFn = setTimeout(() => {      
+      el.classList.remove('scrolling')
+    }, 200)
+    if (this.vScrollRequired === false) {
+      return
+    }
     const scrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
     const scrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)    
     let handlePos
@@ -6604,7 +6726,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   .transition(this.transition)  
-  .attr('fill', d => d.color || series.color)
+  .attr('fill', d => d.y.color || d.color || series.color)
 
 bars
   .enter()
@@ -6614,7 +6736,7 @@ bars
   .attr('x', getBarX.bind(this))  
   .attr('y', getBarY.bind(this))
   // .transition(this.transition)
-  .attr('fill', d => d.color || series.color)
+  .attr('fill', d => d.y.color || d.color || series.color)
   .attr('class', d => {
     return `bar bar_${series.key}`
   })
@@ -6629,7 +6751,7 @@ if (this.options.orientation === 'horizontal') {
   xAxis = 'leftAxis'
   yAxis = 'bottomAxis'
 }
-if (this.options.showLabels) {
+if (this.options.showLabels === true || series.showLabels === true) {
   // need to add logic to handle positioning options
   // e.g. Inside, Outide, Auto (this will also affect the available plot space)
   // We currently only support 'Auto'  
@@ -6643,10 +6765,30 @@ if (this.options.showLabels) {
     .attr('x', getLabelX.bind(this))  
     .attr('y', getLabelY.bind(this))    
     .attr('class', `label_${series.key}`)
-    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
-    .style('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
+    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .transition(this.transition)
     .text(d => d.y.label || d.y.value)
+    .each(function (d, i) {      
+      if (that.options.orientation === 'horizontal') {
+        if (that.options.grouping === 'stacked') {
+          this.setAttribute('text-anchor', 'middle')
+        }
+        else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+          this.setAttribute('text-anchor', 'end')
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+        }    
+        else {        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
+      }
+      else {
+        if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {          
+          this.setAttribute('y', +(this.getAttribute('y')) + 8)
+        }
+      }
+    })
   
   labels
     .enter()
@@ -6656,8 +6798,8 @@ if (this.options.showLabels) {
     .attr('y', getLabelY.bind(this))    
     .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', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color))
+    .attr('fill', d => this.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
+    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)    
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
@@ -6666,8 +6808,12 @@ if (this.options.showLabels) {
         }
         else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
           this.setAttribute('text-anchor', 'end')
-          this.setAttribute('x', +(this.getAttribute('x')) - 8)
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }    
+        else {        
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
       }
       else {
         if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {