Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

Okay
  Public Ticket #2336523
Fixed header and left columns
Closed

Comments

  • Lukas started the conversation

    Hello,

    I need to make a Table for bigger data (20+ columns, 200+ rows) but i cant find option to make header and left columns fixed to the container. Can you help me with that?

    I found out that this can be made with only CSS but i dont know which classes i should i use in "Extra CSS" in wpdatatables.

    This is link to example which i want to get (fixed header and left columns)

    https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

    And this is example from stack overflow with CSS example.

    https://stackoverflow.com/questions/15811653/table-with-fixed-header-and-fixed-column-on-pure-css

  •  2,498
    Aleksandar replied

    Hello again Lukas

    I am sorry to disappoint you, but unfortunately something like this is not possible with the plugin's built-in features. Also, your support expired, so I won't be able to help you much with this. I can provide a suggestion one of our customers used, though. Hopefully you'll be able to make it work. We haven't been able to test this, though.

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

    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, and you definitely can't copy and paste this and expect it to work for you. You need to spend some time to figure it out.

    If you need any further assistance like this, please consider purchasing one of our licenses on our website, as they are cheaper than simply extending support on Envato.

    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

  • Andrew Kennedy replied

    Hello! I am not able to get this to work. I'm placing the script into the header like this (not getting console errors).


    <script>
    jQuery(document).ready(function($) {


    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'});

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

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

      

    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,
                    });
    }})</script>


  •  2,498
    Aleksandar replied

    Hello Andrew

    This is a custom solution that was suggested by one of our customers. We haven't tested it recently, but it used to work, and we've had no complaints about it not working in the past.

    Unfortunately, as a custom solution, it doesn't fall under included support for the plugin, so we are not able to help you with this.

    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