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 #3193676
Freezing first column
Closed

Comments

  • Gego Levente started the conversation

    I have built 4 Gaming fansites using WpDataTables for displaying  Gaming Leaderboard purposes. I did realize too late that WpDataTables has no option to freeze the 1st column so when sorting by other columns than the first on the table could function as a Leaderboard. Can you please suggest me a workaround for how to freeze my 1st column, I don't wish to give up on WpDatatables but I desperately need this function.

  •  1,693
    Miloš replied

    Hi, Gego 

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    - I am truly sorry to disappoint you, but unfortunately something like this is not possible to achieve with the plugin's built-in features at the moment or some simple CSS.

    Our developers will work to add it as a built-in feature as soon as possible, but i can't say an ETA on it.

    You can suggest this as a built-in feature on this link https://wpdatatables.com/documentation/feature-suggestion/ and our developers would place it on their "TO-DO" list.

    As more customers request a feature, it gets pushed quicker on the list. We always strive to make our product better and deliver the most value to our end users, so we carefully review each suggestion

    -

    At this time, it can only be made with custom solutions.

    Here is a workaround suggestion from our customer that managed to achieve a similar solution :

    "I actually created a fixed header and column using the translation of x and y (no absolute or fixed position used), very similar to the fixed header provided by weihs5  on this site, 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 a 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. Hope this helps everyone!"

    We hope that this can help. 

    Thank you


    Kind Regards, 

    Miloš Jovanović
    [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