JSFiddle - React, Tailwind, and code Playground

random list for tinysort tests

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.js"></script>
Finally I could sort my codes as non-numeric stuff:
<div id="mydiv">

</div>
<ul id="xcst">
  <li>mycode.1-811</li>
  <li>mycode.1.321</li>
  <li>mycode.1-5234</li>
  <li>mycode.2.2</li>
  <li>mycode.2-123</li>
  <li>mycode.2.007</li>
  <li>mycode.1.0</li>
  <li>mycode.1-1</li>
</ul>

CSS

li {
  font: monospace;
}

JavaScript

var data = {"names":["Saúl","Sàcha","Sonia","Sónia","alex","Álex",""]};
var nomes="manuel,sonia,sónia,"
function createlist(items=10) {
  var md=document.getElementById("mydiv");
  var rollo="";
  rollo+="<ul>";
	for(var i=0;i<items;i++) {
    rollo+= i>0 ? "; " : "";
  	rollo+="<span value="+i+">"+"<span>"+Math.random()+ "</span>"+"</span>";
  }
  rollo+="</ul>";
  md.innerHTML+= rollo + ("table ready");
}
function sortCodes(a,b) {
      var sa=a.elm.textContent.toString();
      var sb=b.elm.textContent.toString();
      return sa===sb ? 0 : (sa>sb?1:-1);
}
function sortByLength(a,b) {
    var lenA = a.elm.textContent.length,
      lenB = b.elm.textContent.length;
    return lenA === lenB ? 0 : (lenA > lenB ? 1 : -1);
}
tinysort('ul#xcst>li', {
  sortFunction: sortByLength
});
createlist(12);