Okay
  Public Ticket #3031899
Sticky Table Headers/Cell Colour formatting
Closed

Comments

  •  2
    Tim started the conversation

    Link to current site which I am hoping wpDataTable scan replicate sticky headers and conditional formatting

    See Related URL. I would like to replace my homebrew code with the functionality provided by wpDataTable. To do this, can you advise if your product supports:

    1. sticky table headers. As the table scrolls, the header stays visible.

    2. cell colour conditional formatting based on the content of another cell in the same row (hidden from the user). See Related URL. The cell colours  in "Next Weeks Team" change each week. The process is currently automated via a lookup in another data source to determine, and then set the correct, team colour for each team that week. I can add that data source to the table data and then I am hoping wpDataTables can utilise that corresponding cell of the same row to determine the team colour in the adjacent (Next Weeks Team") column.

  •  1,851
    Miloš replied

    Hi, Tim

    Thanks for reaching out to us

    1.

    Regarding "freezing" column  or row, or "sticky" functionality

    - 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.

    Our developers will work to add it as a built-in feature, 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!"

    So hopefully this can help you out.

    2.

    cell colour conditional formatting based on the content of another cell in the same row (hidden from the user)

    -

    I believe we have the solution for that. I can not see a "Next Weeks Team" column on the table from that page; but seems that i understand what you mean.

    For example, you can try to set a conditional rule on the column, like this:

    2499797512.png

    in this dummy table, i set for the column "first name", if it contains string "aleks", make the row red color:

    8521421405.png

    -

     Can you please check out more details on our Conditional Formatting explained here.

    Let me know how that sounds, and if you have any questions.

    -

    Just wanted to point out that we have a sandbox/Demo site (https://sandbox.wpdatatables.com/), that you can use to try out some of the plugin's features;

    and there is a 15-day money-back guarantee period,
    so if you purchase the plugin, you can safely fully test it out,
    we will assist along the way,
    and if it doesn't fit your needs you can request and receive a refund in that period.


    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

  •  2
    Tim replied

    Thank you for your response. 

    1. I have subsequently found your sandbox environment (very helpful indeed) and I am currently building my own sticky header CSS solution. I will post that outcome in the blog once I have it completed. I can hopefully fine tune the CSS code to a simpler solution and further enhance the solutions already on line. In the meantime, I will make a submission to include the functionality if the app.

    2. I apologise for the missing "Next Weeks Team" field. The link I provided is to a live site which changes its function during the week. It will revert during the week. Nevertheless, I fear I have not explained the requirements well enough so wish to elaborate further here. 


    Using your suggestion, ("in this dummy table, i set for the column "first name", if it contains string "aleks", make the row red color:") consider the following scenario. Add another column labeled "CellColour". The content of the additional column "CellColour" will be one of 8 text strings. "Red", "Blue", "Yellow", "White", "Green", "Pink", "Black", "Orange". The variables(the 8 text strings) will not change but the cell in which the will be loaded will change as often as the data source is refreshed. The conditional formatting required the following

    If content of "CellColour" = "Blue" then format/change the cell colour of the same row "first name" to the colour blue. Next time the data is refreshed, the record may have its cell colour column changed to "Red" despite having the record having the same "first name" as "aleks".

    This scenario  means, for each row, that the cell colour of one cell ("first name") is dependent on content of another cell ("CellColour"). It is not dependent on its own content. It must also apply only to a cell and NOT the whole row. The "CellColour" column will be hidden as its only purpose will be to inform the cell colour of "first name".


    Thanks again for your prompt response and I look forward to your response to this updated request.


    Tim

  •  1,851
    Miloš replied

    Hi, Tim

    Sorry for so much waiting time.

    -

    Thank you for clarifying, i definitely misunderstood the first time.

    I have been testing this out, and unfortunately at this time, we don't have a built-in solution to achieve what you described.

    5967770119.png

    These are all the available functionalities for conditional formatting that we currently have, as shown on the screenshot.

    We can only set a condition from one cell of a column, if a condition is met,

     to affect it's cell, or its column, or an entire row;

    The developers might add this functionality in the future, but as mentioned earlier, we can't say an ETA on new features that they haven't started working on yet.

    You can suggest this conditional formatting feature on the same page, and i will make sure to bring their attention to it.

    I forgot to add, you can also follow our changeLog page, where we always state new features/fixes at each update.

    -

    If you need a custom solution for something like this at this time,

    we can only suggest reaching out to teams that do quality custom solutions, such as WP Kraken, but we don't know their pricing.

    Let me know if i have perhaps misunderstood the intended goal again, and if you have any questions. Thanks

    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

  •  1,851
    Miloš replied

    Hi, Tim

    Apologies, i also want to thank you for working on a better solution on the first point - the sticky header functionality;

    you can certainly add your workaround as part of the description as a feature suggestion - and i am sure our developers will find use to work on implementing it in the future.

    We appreciate suggestions to improve the plugin or any feedback with the highest value. Thank you

    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