Okay
  Public Ticket #1921318
Fixed table header row...
Closed

Comments

  •  2
    jprstoney started the conversation

    Hi there,

    I understand form the forums that you used to offer a fixed (frozen) header row, but stopped as it didn't;t work on some themes.  Our client really wants a frozen header row.  Is it possible for you to let us have the code/css so that we can adapt it for the theme?  No problem if not as I'll dig out the bootstrap code but thought it best to ask first.

    In addition, our client would like a frozen first column numbered 1 - 10.  They do have an existing column in the Google spreadsheet that we've linked to but, of course, it sorts when a visitor sorts another column.

    Lastly, they have asked if we can horizontally scroll the table within the page on mobile devices.  Again, I know that Bootstrap tables can dose, and I can use that ode in the template, but is there anything I should watch out for?  Especially updates overwriting the templates.  Can I place the templates in the sites child theme?


    I look forward to your thoughts.

    Kind regards

    James

  •  2,572
    Aleksandar replied

    Hi James.

    I am sorry to disappoint you, but fixing table headers is considered a custom solution, and it is highly dependent on the theme you're using. We would need to create a script that'd implement the feature, and we'll need the theme you're planning on using. Even then, it depends on the theme if that'll actually work.

    As for the fixed first column, one of our customers managed to achieve this, so here's his response in it's entirety:

    "I actually created a fixed header and column using 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 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!"

    So, hopefully this will help you out as well.

    Best regards.

    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

  •  2
    jprstoney replied

    Hi Aleksandar,

    No problem!  We'll give that code you supplied a try and see how that goes.  It's not a deal breaker.


    On another note, I'm migrating the dev website to the live server.  Is there anything I need to do re licensing (add the live url for instance) or any issues I should look out for?

    Kind regards

    James

  •  2,572
    Aleksandar replied

    Hello again James.

    Nothing special about licensing when you migrate the site.

    When you are moving on live site from local or stage site we can suggest to use Plugin Duplicator. We use it and it's working fine, because he will transfer all the files and also the tables to database. 

    Best regards.

    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

  •  2
    jprstoney replied

    Many thanks Aleksandar,

    I transferred the site last night and all is working well.

    The dynamic table that we've been working on for our client can be viewed at https://qascarbonneutral.com/airline-carbon-offset-programs/

    It's displaying mostly graphics or fontawesome pro icons, using the conditional formatting rules, and is pulling all info from a live Google spreadsheet and it's working really well!

    Thanks for a great plugin!

    Best regards

    James

  •  2,572
    Aleksandar replied

    Hey James.

    That looks beautiful!

    Would it be OK if we use the table like an example of what can be achieved with our plugin?

    Kindest regards!

    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

  •  2
    jprstoney replied

    Many thanks Aleksander!  Glad you like it.

    Yep, sure.  That would be great!

    Kind regards
    James

  •  2,572
    Aleksandar replied

    Great!

    Thank you James!

    If you have any more issues or questions feel free to open a new ticket, we will gladly help.

    Best regards.

    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