UNPKG

datatables.net-fixedheader

Version:

FixedHeader for DataTables

datatables.net

DataTables/Dist-DataTables-FixedHeader

4 lines • 12.1 kB
1
2
3
4
/*! FixedHeader 4.0.2 * © SpryMedia Ltd - datatables.net/license */ import jQuery from"jquery";import DataTable from"datatables.net";let $=jQuery;var _instCounter=0,FixedHeader=function(t,e){if(!DataTable.versionCheck("2"))throw"Warning: FixedHeader requires DataTables 2 or newer";if(!(this instanceof FixedHeader))throw"FixedHeader must be initialised with the 'new' keyword.";!0===e&&(e={}),t=new DataTable.Api(t),this.c=$.extend(!0,{},FixedHeader.defaults,e),this.s={dt:t,position:{theadTop:0,tbodyTop:0,tfootTop:0,tfootBottom:0,width:0,left:0,tfootHeight:0,theadHeight:0,windowHeight:$(window).height(),visible:!0},headerMode:null,footerMode:null,autoWidth:t.settings()[0].oFeatures.bAutoWidth,namespace:".dtfc"+_instCounter++,scrollLeft:{header:-1,footer:-1},enable:!0,autoDisable:!1},this.dom={floatingHeader:null,thead:$(t.table().header()),tbody:$(t.table().body()),tfoot:$(t.table().footer()),header:{host:null,floating:null,floatingParent:$('<div class="dtfh-floatingparent"><div></div></div>'),placeholder:null},footer:{host:null,floating:null,floatingParent:$('<div class="dtfh-floatingparent"><div></div></div>'),placeholder:null}},this.dom.header.host=this.dom.thead.parent(),this.dom.footer.host=this.dom.tfoot.parent();e=t.settings()[0];if(e._fixedHeader)throw"FixedHeader already initialised on table "+e.nTable.id;(e._fixedHeader=this)._constructor()};$.extend(FixedHeader.prototype,{destroy:function(){var t=this.dom;this.s.dt.off(".dtfc"),$(window).off(this.s.namespace),t.header.rightBlocker&&t.header.rightBlocker.remove(),t.header.leftBlocker&&t.header.leftBlocker.remove(),t.footer.rightBlocker&&t.footer.rightBlocker.remove(),t.footer.leftBlocker&&t.footer.leftBlocker.remove(),this.c.header&&this._modeChange("in-place","header",!0),this.c.footer&&t.tfoot.length&&this._modeChange("in-place","footer",!0)},enable:function(t,e,o){this.s.enable=t,this.s.enableType=o,!e&&void 0!==e||(this._positions(),this._scroll(!0))},enabled:function(){return this.s.enable},headerOffset:function(t){return void 0!==t&&(this.c.headerOffset=t,this.update()),this.c.headerOffset},footerOffset:function(t){return void 0!==t&&(this.c.footerOffset=t,this.update()),this.c.footerOffset},update:function(t){var e=this.s.dt.table().node();(this.s.enable||this.s.autoDisable)&&($(e).is(":visible")?(this.s.autoDisable=!1,this.enable(!0,!1)):(this.s.autoDisable=!0,this.enable(!1,!1)),0!==$(e).children("thead").length)&&(this._positions(),this._scroll(void 0===t||t),this._widths(this.dom.header),this._widths(this.dom.footer))},_constructor:function(){var o=this,i=this.s.dt,t=($(window).on("scroll"+this.s.namespace,function(){o._scroll()}).on("resize"+this.s.namespace,DataTable.util.throttle(function(){o.s.position.windowHeight=$(window).height(),o.update()},50)),$(".fh-fixedHeader")),t=(!this.c.headerOffset&&t.length&&(this.c.headerOffset=t.outerHeight()),$(".fh-fixedFooter"));!this.c.footerOffset&&t.length&&(this.c.footerOffset=t.outerHeight()),i.on("column-reorder.dt.dtfc column-visibility.dt.dtfc column-sizing.dt.dtfc responsive-display.dt.dtfc",function(t,e){o.update()}).on("draw.dt.dtfc",function(t,e){o.update(e!==i.settings()[0])}),i.on("destroy.dtfc",function(){o.destroy()}),this._positions(),this._scroll()},_clone:function(t,e){var o,i,s=this,d=this.s.dt,a=this.dom[t],r="header"===t?this.dom.thead:this.dom.tfoot;"footer"===t&&this._scrollEnabled()||(!e&&a.floating?a.floating.removeClass("fixedHeader-floating fixedHeader-locked"):(a.floating&&(null!==a.placeholder&&a.placeholder.remove(),a.floating.children().detach(),a.floating.remove()),e=$(d.table().node()),o=$(e.parent()),i=this._scrollEnabled(),a.floating=$(d.table().node().cloneNode(!1)).attr("aria-hidden","true").css({top:0,left:0}).removeAttr("id"),a.floatingParent.css({width:o[0].offsetWidth,overflow:"hidden",height:"fit-content",position:"fixed",left:i?e.offset().left+o.scrollLeft():0}).css("header"===t?{top:this.c.headerOffset,bottom:""}:{top:"",bottom:this.c.footerOffset}).addClass("footer"===t?"dtfh-floatingparent-foot":"dtfh-floatingparent-head").appendTo("body").children().eq(0).append(a.floating),this._stickyPosition(a.floating,"-"),(i=function(){var t=o.scrollLeft();s.s.scrollLeft={footer:t,header:t},a.floatingParent.scrollLeft(s.s.scrollLeft.header)})(),o.off("scroll.dtfh").on("scroll.dtfh",i),a.floatingParent.children().css({width:"fit-content",paddingRight:s.s.dt.settings()[0].oBrowser.barWidth}),(e=$("footer"===t?"div.dtfc-bottom-blocker":"div.dtfc-top-blocker",d.table().container())).length&&e.clone().appendTo(a.floatingParent).css({position:"fixed",right:e.width()}),a.placeholder=r.clone(!1),a.placeholder.find("*[id]").removeAttr("id"),a.host.prepend(a.placeholder),a.floating.append(r),this._widths(a)))},_stickyPosition:function(t,e){var i;this._scrollEnabled()&&(i="rtl"===$(this.s.dt.table().node()).css("direction"),t.find("th").each(function(){var t,e,o;"sticky"===$(this).css("position")&&(t=$(this).css("right"),e=$(this).css("left"),"auto"===t||i?"auto"!==e&&i&&(o=+e.replace(/px/g,""),$(this).css("left",0<o?o:0)):(o=+t.replace(/px/g,""),$(this).css("right",0<o?o:0)))}))},_horizontal:function(t,e){var o,i=this.dom[t],s=this.s.scrollLeft;i.floating&&s[t]!==e&&(this._scrollEnabled()&&(o=$($(this.s.dt.table().node()).parent()).scrollLeft(),i.floating.scrollLeft(o),i.floatingParent.scrollLeft(o)),s[t]=e)},_modeChange:function(t,e,o){var i,s,d,a,r,n,h,f=this.dom[e],l=this.s.position,c=this._scrollEnabled();"footer"===e&&c||(i=function(t){f.floating[0].style.setProperty("width",t+"px","important"),c||f.floatingParent[0].style.setProperty("width",t+"px","important")},a=this.dom["footer"===e?"tfoot":"thead"],s=$.contains(a[0],document.activeElement)?document.activeElement:null,r=$($(this.s.dt.table().node()).parent()),"in-place"===t?(f.placeholder&&(f.placeholder.remove(),f.placeholder=null),$.contains(f.host[0],a[0])||("header"===e?f.host.prepend(a):f.host.append(a)),f.floating&&(f.floating.remove(),f.floating=null,this._stickyPosition(f.host,"+")),f.floatingParent&&(f.floatingParent.find("div.dtfc-top-blocker").remove(),f.floatingParent.remove()),$($(f.host.parent()).parent()).scrollLeft(r.scrollLeft())):"in"===t?(this._clone(e,o),a=r.offset(),h=(d=$(document).scrollTop())+$(window).height(),n=c?a.top:l.tbodyTop,a=c?a.top+r.outerHeight():l.tfootTop,r="footer"===e?h<n?l.tfootHeight:n+l.tfootHeight-h:d+this.c.headerOffset+l.theadHeight-a,n="header"===e?"top":"bottom",h=this.c[e+"Offset"]-(0<r?r:0),f.floating.addClass("fixedHeader-floating"),f.floatingParent.css(n,h).css({left:l.left,"z-index":3}),i(l.width),"footer"===e&&f.floating.css("top","")):"below"===t?(this._clone(e,o),f.floating.addClass("fixedHeader-locked"),f.floatingParent.css({position:"absolute",top:l.tfootTop-l.theadHeight,left:l.left+"px"}),i(l.width)):"above"===t&&(this._clone(e,o),f.floating.addClass("fixedHeader-locked"),f.floatingParent.css({position:"absolute",top:l.tbodyTop,left:l.left+"px"}),i(l.width)),s&&s!==document.activeElement&&setTimeout(function(){s.focus()},10),this.s.scrollLeft.header=-1,this.s.scrollLeft.footer=-1,this.s[e+"Mode"]=t)},_positions:function(){var t=this.s.dt,e=t.table(),o=this.s.position,i=this.dom,e=$(e.node()),s=this._scrollEnabled(),d=$(t.table().header()),t=$(t.table().footer()),i=i.tbody,a=e.parent();o.visible=e.is(":visible"),o.width=e.outerWidth(),o.left=e.offset().left,o.theadTop=d.offset().top,o.tbodyTop=(s?a:i).offset().top,o.tbodyHeight=(s?a:i).outerHeight(),o.theadHeight=d.outerHeight(),o.theadBottom=o.theadTop+o.theadHeight,o.tfootTop=o.tbodyTop+o.tbodyHeight,t.length?(o.tfootBottom=o.tfootTop+t.outerHeight(),o.tfootHeight=t.outerHeight()):(o.tfootBottom=o.tfootTop,o.tfootHeight=0)},_scroll:function(t){var e,o,i,s,d,a,r,n,h,f,l,c,g,p,u,b;this.s.dt.settings()[0].bDestroying||(e=this._scrollEnabled(),i=(o=$(this.s.dt.table().node()).parent()).offset(),c=o.outerHeight(),s=$(document).scrollLeft(),d=$(document).scrollTop(),a=$(window).height()+d,g=this.s.position,b=e?i.top:g.tbodyTop,n=(e?i:g).left,c=e?i.top+c:g.tfootTop,h=e?o.outerWidth():g.tbodyWidth,this.c.header&&(!this.s.enable||!g.visible||d+this.c.headerOffset+g.theadHeight<=b?f="in-place":d+this.c.headerOffset+g.theadHeight>b&&d+this.c.headerOffset+g.theadHeight<c?(f="in",d+this.c.headerOffset+g.theadHeight>c||void 0===this.dom.header.floatingParent?t=!0:0===(l=this.dom.header.floatingParent.css({top:this.c.headerOffset,position:"fixed"}).children().eq(0)).find(this.dom.header.floating).length&&l.append(this.dom.header.floating)):f="below",!t&&f===this.s.headerMode||this._modeChange(f,"header",t),this._horizontal("header",s)),p={offset:{top:0,left:0},height:0},u={offset:{top:0,left:0},height:0},this.c.footer&&this.dom.tfoot.length&&this.dom.tfoot.find("th, td").length&&(!this.s.enable||!g.visible||g.tfootBottom+this.c.footerOffset<=a?r="in-place":c+g.tfootHeight+this.c.footerOffset>a&&b+this.c.footerOffset<a?(r="in",t=!0):r="above",!t&&r===this.s.footerMode||this._modeChange(r,"footer",t),this._horizontal("footer",s),l=function(t){return{offset:t.offset(),height:t.outerHeight()}},p=this.dom.header.floating?l(this.dom.header.floating):l(this.dom.thead),u=this.dom.footer.floating?l(this.dom.footer.floating):l(this.dom.tfoot),e)&&u.offset.top>d&&(g=a+((c=d-i.top)>-p.height?c:0)-(p.offset.top+(c<-p.height?p.height:0)+u.height),o.outerHeight(g=g<0?0:g),Math.round(o.outerHeight())>=Math.round(g)?$(this.dom.tfoot.parent()).addClass("fixedHeader-floating"):$(this.dom.tfoot.parent()).removeClass("fixedHeader-floating")),this.dom.header.floating&&this.dom.header.floatingParent.css("left",n-s),this.dom.footer.floating&&this.dom.footer.floatingParent.css("left",n-s),void 0!==this.s.dt.settings()[0]._fixedColumns&&(this.dom.header.rightBlocker=(b=function(t,e,o){var i;return null!==(o=void 0===o?0===(i=$("div.dtfc-"+t+"-"+e+"-blocker")).length?null:i.clone().css("z-index",1):o)&&("in"===f||"below"===f?o.appendTo("body").css({top:("top"===e?p:u).offset.top,left:"right"===t?n+h-o.width():n}):o.detach()),o})("right","top",this.dom.header.rightBlocker),this.dom.header.leftBlocker=b("left","top",this.dom.header.leftBlocker),this.dom.footer.rightBlocker=b("right","bottom",this.dom.footer.rightBlocker),this.dom.footer.leftBlocker=b("left","bottom",this.dom.footer.leftBlocker)))},_scrollEnabled:function(){var t=this.s.dt.settings()[0].oScroll;return""!==t.sY||""!==t.sX},_widths:function(t){if(t&&t.placeholder)for(var e=$(this.s.dt.table().node()),o=$(e.parent()),i=(t.floatingParent.css("width",o[0].offsetWidth),t.floating.css("width",e[0].offsetWidth),$("colgroup",t.floating).remove(),t.placeholder.parent().find("colgroup").clone().appendTo(t.floating).find("col")),s=this.s.dt.columns(":visible").widths(),d=0;d<s.length;d++)i.eq(d).css("width",s[d])}}),FixedHeader.version="4.0.2",FixedHeader.defaults={header:!0,footer:!1,headerOffset:0,footerOffset:0},$.fn.dataTable.FixedHeader=FixedHeader,$.fn.DataTable.FixedHeader=FixedHeader,$(document).on("init.dt.dtfh",function(t,e,o){var i;"dt"===t.namespace&&(t=e.oInit.fixedHeader,i=DataTable.defaults.fixedHeader,t||i)&&!e._fixedHeader&&(i=$.extend({},i,t),!1!==t)&&new FixedHeader(e,i)}),DataTable.Api.register("fixedHeader()",function(){}),DataTable.Api.register("fixedHeader.adjust()",function(){return this.iterator("table",function(t){t=t._fixedHeader;t&&t.update()})}),DataTable.Api.register("fixedHeader.enable()",function(e){return this.iterator("table",function(t){t=t._fixedHeader;e=void 0===e||e,t&&e!==t.enabled()&&t.enable(e)})}),DataTable.Api.register("fixedHeader.enabled()",function(){if(this.context.length){var t=this.context[0]._fixedHeader;if(t)return t.enabled()}return!1}),DataTable.Api.register("fixedHeader.disable()",function(){return this.iterator("table",function(t){t=t._fixedHeader;t&&t.enabled()&&t.enable(!1)})}),$.each(["header","footer"],function(t,o){DataTable.Api.register("fixedHeader."+o+"Offset()",function(e){var t=this.context;return void 0===e?t.length&&t[0]._fixedHeader?t[0]._fixedHeader[o+"Offset"]():void 0:this.iterator("table",function(t){t=t._fixedHeader;t&&t[o+"Offset"](e)})})});export default DataTable;