@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/VirtualTable.vue

@@ -2,86 +2,198 @@
 	<div :class="$style.comp">
 
 		<div :class="$style.header" v-if="visibleColumns.length > 0">
-			<table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
-				<thead>
-				<tr>
-					<th v-for="column in visibleColumns" :style="thStyle(column)" :class="thClass(column)"
-              v-tooltip="column.tooltip">
-						<slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
-						<div v-else :class="headerColumnClass(column)">
-							<span>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
-						</div>
-						<div :class="$style.separator" @mousedown="startResize($event, column)"></div>
-					</th>
-					<th :class="$style.spacer"></th>
-				</tr>
-				</thead>
-			</table>
-		</div>
-
-		<div ref="cont">
-			<div v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
-				<svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-			</div>
-			<div ref="scroller" v-else-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
-				<div :class="$style.spacer" ref="spacer" :style="spacerStyle">
-					<table :class="$style.table">
-						<thead>
-						<tr>
-							<th v-for="column in visibleColumns" :style="thStyle(column)"></th>
-							<th :class="$style.spacer"></th>
-						</tr>
-						</thead>
-						<tbody ref="tbody">
-              <tr v-for="(item, index) in visibleItems" :key="item"
-                  @click="select(item, index)"
-                  :class="trClass(item, index)">
-                <td v-for="(column, columnIndex) in visibleColumns"
-                    :class="tdClass(item, column)"
-                    @click="$emit('item-click', item, column)">
-
-                  <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
-                  <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
-
-                  <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                  <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                  <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
-
-                </td>
-                <td :class="$style.spacer"></td>
-              </tr>
-						</tbody>
-					</table>
-					<div v-if="state === 2" ref="spinner" class="h-[44px] relative">
-						<div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
-							<svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-						</div>
-					</div>
-          <slot name="end"></slot>
-				</div>
-			</div>
-			<div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
-				<h5 class="text-text-300">No active column</h5>
-			</div>
-			<div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
-				<h5 class="text-text-300">No data available</h5>
-			</div>
-
-			<div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
-				<table :class="$style.table">
-					<tbody>
+      <table :class="$style.table">
+        <thead>
+          <tr>
+            <th v-for="column in freezeLeftColumns"
+                :ref="`column${column.key}`"
+                :style="thStyle(column)"
+                :class="`${$style.freezed} ${thClass(column)}`"
+                v-tooltip="column.tooltip">
+              <div :class="headerColumnClass(column)"
+                   @click="$refs.columnMenu.open($refs[`column${column.key}`][0], { key:column.key, freeze:column.freeze })">
+                <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+                <span v-else>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+              </div>
+              <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
+            </th>
+            <th :class="$style.spacer"></th>
+          </tr>
+        </thead>
+      </table>
+      <div class="overflow-hidden">
+        <table :class="$style.table" ref="tableHead" :style="tableHeadStyle">
+          <thead>
             <tr>
-              <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
-                <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
-                <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
-                <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
-              </td>
-              <td :class="$style.spacer"></td>
+              <th v-for="column in unfreezedColumns"
+                  :ref="`column${column.key}`"
+                  :style="thStyle(column)"
+                  :class="thClass(column)"
+                  v-tooltip="column.tooltip">
+                <div :class="headerColumnClass(column)"
+                     @click="$refs.columnMenu.open($refs[`column${column.key}`][0], { key:column.key, freeze:column.freeze })">
+                  <slot v-if="$slots['col-' + column.key]" :name="'col-' + column.key" :column="column"></slot>
+                  <span v-else>{{ column.label2 ? column.label2 : (column.label ?? column.key) }}</span>
+                </div>
+                <div :class="$style.separator" @mousedown="startResize($event, column)"></div>
+              </th>
+              <th :class="$style.spacer"></th>
             </tr>
-					</tbody>
-				</table>
-			</div>
+          </thead>
+        </table>
+      </div>
+
+      <ContextMenu ref="columnMenu" position="bottom-left" class="mt-2 rounded-md min-w-[240px] max-w-[240px]">
+        <template #default="{ context }">
+          <div class="flex flex-col min-h-[160px]">
+
+            <br />
+
+            <button v-if="!context?.freeze" class="w-full p-2 border-y-[1px] border-border-50 text-left flex flex-row px-3 items-center menu-item"
+                    @click="freeze(context.key)">
+              <div class="w-[24px]">
+                <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"/></svg>
+              </div>
+              Freeze
+            </button>
+
+            <button v-else class="w-full p-2 border-y-[1px] border-border-50 text-left flex flex-row px-3 items-center menu-item"
+                    @click="unfreeze(context.key)">
+              <div class="w-[24px]">
+                <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"/></svg>
+              </div>
+              Unfreeze
+            </button>
+
+          </div>
+        </template>
+      </ContextMenu>
 		</div>
+
+		<div ref="cont" class="flex-1 overflow-y-auto" @scroll.passive="handleScroll">
+      <div v-if="state === 3" class="flex items-center justify-center p-8">
+        <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+      </div>
+
+      <div v-else class="flex-1 flex flex-row">
+
+        <div v-if="state !== 2" :style="freezeLeftScrollerStyle">
+          <div :class="$style.spacer" :style="spacerStyle">
+            <table :class="$style.table" class="flex-1 overflow-x-auto">
+              <thead>
+                <tr>
+                  <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
+                  <th :class="$style.spacer"></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in visibleItems"
+                    :key="item"
+                    @dragover="(e) => $emit('dragover', e, item)"
+                    @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
+                    @click="select(item, index)"
+                    :class="trClass(item, index)">
+                  <td v-for="(column, columnIndex) in freezeLeftColumns"
+                      :class="tdClass(item, column)"
+                      @click="$emit('item-click', item, column)">
+
+                    <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                    <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                    <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item"
+                          :index="visibleStartIndex + index" :selected="selectedIndex === item.id">
+                      <div :class="columnClass(column, item)">&nbsp;</div>
+                    </slot>
+                    <slot v-else-if="$slots.default" name="default" :column="column" :item="item"
+                          :index="visibleStartIndex + index" :selected="selectedIndex === item.id">
+                      <div :class="columnClass(column, item)">&nbsp;</div>
+                    </slot>
+                    <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                  </td>
+                  <td class="w-full"></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden" @scroll.passive="handleScrollX">
+          <div ref="scroller" v-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
+            <div :class="$style.spacer" ref="spacer" :style="spacerStyle">
+
+              <table :class="$style.table" class="flex-1 overflow-x-auto">
+                <thead>
+                  <tr>
+                    <th v-for="column in unfreezedColumns" :style="thStyle(column)"></th>
+                    <th :class="$style.spacer"></th>
+                  </tr>
+                </thead>
+                <tbody ref="tbody">
+                  <tr v-for="(item, index) in visibleItems"
+                      :key="item"
+                      @dragover="(e) => $emit('dragover', e, item)"
+                      @mouseover="hover(item, index)" @mouseout="hoverIndex = -1"
+                      @click="select(item, index)"
+                      :class="trClass(item, index)">
+                    <td v-for="(column, columnIndex) in unfreezedColumns"
+                        :class="tdClass(item, column)"
+                        @click="$emit('item-click', item, column)">
+
+                      <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                      <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                      <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item"
+                            :index="visibleStartIndex + index" :selected="selectedIndex === item.id">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
+                      <slot v-else-if="$slots.default" name="default" :column="column" :item="item"
+                            :index="visibleStartIndex + index" :selected="selectedIndex === item.id">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
+                      <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                    </td>
+                    <td class="w-full"></td>
+                  </tr>
+                </tbody>
+              </table>
+
+              <div v-if="state === 2" class="h-[44px] relative">
+                <div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
+                  <svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="visibleColumns.length <= 0 && Array.isArray(columns)" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+            <h5 class="text-text-300">No active column</h5>
+          </div>
+          <div v-else-if="Array.isArray(cItems) && cItems.length <= 0" class="text-center p-3 flex-1 min-h-[100%] flex items-center justify-center">
+            <h5 class="text-text-300">No data available</h5>
+          </div>
+        </div>
+
+      </div>
+
+      <slot name="end"></slot>
+
+      <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
+        <table :class="$style.table">
+          <tbody>
+          <tr>
+            <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
+              <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
+              <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
+              <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
+            </td>
+            <td :class="$style.spacer"></td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+		</div>
+
 	</div>
 </template>
 
@@ -95,15 +207,22 @@ const _DEFAULT_COLUMN_WIDTH = '100px'
 
 export default{
 
-  inject: [ 'emitRoot', 'listStyle' ],
+  inject: [ 'emitRoot' ],
 
-	emits: [ 'scroll-end', 'item-click' ],
+	emits: [ 'dragover', 'freeze', 'unfreeze', 'scroll-end', 'item-click' ],
 
 	props:{
+
 		columns: Array,
 
+    datasource: Object,
+
     enumCache: Object,
 
+    freezeLeft: Number,
+
+    freezeRight: Number,
+
     itemClass: String,
 
     uid: String,
@@ -114,8 +233,6 @@ export default{
 
     datasourceColumns: Array,
 
-    datasourceUid: String,
-
 		defaultColumnWidth: {
 			type: String,
 			default: _DEFAULT_COLUMN_WIDTH
@@ -129,6 +246,7 @@ export default{
     type: String,
 
     value: Object,
+
 	},
 
 	data(){
@@ -139,14 +257,19 @@ export default{
 			maxVisibleItems: 0,
 			isOnEndScroll: false,
 			selectedIndex: -1,
-			state: 1
+			hoverIndex: -1,
+			state: 1,
+      scrolled: false,
+      scrollerCache: {},
+      observer1: null,
+      observer2: null,
 		}
 	},
 
 	computed:{
 
     cColumns(){
-      return this.datasourceColumns ?? this.columns
+      return this.columns ?? []
     },
 
     cItems(){
@@ -194,7 +317,7 @@ export default{
 				return {}
 
 			const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
-			const width = this.visibleColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
+			const width = this.unfreezedColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
 
 			return {
 				height: height + 'px',
@@ -202,40 +325,77 @@ export default{
 			}
 		},
 
+    freezeLeftScrollerStyle(){
+      if(!this.cItems || this.cItems.length < 1)
+        return {}
+
+      const height = (this.cItems.length * this.itemHeight) + (this.state === 2 ? 48 : 0)
+      const width = this.freezeLeftColumns.reduce((r, item) => r + parseInt(item.width ?? _DEFAULT_COLUMN_WIDTH), 0)
+
+      return {
+        height: height + 'px',
+        width: width + 'px'
+      }
+    },
+
 		tableHeadStyle(){
 			return {
 				transform: "translate3d(" + (this.scrollLeft * -1) + "px, 0, 0)"
 			}
 		},
 
+    freezeLeftColumns(){
+      const columns = []
+      for(let i = 0 ; i < (this.freezeLeft ?? 0) && i < this.visibleColumns.length ; i++){
+        const column = this.visibleColumns[i]
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
+    },
+
+    unfreezedColumns(){
+      const columns = []
+      for(let i = this.freezeLeft ?? 0 ; i < this.visibleColumns.length ; i++){
+        const column = this.visibleColumns[i]
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
+    },
+
 		visibleColumns(){
-			return (this.cColumns ?? []).filter(_ => !('visible' in _) || _.visible)
-		},
+      const columns = []
+      for(let i = 0 ; i < this.cColumns.length ; i++){
+        const column = this.cColumns[i]
 
-		visibleColumnKeys(){
-			return this.visibleColumns.map(_ => _.key)
+        if(!('visible' in column) || column.visible){
+          columns.push(column)
+        }
+      }
+      return columns
 		},
 
 	},
 
 	mounted(){
+    this.observer1 = new MutationObserver(_ => this.resize());
+    this.observer1.observe(this.$el, { attributes: true });
 
-		this.$refs.cont.addEventListener(
-			"scroll",
-			this.handleScroll,
-			this.passiveScrollSupported() ? { passive: true } : false
-		)
-
-		this.resize()
+    this.observer2 = new ResizeObserver(_ => this.resize());
+    this.observer2.observe(this.$refs.cont)
 
-    const observer = new MutationObserver((mutationsList) => {
-      this.resize()
-    });
-    observer.observe(this.$el, { attributes: true });
 
 	},
 
-	methods: {
+  unmounted() {
+    this.observer1.disconnect()
+    this.observer2.disconnect()
+  },
+
+  methods: {
 
 		resetState(){
 			this.state = 1
@@ -246,7 +406,8 @@ export default{
 				this.visibleColumns.filter((_) => item._highlight.includes(_.key)).length <= 0)
 
 			return [
-				this.selectedIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trSelected : '',
+				this.selectedIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? `${this.$style.trSelected} selected` : '',
+				this.hoverIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trHover : '',
 				highlight ? this.$style.highlight : ''
 			].join(' ')
 		},
@@ -264,6 +425,10 @@ export default{
 			}
 		},
 
+    hover(item, index){
+      this.hoverIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
+    },
+
 		thStyle(column){
 			const width = parseInt(column.width ?? this.defaultColumnWidth)
 			return {
@@ -274,9 +439,24 @@ export default{
     thClass(column){
       let classNames = []
 
+      let align
       if(column.align){
-        classNames.push(`text-${column.align}`)
+        align = column.align
       }
+      else{
+        switch(column.type){
+          case 'currency':
+          case 'number':
+            align = 'right'
+            break
+
+          default:
+            if(column.key.startsWith('_'))
+              align = 'center'
+            break
+        }
+      }
+      classNames.push(`text-${align}`)
 
       return classNames.join(' ')
     },
@@ -284,6 +464,10 @@ export default{
 		async resize(){
 
 			this.$nextTick(() => {
+        if(this.$refs.xcont){
+          this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
+        }
+
 				if(this.$refs.calc){
 					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
 						window.getComputedStyle(this.$el).height :
@@ -299,11 +483,18 @@ export default{
 
 		},
 
+    handleScrollX: throttle(function(){
+      if(!this.$refs.scroller || !this.$refs.xcont) return
+
+      this.scrollLeft = this.$refs.xcont.scrollLeft
+
+      this.scrolled = this.scrollTop > 0
+    }, 16),
+
 		handleScroll: throttle(function(){
 			if(!this.$refs.scroller || !this.$refs.cont) return
 
 			this.scrollTop = this.$refs.cont.scrollTop
-			this.scrollLeft = this.$refs.cont.scrollLeft
 
 			if(this.scrollTop > this.$refs.scroller.offsetHeight - this.$refs.cont.clientHeight - this.itemHeight){
 				if(!this.isOnEndScroll){
@@ -318,6 +509,8 @@ export default{
 					this.isOnEndScroll = false
 				}
 			}
+
+      this.scrolled = this.scrollTop > 0
 		}, 16),
 
 		passiveScrollSupported() {
@@ -492,8 +685,7 @@ export default{
 
 			return [
 				this.$style.tdDiv,
-				this.$style['align-' + align],
-        this.listStyle ? this.listStyle[appearanceClass] : ''
+				this.$style['align-' + align]
 			]
 				.join(' ')
 		},
@@ -547,11 +739,18 @@ export default{
 			switch(column.type){
 
 				case 'date':
+				case 'datetime':
 					dateFormat = column.format ?? 'D MMM YY HH:mm:ss'
 					val = dayjs(value)
 					text = val.isValid() ? val.format(dateFormat) : value
 					break
 
+				case 'time':
+					dateFormat = column.format ?? ' HH:mm:ss'
+					val = dayjs(value)
+					text = val.isValid() ? val.format(dateFormat) : value
+					break
+
 				case 'currency':
 					const num = parseInt(value)
 					text = !isNaN(num) ? num.toLocaleString() : ''
@@ -573,12 +772,27 @@ export default{
 					break
 			}
 
-			return text ? text : (value === null ? '' : '-')
+			const res = text ? text : (value === null ? '' : '-')
+
+      return `${res}`
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;")
 		},
 
 		setState(state){
 			this.state = state
-		}
+		},
+
+    freeze(key){
+      this.$emit('freeze', key)
+    },
+
+    unfreeze(key){
+      this.$emit('unfreeze', key)
+    }
 
 	},
 
@@ -587,9 +801,9 @@ export default{
     cItems: {
 			deep: true,
 			handler(to, from){
-        if((to ?? []).length !== (from ?? []).length){
+        /*if((to ?? []).length !== (from ?? []).length){
           this.scrollTop = 0
-        }
+        }*/
 
 				this.resize()
 			}
@@ -600,7 +814,26 @@ export default{
 			handler(){
 				this.resize()
 			}
-		}
+		},
+
+    scrollerStyle(to){
+      if(this.scrolled && this.scrollerCache?.id){
+        const index = this.items.findIndex(_ => _.id === this.scrollerCache.id)
+        const addToScroll = (index - this.scrollerCache.index) * this.itemHeight
+        this.scrollTop = this.$refs.cont.scrollTop = this.scrollTop + addToScroll
+      }
+
+      this.scrollerCache = {
+        id: (this.items ?? [])[this.visibleStartIndex]?.id,
+        index: this.visibleStartIndex
+      }
+    },
+
+    state(to){
+      if(to === 1){
+        this.$nextTick(() => this.resize())
+      }
+    }
 
 	}
 
@@ -611,16 +844,17 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col overflow-hidden bg-base-500;
-	@apply border-[1px] border-text-50 rounded-sm;
+	@apply flex flex-col overflow-hidden;
+	@apply border-[1px] border-border-50 rounded-md bg-base-400;
 }
 
 .comp>*:last-child{
-	@apply flex-1 overflow-auto relative max-h-[100vh];
+	@apply flex-1 relative max-h-[100vh];
 }
 
 .header{
-	@apply border-b-[1px] border-text-50;
+	@apply border-b-[1px] border-border-50;
+  @apply flex flex-row;
 }
 
 .headerCol{
@@ -635,6 +869,7 @@ export default{
 }
 
 .spacer{
+  @apply w-full flex flex-row;
 	will-change: auto;
 	position: relative;
 	height: 0;
@@ -653,25 +888,25 @@ export default{
 .table th{
 	@apply relative text-left;
 }
-.table th:nth-child(odd){
-}
 
 .table tbody td{
-	@apply border-b-[1px] border-text-50;
+	@apply border-b-[1px] border-border-50;
 }
-.table tbody td:nth-child(odd){
+
+.table tbody tr{
+  @apply h-[2.4rem];
 }
 
-.table tbody tr:hover{
-	@apply bg-primary-50;
+.table tbody tr.trHover{
+  @apply bg-border-50;
 }
 
 .table tbody tr.trSelected{
-	@apply bg-primary-100;
+	@apply bg-border-50;
 }
 
 .highlight{
-	@apply bg-primary-50 transition-all;
+	@apply bg-text-50 transition-all;
 }
 
 .tdDiv{
@@ -679,15 +914,11 @@ export default{
 }
 
 .separator{
-	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-text-50;
+	@apply w-[5px] absolute top-0 bottom-0 right-0 cursor-e-resize border-border-50;
 	@apply border-r-[1px];
 }
 .table th:hover .separator{
-	@apply border-text-50;
-}
-
-.spacer{
-	@apply w-full
+	@apply border-border-50;
 }
 
 .align-left{ @apply text-left; }
@@ -718,4 +949,8 @@ export default{
   @apply px-3 uppercase font-bold;
 }
 
+.freezed{
+  @apply bg-base-500;
+}
+
 </style>