Okay
  Public Ticket #2881975
Freeze HEADER of table
Closed

Comments

  • revaz TAVZARASHVILI started the conversation

    Hello,

    How can I freeze header of the table and to make rest of the data scrollable


    Many Thanks

    Revaz

  • [deleted] replied

    Hi Revaz

    Thank you for reaching out to us.

    Creating a sticky header and columns is not possible with plugin built in features, but one of our customers made this possible. We did not get a chance to test it, so you can try if is 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 of all, 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.