Table sortable header row

Hello, I would like to use this function but not on every table of the website. How can we find a way to edit css to apply to some table only?

Regards,

I think the childtheme table.php is not needed as we can trigger this by giving the data table the custom class: sortable
I have tested this and there should be no problems for standard tables.
______________

Unfortunately, it looks different for tables that are to be sorted by date. As long as you use standard english date formats you are probably on the safe side. Unfortunately, in Germany we like to use the dot as a separator and the month names are of course different.
So e.g. 16. Mai 1962 etc. is then not sorted correctly.

here is my snippet to give to each td under a “Datum” ( my trigger heading word )

see solution on the next posting

However, this does not have the desired result either, because here too, for example, local date format entries are not taken into account. The result is that a NaN is returned for e.g. Mai / Dez etc or 16.05.2001.

Or in other words – how do we get a date field to have a sorttable_customkey attribute in the form yyyymmdd ?
and that with a given local date formate like 16. Mai 2001

i solved it with the help of moment.js script ( with locale settings ):

function fix_for_sorttable(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {  
(function($){
    $('.avia-table.sortable').each(function(){
      // this is the heading of the column with dates - you had to adjust to your needs
      var dateTableIndex =  $(this).find('thead th:contains("Dat")').index();
      var dateChildNumber = parseInt(dateTableIndex)+1;
      $(this).find('tbody td:nth-of-type('+dateChildNumber+')').addClass('date');
    });
           
    $(".date").each(function(idx) {
        // change the locale setting to your needed language - spcifications may occur like de_at - for austria 
        moment.locale('de');
        var datum = $(this).text(),
        // this is the code for my used german date format like : 16. Mai 1962
        datum_formated = moment( datum , 'DD. MMMM YYYY').format('YYYY-MM-DD');
        $(this).attr("sorttable_customkey", datum_formated);
    });  
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'fix_for_sorttable');

the format YYYY-MM-DD is sortable
see: https://webers-testseite.de/sortable-table/

This is only needed if you got date columns with uncommon format. Like Dots ( 10. 12. etc. Jan. Feb. ) or fullnames of the month.
I guess a normal format like 24-07-2024 could be handled without that way.

on my example page there is now both code for sortable and “fixed” table header with tbody scroll.

https://webers-testseite.de/sortable-table/

on the bottom of that page there is the example table styled layouted by Grid Layout !
this had to be only for wider screens – on responsive case all tables are ugly;

I just made some tests and as expected it doesn’t work. How can I share some link in private with you?

Regards,

send me an email – info under my nick

I would like to copy the same style as those in the example. Which means a proper shadow behind the table. For that I think I must reduce the % of the table but I don’t know where exactly.

Also the header should have rounded borders, and the table should have different color every each line to make it more readable.
And is there a chance to delete the lines that divide the columns?

In short, reproduce what’s on the example, but in my own table, that it’s into a scrollable div, itself into a tab subpage.

I can make a jpg with a clear example of what I aim to, if needed.

https://image.noelshack.com/fichiers/2024/31/7/1722789451-table-1.jpg