JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<table>
    <thead>
        <tr>
            <th> data - click here to sort </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <ul>
                    <li> 20 </li>
                    <ul>
                        <li> something </li>
                    </ul>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li> 10 </li>
                    <ul>
                        <li> something </li>
                    </ul>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li> 6 </li>
                    <ul>
                        <li> something </li>
                    </ul>
                </ul>
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li> 15 </li>
                    <ul>
                        <li> something </li>
                    </ul>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

CSS

table, td { border: #555 1px solid; }

JavaScript

/* Tablesorter Plugin */
(function($){$.extend({tablesorter:new
function(){var parsers=[],widgets=[];this.defaults={cssHeader:"header",cssAsc:"headerSortUp",cssDesc:"headerSortDown",cssChildRow:"expand-child",sortInitialOrder:"asc",sortMultiSortKey:"shiftKey",sortForce:null,sortAppend:null,sortLocaleCompare:true,textExtraction:"simple",parsers:{},widgets:[],widgetZebra:{css:["even","odd"]},headers:{},widthFixed:false,cancelSelection:true,sortList:[],headerList:[],dateFormat:"us",decimal:'/\.|\,/g',onRenderHeader:null,selectorHeaders:'thead th',debug:false};function benchmark(s,d){log(s+","+(new Date().getTime()-d.getTime())+"ms");}this.benchmark=benchmark;function log(s){if(typeof console!="undefined"&&typeof console.debug!="undefined"){console.log(s);}else{alert(s);}}function buildParserCache(table,$headers){if(table.config.debug){var parsersDebug="";}if(table.tBodies.length==0)return;var rows=table.tBodies[0].rows;if(rows[0]){var list=[],cells=rows[0].cells,l=cells.length;for(var i=0;i<l;i++){var p=false;if($.metadata&&($($headers[i]).metadata()&&$($headers[i]).metadata().sorter)){p=getParserById($($headers[i]).metadata().sorter);}else if((table.config.headers[i]&&table.config.headers[i].sorter)){p=getParserById(table.config.headers[i].sorter);}if(!p){p=detectParserForColumn(table,rows,-1,i);}if(table.config.debug){parsersDebug+="column:"+i+" parser:"+p.id+"\n";}list.push(p);}}if(table.config.debug){log(parsersDebug);}return list;};function detectParserForColumn(table,rows,rowIndex,cellIndex){var l=parsers.length,node=false,nodeValue=false,keepLooking=true;while(nodeValue==''&&keepLooking){rowIndex++;if(rows[rowIndex]){node=getNodeFromRowAndCellIndex(rows,rowIndex,cellIndex);nodeValue=trimAndGetNodeText(table.config,node);if(table.config.debug){log('Checking if value was empty on row:'+rowIndex);}}else{keepLooking=false;}}for(var i=1;i<l;i++){if(parsers[i].is(nodeValue,table,node)){return parsers[i];}}return parsers[0];}function...