element-ui-sticky-table - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.cjs.js

@@ -21,2 +21,6 @@ 'use strict';
     },
+    stickyOffsetTop: {
+      default: 0,
+      type: Number,
+    },
   },
@@ -57,35 +61,2 @@
     },
-
-    offsetTop() {
-      let offsetTop = 0;
-
-      try {
-        let parentNode = this.tableEl.parentElement;
-        while (parentNode !== null) {
-          if (parentNode.classList.contains("el-table")) {
-            for (const el of [...this.tableEl.parentElement.children]) {
-              if (el.classList.contains("el-table")) break;
-              const computedHeight = getComputedStyle(el).height;
-              if (computedHeight.endsWith("px"))
-                offsetTop -= parseFloat(computedHeight);
-            }
-
-            // nested table
-            const computedHeight = getComputedStyle(
-              [...parentNode.children].find((el) =>
-                el.classList.contains("el-table__header-wrapper")
-              )
-            ).height;
-            if (computedHeight.endsWith("px")) {
-              offsetTop += parseFloat(computedHeight);
-            }
-          } else if (parentNode.classList.contains("el-dialog__wrapper")) {
-            break;
-          }
-          parentNode = parentNode.parentElement;
-        }
-      } catch (error) {}
-
-      return offsetTop;
-    },
   },
@@ -190,3 +161,4 @@ watch: {
         const top =
-          this.$refs.table.$el.getBoundingClientRect().top - this.offsetTop;
+          this.$refs.table.$el.getBoundingClientRect().top -
+          this.stickyOffsetTop;
         const finalTop = top >= 0 ? "0" : Math.abs(top) + "px";
@@ -193,0 +165,0 @@

dist/index.cjs.prod.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("element-ui");function t(e,t,i,s,a,l,n,r,d,o){"boolean"!=typeof n&&(d=r,r=n,n=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),l?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(l)},h._ssrRegister=c):t&&(c=n?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean}},components:{ElTable:e.Table},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e},offsetTop(){let e=0;try{let t=this.tableEl.parentElement;for(;null!==t;){if(t.classList.contains("el-table")){for(const t of[...this.tableEl.parentElement.children]){if(t.classList.contains("el-table"))break;const i=getComputedStyle(t).height;i.endsWith("px")&&(e-=parseFloat(i))}const i=getComputedStyle([...t.children].find(e=>e.classList.contains("el-table__header-wrapper"))).height;i.endsWith("px")&&(e+=parseFloat(i))}else if(t.classList.contains("el-dialog__wrapper"))break;t=t.parentElement}}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.offsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;const a=t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0);module.exports=a;
+"use strict";var e=require("element-ui");function t(e,t,i,s,a,n,l,d,r,o){"boolean"!=typeof l&&(r=d,d=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean},stickyOffsetTop:{default:0,type:Number}},components:{ElTable:e.Table},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.stickyOffsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;const a=t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0);module.exports=a;

dist/index.es.js

@@ -19,2 +19,6 @@ import { Table } from 'element-ui';
     },
+    stickyOffsetTop: {
+      default: 0,
+      type: Number,
+    },
   },
@@ -55,35 +59,2 @@
     },
-
-    offsetTop() {
-      let offsetTop = 0;
-
-      try {
-        let parentNode = this.tableEl.parentElement;
-        while (parentNode !== null) {
-          if (parentNode.classList.contains("el-table")) {
-            for (const el of [...this.tableEl.parentElement.children]) {
-              if (el.classList.contains("el-table")) break;
-              const computedHeight = getComputedStyle(el).height;
-              if (computedHeight.endsWith("px"))
-                offsetTop -= parseFloat(computedHeight);
-            }
-
-            // nested table
-            const computedHeight = getComputedStyle(
-              [...parentNode.children].find((el) =>
-                el.classList.contains("el-table__header-wrapper")
-              )
-            ).height;
-            if (computedHeight.endsWith("px")) {
-              offsetTop += parseFloat(computedHeight);
-            }
-          } else if (parentNode.classList.contains("el-dialog__wrapper")) {
-            break;
-          }
-          parentNode = parentNode.parentElement;
-        }
-      } catch (error) {}
-
-      return offsetTop;
-    },
   },
@@ -188,3 +159,4 @@ watch: {
         const top =
-          this.$refs.table.$el.getBoundingClientRect().top - this.offsetTop;
+          this.$refs.table.$el.getBoundingClientRect().top -
+          this.stickyOffsetTop;
         const finalTop = top >= 0 ? "0" : Math.abs(top) + "px";
@@ -191,0 +163,0 @@

dist/index.es.prod.js

@@ -1,1 +0,1 @@
-import{Table as e}from"element-ui";function t(e,t,i,s,a,n,l,d,r,o){"boolean"!=typeof l&&(r=d,d=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean}},components:{ElTable:e},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e},offsetTop(){let e=0;try{let t=this.tableEl.parentElement;for(;null!==t;){if(t.classList.contains("el-table")){for(const t of[...this.tableEl.parentElement.children]){if(t.classList.contains("el-table"))break;const i=getComputedStyle(t).height;i.endsWith("px")&&(e-=parseFloat(i))}const i=getComputedStyle([...t.children].find(e=>e.classList.contains("el-table__header-wrapper"))).height;i.endsWith("px")&&(e+=parseFloat(i))}else if(t.classList.contains("el-dialog__wrapper"))break;t=t.parentElement}}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.offsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;const a=t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0);export default a;
+import{Table as e}from"element-ui";function t(e,t,i,s,a,n,l,d,r,o){"boolean"!=typeof l&&(r=d,d=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean},stickyOffsetTop:{default:0,type:Number}},components:{ElTable:e},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.stickyOffsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;const a=t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0);export default a;

dist/index.iife.js

@@ -20,2 +20,6 @@ this.StickyTable = (function (elementUi) {
       },
+      stickyOffsetTop: {
+        default: 0,
+        type: Number,
+      },
     },
@@ -56,35 +60,2 @@
       },
-
-      offsetTop() {
-        let offsetTop = 0;
-
-        try {
-          let parentNode = this.tableEl.parentElement;
-          while (parentNode !== null) {
-            if (parentNode.classList.contains("el-table")) {
-              for (const el of [...this.tableEl.parentElement.children]) {
-                if (el.classList.contains("el-table")) break;
-                const computedHeight = getComputedStyle(el).height;
-                if (computedHeight.endsWith("px"))
-                  offsetTop -= parseFloat(computedHeight);
-              }
-
-              // nested table
-              const computedHeight = getComputedStyle(
-                [...parentNode.children].find((el) =>
-                  el.classList.contains("el-table__header-wrapper")
-                )
-              ).height;
-              if (computedHeight.endsWith("px")) {
-                offsetTop += parseFloat(computedHeight);
-              }
-            } else if (parentNode.classList.contains("el-dialog__wrapper")) {
-              break;
-            }
-            parentNode = parentNode.parentElement;
-          }
-        } catch (error) {}
-
-        return offsetTop;
-      },
     },
@@ -189,3 +160,4 @@ watch: {
           const top =
-            this.$refs.table.$el.getBoundingClientRect().top - this.offsetTop;
+            this.$refs.table.$el.getBoundingClientRect().top -
+            this.stickyOffsetTop;
           const finalTop = top >= 0 ? "0" : Math.abs(top) + "px";
@@ -192,0 +164,0 @@

dist/index.iife.prod.js

@@ -1,1 +0,1 @@
-this.StickyTable=function(e){"use strict";function t(e,t,i,s,a,n,l,r,d,o){"boolean"!=typeof l&&(d=r,r=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean}},components:{ElTable:e.Table},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e},offsetTop(){let e=0;try{let t=this.tableEl.parentElement;for(;null!==t;){if(t.classList.contains("el-table")){for(const t of[...this.tableEl.parentElement.children]){if(t.classList.contains("el-table"))break;const i=getComputedStyle(t).height;i.endsWith("px")&&(e-=parseFloat(i))}const i=getComputedStyle([...t.children].find(e=>e.classList.contains("el-table__header-wrapper"))).height;i.endsWith("px")&&(e+=parseFloat(i))}else if(t.classList.contains("el-dialog__wrapper"))break;t=t.parentElement}}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.offsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;return t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0)}(ELEMENT);
+this.StickyTable=function(e){"use strict";function t(e,t,i,s,a,n,l,d,r,o){"boolean"!=typeof l&&(r=d,d=l,l=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,a&&(h.functional=!0)),s&&(h._scopeId=s),n?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},h._ssrRegister=c):t&&(c=l?function(e){t.call(this,o(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,d(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}const i={name:"sticky-table",inheritAttrs:!0,props:{sticky:{default:!1,type:Boolean},stickyOffsetTop:{default:0,type:Number}},components:{ElTable:e.Table},data:()=>({isStickyTableUpdating:!1,oldScrollableParentNodes:[],tableEl:void 0,tableHeader:void 0,tableHeaderFixed:void 0,tableHeaderFixedRight:void 0,requestId:null}),computed:{scrollableParentNodes(){const e=[];try{let t=this.tableEl.parentElement;for(;null!==t;)["auto","scroll","visible"].includes(getComputedStyle(t).overflowY)&&e.push(t),t=t.parentElement}catch(e){}return e}},watch:{scrollableParentNodes:{immediate:!0,handler(){this.oldScrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),this.scrollableParentNodes.forEach(e=>{e.addEventListener("scroll",this.adjust),e.addEventListener("wheel",this.adjust)}),this.oldScrollableParentNodes=[...this.scrollableParentNodes]}},tableEl(){const e=this.tableEl,t=[...e.children].find(e=>e.classList.contains("el-table__header-wrapper"));void 0!==t&&(this.tableHeader=t);const i=[...e.children].find(e=>e.classList.contains("el-table__fixed"));void 0!==i&&(this.tableHeaderFixed=[...i.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")));const s=[...e.children].find(e=>e.classList.contains("el-table__fixed-right"));void 0!==s&&(this.tableHeaderFixedRight=[...s.children].find(e=>e.classList.contains("el-table__fixed-header-wrapper")))},tableHeader(){void 0!==this.tableHeader&&(this.tableHeader.style.position="relative",this.tableHeader.style.zIndex="2")},tableHeaderFixed(){void 0!==this.tableHeaderFixed&&(this.tableHeaderFixed.style.position="relative",this.tableHeaderFixed.style.zIndex="4")},tableHeaderFixedRight(){void 0!==this.tableHeaderFixedRight&&(this.tableHeaderFixedRight.style.position="relative",this.tableHeaderFixedRight.style.zIndex="4")},data:{immediate:!0,handler(){this.adjust()}}},async mounted(){!1!==this.sticky&&(await this.$nextTick(),this.tableEl=this.$refs.table.$el,window.addEventListener("resize",this.adjust),window.addEventListener("sticky-table:expand",this.adjust))},beforeDestroy(){this.scrollableParentNodes.forEach(e=>{e.removeEventListener("scroll",this.adjust),e.removeEventListener("wheel",this.adjust)}),window.removeEventListener("resize",this.adjust),window.removeEventListener("sticky-table:expand",this.adjust)},methods:{handleExpand(){window.dispatchEvent(new Event("sticky-table:expand"))},adjust(){cancelAnimationFrame(this.requestId),this.requestId=requestAnimationFrame(async()=>{const e=this.$refs.table.$el.getBoundingClientRect().top-this.stickyOffsetTop,t=e>=0?"0":Math.abs(e)+"px";var i;if([this.tableHeader,this.tableHeaderFixed,this.tableHeaderFixedRight].filter(e=>void 0!==e).forEach(e=>{e.style.top=t}),await(i=166,new Promise(e=>setTimeout(e,i))),void 0===this.tableHeaderFixedRight)return;const s=getComputedStyle(this.tableHeaderFixedRight.parentElement).width,a=getComputedStyle([...this.tableHeaderFixedRight.children].find(e=>e.classList.contains("el-table__header"))).width;this.tableHeaderFixedRight.style.left=`calc(-${a} + ${s})`})}}};var s=function(){var e=this,t=e.$createElement;return(e._self._c||t)("el-table",e._g(e._b({ref:"table",on:{"expand-change":e.handleExpand},scopedSlots:e._u([e._l(e.$scopedSlots,(function(t,i){return{key:i,fn:function(t){return[e._t(i,null,null,t)]}}}))],null,!0)},"el-table",e.$attrs,!1),e.$listeners))};s._withStripped=!0;return t({render:s,staticRenderFns:[]},void 0,i,void 0,!1,void 0,!1,void 0,void 0,void 0)}(ELEMENT);

package.json

 {
   "name": "element-ui-sticky-table",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Sticky for element-ui table",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -66,1 +66,7 @@ # element-ui-sticky-table
 ```
+
+### API
+
+`sticky: boolean = false`: Whether the table should be sticky.
+
+`sticky-offset-top: number = 0`: apply offset top, this would be useful when you have fixed element to be offset from.

No alert changes

Improved metrics

Number of lines in readme file

72

increased by9.09%

Worsened metrics

Total package byte prevSize

45877

decreased by-8.64%

Lines of code

960

decreased by-7.51%

No dependency changes