Sticky header datatable
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Using stickyHeader of datatable in Barcelona does not look good since its goes on the top of the page (where there is already the topbar of Barcelona), the stickyheader should be right below the topbar of Barcelona. We used to use a lot stickyHeader, but with this behavior, it kinda break our UI, related to this https://github.com/primefaces/primefaces/issues/2449
Last edited by Babas007 on 20 Sep 2017, 09:41, edited 2 times in total.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try;
Code: Select all
<script type="text/javascript">
//<![CDATA[
if(PrimeFaces.widget.DataTable) {
//@Override
PrimeFaces.widget.DataTable.prototype.setupStickyHeader = function() {
var table = this.thead.parent(),
offset = table.offset(),
win = $(window),
$this = this,
stickyNS = 'scroll.' + this.id,
resizeNS = 'resize.sticky-' + this.id,
orginTableContent = this.jq.find('> .ui-datatable-tablewrapper > table');
/*******************************************************************************************************/
var layoutTopbar = $('.topbar'), // Please find fixed header element
layoutHeaderHeight = layoutTopbar.length ? layoutTopbar.outerHeight() : 0; // added the height of layout header. (60px according to my example)
/*******************************************************************************************************/
this.stickyContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
this.clone = this.thead.clone(false);
this.stickyContainer.children('table').append(this.thead);
table.prepend(this.clone);
$this.stickyContainer.hide();
setTimeout(function() {
$this.stickyContainer.css({
position: 'absolute',
width: table.outerWidth(),
top: offset.top,
left: offset.left,
'z-index': ++PrimeFaces.zindex
});
$this.stickyContainer.show();
},350);
this.jq.prepend(this.stickyContainer);
if(this.cfg.resizableColumns) {
this.relativeHeight = 0;
}
win.off(stickyNS).on(stickyNS, function() {
var scrollTop = win.scrollTop(),
tableOffset = table.offset();
if(scrollTop + layoutHeaderHeight > tableOffset.top) {
$this.stickyContainer.css({
'position': 'fixed',
'top': layoutHeaderHeight
})
.addClass('ui-shadow ui-sticky');
if($this.cfg.resizableColumns) {
$this.relativeHeight = (scrollTop + layoutHeaderHeight) - tableOffset.top;
}
if(scrollTop + layoutHeaderHeight >= (tableOffset.top + $this.tbody.height()))
$this.stickyContainer.hide();
else
$this.stickyContainer.show();
}
else {
$this.stickyContainer.css({
'position': 'absolute',
'top': tableOffset.top
})
.removeClass('ui-shadow ui-sticky');
if($this.stickyContainer.is(':hidden')) {
$this.stickyContainer.show();
}
if($this.cfg.resizableColumns) {
$this.relativeHeight = 0;
}
}
})
.off(resizeNS).on(resizeNS, function() {
$this.stickyContainer.hide();
setTimeout(function() {
$this.stickyContainer.css('left', orginTableContent.offset().left);
$this.stickyContainer.width(table.outerWidth());
$this.stickyContainer.show();
},350);
});
//filter support
this.clone.find('.ui-column-filter').prop('disabled', true);
};
}
//]]>
</script>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I'll make some changes on Primefaces core for these issues. For now, you can add the above code into layout.js.
Regards,
Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 10 guests