Okay
  Public Ticket #2428658
Freeze Header Row
Closed

Comments

  • mammer57 started the conversation

    Is there a way to freeze the header row of a table on the parent page so that when the page scrolls vertically, the header stays in place but the rows scroll.  Like how Excel functions when you freezing the top row containing the row headers.

    Thanks


  •  2,507
    Aleksandar replied

    Hello mammer57

    Thank you for your purchase.

    This is not possible with the plugin's built-in features, but one of our customers made it possible. We did not get to test it, so you can try if it's working for you.

    He actually created a fixed header and column using translation of x and y (no absolute or fixed position used), and here's one solution, take a look:

    First, you gotta set the z-index for each component below:

    jQuery("#table td").css({"z-index": "-1", "position": "relative"});  
    jQuery("table tr td:first-child").css({'z-index': '1', 'position': 'relative'});
    jQuery("table th:first-child").css({ 'z-index':'2','position':'relative'});

    Then you gotta add listener on scroll like this:

    jQuery('document').scroll(function () {   scrollBlock();
    });

    If your table is set to be scrollable, then you might want to add this in as well:

    jQuery('.wdtscroll').scroll(function () { scrollBlock();
    });

    And here's the scrollBlock() part, it is ugly though, but it works for me though. (noted: the numbers work for my theme, if it is not working correctly on yours, then try to adjust the number until it fits.)

    function scrollBlock(){
                            var table = document.querySelector('table');
                var top = table.getBoundingClientRect().top;
                top = document.body.className.search('admin') > 0 ? top - 32 : top + 3; // this value can change
                var left = table.getBoundingClientRect().left;
                if(left >= 20){ // before scrolling left (before transforming)
                                    if(top >= 0){ // before reaching header bar
                        jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                         translate(jQuery("table th:nth-child(1)"), 0, 0);
                         translate(jQuery("table td:nth-child(1)"), 0, 0);
                                        } else{ // after reaching header bar
                         jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                         translate(jQuery("table th:nth-child(1)"), 0, -top);
                         translate(jQuery("table td:nth-child(1)"), 0, 0);
                     }
                } else{ // after scrolling left
                                    if(top >= 0){
                        jQuery("#table_1 thead th").css("transform", "translateY(0px)");
                        translate(jQuery("table th:nth-child(1)"), -left + 46, 0);
                        translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                                        } else{
                         jQuery("#table_1 thead th").css("transform", "translateY( " + (-top) + "px)");
                         translate(jQuery("table th:nth-child(1)"), -left + 46, -top);
                         translate(jQuery("table td:nth-child(1)"), -left + 46, 0);
                         }
                    }
                }
    function translate(element, x, y) {
                   var translation = "translate(" + x + "px," + y + "px)"
                    element.css({
                            "transform": translation,
                                    "-ms-transform": translation,
                                    "-webkit-transform": translation,
                                    "-o-transform": translation,
                                    "-moz-transform": translation,
                    });
    }
    

    It is kind of messy, you definitely can't copy and paste and expect it to work for you. You need to spend some time to figure it out. 

    Hopefully this will help you out as well.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables