Sortable Tables – with uncommon date format fix

Sortable Tables via script: Sorttable

For the different date formats that are used in many countries; with and without dots, with different month and weekday names, I use a small script to create sortable date formats for the above sorttable script and add them as attributes to the date fields: moment.js

For localisation download the file from: Locales
and upload that to the same folder as your js files.

So that you can recognise that there are sortable table columns when loading the page, I trigger a first click after loading.

function include_custom_js() {
	wp_enqueue_script( 'kryogenix-sorttable', get_stylesheet_directory_uri().'/js/sorttable.js', array('jquery'), 2, true );
	wp_enqueue_script( 'moment', get_stylesheet_directory_uri().'/js/moment.js', array('jquery'), 2, true );
	wp_enqueue_script( 'moment-de', get_stylesheet_directory_uri().'/js/de.js', array('jquery'), 2, true );

	// if you need the austrian "Jänner" f.e:
	wp_enqueue_script( 'moment-de-at', get_stylesheet_directory_uri().'/js/de-at.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'include_custom_js', 100 );
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 
        // i really don't know if this is needed - because ewen without it - only with the loading of de-at it works.
        moment.locale('de');
        var datum = $(this).text(),
        datum_formated = moment( datum , 'DD. MMMM YYYY').format('YYYY-MM-DD');
        $(this).attr("sorttable_customkey", datum_formated);
    });  
	
	setTimeout(function () {
		$('.avia-table.sortable').find('.avia-heading-row th:first-child').trigger('click');
	},1000); 
	
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'fix_for_sorttable');

custom class to table element for scrollable table:  scroll

DatumName
17. April 1968Karl Heinz
28. Juli 1992Max
25. September 2001Paula
16. Mai 1962Günter
25. April 1932Hermann
02. März 1978Hanna
17. Oktober 1984Liam
01. Januar 1998Gunther
01. Jänner 1998Günter2
@media only screen and (min-width: 768px) {
	.avia-data-table-wrap table.scroll {
		width: 100%;
		background-color: #fff;
	}

	table.scroll thead {
		width: 100%;
		background: #5dd39e;
	}

	table.scroll thead tr:after {
		content: '';
		overflow-y: scroll;
		visibility: hidden;
	}

	table.scroll thead th {
		flex: 1 auto;
		display: block;
	}

	table.scroll thead tr th:last-of-type {
	  border-right: none;
	}

	table.scroll tbody {
		display: block;
		width: 100%;
		overflow-y: auto;
		height: auto;
		max-height: 280px;
		scrollbar-color: #7bb0e7 #ddd;
	}

	table.scroll thead tr,
	table.scroll tbody tr {
		display: flex;
	}

	table.scroll tbody tr td {
		flex: 1 auto;
		word-wrap: break;
	}

	table.scroll thead tr th,
	table.scroll tbody tr td {
		width: 50%;
		padding: 5px;
		text-align:left;
		border-bottom: 1px solid #eee;
	}

	/**** this is common to both scroll and scroll2 *****/
	th.sorttable_sorted:after,
	th.sorttable_sorted_reverse::after {
	  content: "\a\e886";
	  font-family: entypo-fontello;
	  font-size: 24px;
	  line-height: 0;
	  position: relative;
	  top: 4px;
	  text-align: center;
	}

	th.sorttable_sorted:after {
	  content: "\a\e883";
	}

	#sorttable_sortrevind,
	#sorttable_sortfwdind {
	  display: none
	}
}

Table via Grid Layout

DatumNameRankingPoints
17. April 1968Karl Heinz1135
28. Juli 1992Max3160
25. September 2001Paula2145
16. Mai 1962Günter5210
25. April 1932Hermann6225
02. März 1978Hanna7290
17. Oktober 1984Liam8310
01. Januar 1998Gunther9420
01. Jänner 1998Günter24189

custom class to table element for scrollable table – here it is :  scroll2

@media only screen and (min-width: 768px) {
  table.scroll2 {
    width: 100%;
    background-color: #fff;
    display: grid;
    grid-template-columns: 30% 30% 20% 20%;   /*** these are the column-width values ***/
    height: auto;
    max-height: 390px;
    overflow-y: scroll;
    scrollbar-color: #7bb0e7 #ddd;
  }

  table.scroll2 thead,
  table.scroll2 tbody,
  table.scroll2 tr {
    display: contents;
  }


  table.scroll2 th {
    position: sticky;
    top: 0;
    background: #3978b9;
    text-align: left;
    font-weight: normal;
    font-size: 1.1rem;
    color: white;
  }

  table.scroll2 th,
  table.scroll2 td {
    padding: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media only screen and (max-width: 767px) {
  table.scroll2 tr:nth-of-type(2n+1) > td{
      background-color: #e9e9e9 !important;
      color: #000;
      border: none;
  }
  table.scroll2 tr:nth-of-type(2n) > td{
    background-color: #f6f6f6 !important;
    color: #000;
    border: none;
  }
}