Okay
  Public Ticket #3037892
Text Styling of column header
Closed

Comments

  • Reji Ittiachan started the conversation

    Hi,

    I would like to know how to add subscript text in the column header.

    Also, I would like to know how to freeze the header row, so that while scrolling the header row is constant on the page.


  •  1,851
    Miloš replied



    Hi, Reji

    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.

    -

    1. Regarding adding subscript text in the column header;

    I am sorry to disappoint you, currently we don't have a built-in option to do that.

    We might add something like that in the future, but i can't say an ETA on it.

    You can suggest this as a built-in feature on this page 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.

    And you can follow our changeLog page, where we always state new features/changes on each Update.

    -


    Maybe it can be achieved at this moment using some custom solutions with JS, but i am not 100% sure, to be honest.

    Our support doesn't cover custom work, but we like to provide some level of custom solutions as extra effort, but for this sadly, we don't have a working example yet.

    If you need to reach out to someone to do custom solutions, we can always recommend teams such as WP Kraken, but we don't know their pricing.


    -

    2.

    Regarding freezing the header row;

    - Sorry to disappoint you but unfortunately something like this is not possible to achieve with the plugin built-in features at the moment or some simple CSS.

    Here is the suggestion from our customer that managed to achieve this :

    "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!"

    So hopefully this can help you out.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    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