Okay
  Public Ticket #2797012
Sticky Header and Colums
Closed

Comments

  • Julian started the conversation

    Hello dear team,

    I'm currently looking for a spreadsheet tool for wordpress that can do the following:

    - fixed header and 1st column (possibly also the footer)

    - responsiveness (especially on the mobile phone that larger tables can be steered to the right and left, for example using javascript and buttons)

    - possibly also an import of amazon products WITHOUT access to the amazon api

    i am looking forward to your next feedback

    With best regards

    Julian

  • [deleted] replied

    Hi Julian

    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. 

    Any wpDataTable can be responsive, it doesn’t matter which data source do you use – MySQL, Excel, or any other. In this WordPress responsive table plugin you can choose which columns do you want to be visible or hidden on tablets and/or mobiles. The hidden columns data will be still available for the users that would like to see it in a dropdown; it will collapse under an expandable block in the first visible column. Please have a look at our documentation how to use this feature.

    Could you please explain a bit further what do you mean by "import of amazon products"? What exactly would you like to do and how do you intend to display that in the table?