Sticky Header

[calin74]

Hi,

ich have the option stickyHeader="true" on my DataTable.
But on scrolling, the topbar hides the table header.

Thank your for your Help.
Chris

[mert.sincan]

I think you can override setupStickyHeader function.

Code: Select all

 <ui:define name="head">
        <script type="text/javascript">
//<![CDATA[
//@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,
        layoutHeaderHeight = $('#layout-header').height();  // added the height of layout header.

        this.cloneContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
        this.clone = this.thead.clone(true);
        this.cloneContainer.children('table').append(this.clone);
        
        this.cloneContainer.css({
            position: 'absolute',
            width: table.outerWidth(),
            top: offset.top,
            left: offset.left,
            'z-index': ++PrimeFaces.zindex
        })
        .appendTo(this.jq);

        win.off(stickyNS).on(stickyNS, function() {
            var scrollTop = win.scrollTop(),
            tableOffset = table.offset();
            
            if(scrollTop > tableOffset.top) { 
                $this.cloneContainer.css('top', scrollTop + layoutHeaderHeight)
                                    .addClass('ui-shadow ui-sticky');

                if(scrollTop >= (tableOffset.top + $this.tbody.height())) {
                    $this.cloneContainer.hide();
                }
                else {
                    
                    $this.cloneContainer.show();
                }
            }
            else {
                $this.cloneContainer.css('top', tableOffset.top)
                                    .removeClass('ui-shadow ui-sticky');
            }
        })
        .off(resizeNS).on(resizeNS, function() {
            $this.cloneContainer.width(table.outerWidth());
        });
        
        //filter support
        this.thead.find('.ui-column-filter').prop('disabled', true);
};
//]]>
        </script>
    </ui:define>

[calin74]

Thank you for your answer.

This is working, but its hard to maintain for future primefaces versions.
I wonder if there is no property to define the min top position.

What is also not working (and this is the worst problem):
- Resize the left-menu from sentinel layout does also not resize the sticky header correct.

It seems, this was not testet for the sentinel-layout

Greeting
Chris

[calin74]

I added the following line

Code: Select all

$this.cloneContainer.css('left', table.offset().left);

to the method

Code: Select all

.off(resizeNS).on(resizeNS, function() { ...

so the code is

Code: Select all

.off(resizeNS).on(resizeNS, function() {
    $this.cloneContainer.width(table.outerWidth());
    $this.cloneContainer.css('left', table.offset().left);
});

So on next primefaces updates i always have to check this method - this is the only bad thing

[calin74]

Another problems with the sticky table header:

- Resize the left-menu does not refresh the sticky table header


- If i display one or more error messages, the table moves down (because of the space for the error message)
But the sticky table header stays positioned.


Thanks for helping

[cagatay.civici]

StickyHeader is not fully compatible with a layout like Sentinel, due to conflicts with top bar and the left menu as you've mentioned. There is no generic solution we are aware of. StickyHeader for example cannot know if left menu of Sentinel is toggled. Also top menu is fixed which conflicts with whole sticky header design as it is also fixed.

[calin74]

Thanks for your answer.

[spadinha]

Thaks for this post.. it helped me to solve the problem with sentinel sticky

I did some adjusts on funcion... and its working...

Code: Select all

<script type="text/javascript">
			//<![CDATA[
			//@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, layoutHeaderHeight = $(
						'#layout-header').height();

				this.cloneContainer = $('<div class="ui-datatable ui-datatable-sticky ui-widget"><table></table></div>');
				this.clone = this.thead.clone(true);
				this.cloneContainer.children('table').append(this.clone);
				this.cloneContainer.hide();

				this.cloneContainer.css({
					position : 'absolute',
					top : offset.top,
					'z-index' : ++PrimeFaces.zindex
				}).appendTo(this.jq);

				win
						.off(stickyNS)
						.on(
								stickyNS,
								function() {
									var scrollTop = win.scrollTop(), tableOffset = table
											.offset();

									if (scrollTop > tableOffset.top) {
										$this.cloneContainer.css('top',
												scrollTop - 45).addClass(
												'ui-shadow ui-sticky');

										if (scrollTop >= (tableOffset.top + $this.tbody
												.height())) {
											$this.cloneContainer.hide();
										} else {

											$this.cloneContainer.show();
										}
									} else {
										$this.cloneContainer.css('top',
												scrollTop - 45).removeClass(
												'ui-shadow ui-sticky');

										$this.cloneContainer.hide();
									}
								}).off(resizeNS).on(resizeNS, function() {
							$this.cloneContainer.width(table.outerWidth());
						});

				//filter support
				this.thead.find('.ui-column-filter').prop('disabled', true);
			};
			//]]>
		</script>

[mert.sincan]

Glad to hear, thanks for the update!