Okay
  Public Ticket #1854333
Scrolling with frozen/sticky column
Closed

Comments

  • tsteingard started the conversation

    This request is really meant for mobile. 9 times out of 10 this chart will be viewed on a mobile device...so the lack of this feature really does matter.

    If you go and view this chart of stats, it's a challenge to understand all of the data without the person's name fixed as you scroll to view the other stats.

    The other issue is that it would be great to be able to do word wrapping AND scroll. This way it looks as clean and condensed as possible, but is still functional to access the stats on mobile (via scrolling).

    Hopefully viewing this on mobile gives you a sense of how we're using (and hoping to optimize) your plugin in a more unique way.

    BTW, the data is pulling from a Google Spreadsheet, so that feature is even more amazing for how we're using this.

    Nicely done!

  •  2,572
    Aleksandar replied

    Hello tsteingard.

    Thank You for Your purchase.

    Sorry to disappoint you but unfortunately freezing columns 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 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 can help you out.

    As for Your other question - to enable word wrapping and scroll, You'd have to use a media query.

    Turn off option Limit table width and insert this code on page where is that table between the style tag.(<style>Code here</style>)

    <style>
    @media only screen and (max-width: 480px) {
        table.wpDataTable {
            table-layout: fixed !important;
        }
        .wpDataTablesWrapper table.wpDataTable td ,.wpDataTablesWrapper table.wpDataTable > thead > tr > th{
            padding: 3px 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal !important;
        }
    }
    </style>
    

    This code is set for mobiles max-width on 480px, but if you need more you can change it.

    Please try this and let me know if it works for You.

    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