Sticky header datatable

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Babas007
Posts: 251
Joined: 24 May 2011, 09:42

28 Aug 2017, 14:07

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.

Babas007
Posts: 251
Joined: 24 May 2011, 09:42

15 Sep 2017, 19:48

I guess it doesn't have to be implemented in PF core, but it's surely necessary to make it available in Barcelona (and other layouts using topbar)

Babas007
Posts: 251
Joined: 24 May 2011, 09:42

19 Sep 2017, 15:24

Rather complaining I'd like to gently ask you to answer on this please ;) I just feel like this topic is avoided...

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

22 Sep 2017, 16:22

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>

Babas007
Posts: 251
Joined: 24 May 2011, 09:42

25 Sep 2017, 11:49

Perfect! Thank you very much

Hoping it will be available in the next barcelona release

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

02 Oct 2017, 08:41

I'll make some changes on Primefaces core for these issues. For now, you can add the above code into layout.js.

Regards,

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests