JSFiddle - React, Tailwind, and code Playground

by bilyejd

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/css/theme.blue.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css">
<div id="main">

	<h1>Demo</h1>
	<div id="demo"><table class="tablesorter">
	<thead>
		<tr>
			<th>Name</th>
			<th>Fake Population</th>
		</tr>
	</thead>
	<tbody>
		<tr data-tt-id='europe'><td>Europe</td><td>300</td></tr>
		<tr data-tt-id='netherlands' data-tt-parent-id='europe'><td>Netherlands</td><td>10</td></tr>
		<tr data-tt-id='molenhoek' data-tt-parent-id='netherlands'><td>Molenhoek</td><td>1</td></tr>
		<tr data-tt-id='nijmegen' data-tt-parent-id='netherlands'><td>Nijmegen</td><td>2</td></tr>
		<tr data-tt-id='germany' data-tt-parent-id='europe'><td>Germany</td><td>50</td></tr>
		<tr data-tt-id='berlin' data-tt-parent-id='germany'><td>Berlin</td><td>8</td></tr>
		<tr data-tt-id='northAmerica'><td>North America</td><td>550</td></tr>
		<tr data-tt-id='us' data-tt-parent-id='northAmerica'><td>United States</td><td>450</td></tr>
		<tr data-tt-id='newYork' data-tt-parent-id='us'><td>New York</td><td>5</td></tr>
		<tr data-tt-id='losAngeles' data-tt-parent-id='us'><td>Los Angeles</td><td>7</td></tr>
		<tr data-tt-id='canada' data-tt-parent-id='northAmerica'><td>Canada</td><td>100</td></tr>
		<tr data-tt-id='toronto' data-tt-parent-id='canada'><td>Toronto</td><td>4</td></tr>
		<tr data-tt-id='otawa' data-tt-parent-id='canada'><td>Otawa</td><td>3</td></tr>
		<tr data-tt-id='africa'><td>Africa</td><td>500</td></tr>
		<tr data-tt-id='egypt' data-tt-parent-id='africa'><td>Egypt</td><td>100</td></tr>
		<tr...

JavaScript

/**!
* TableSorter 2.13.3 - Client-side table sorting with ease!
* @requires jQuery v1.2.6+
*
* Copyright (c) 2007 Christian Bach
* Examples and docs at: http://tablesorter.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* @type jQuery
* @name tablesorter
* @cat Plugins/Tablesorter
* @author Christian Bach/[email protected]
* @contributor Rob Garrison/https://github.com/Mottie/tablesorter
*/
/*jshint browser:true, jquery:true, unused:false, expr: true */
/*global console:false, alert:false */
!(function($) {
    "use strict";
    $.extend({
        /*jshint supernew:true */
        tablesorter: new function() {

            var ts = this;

            ts.version = "2.13.3";

            ts.parsers = [];
            ts.widgets = [];
            ts.defaults = {

                // *** appearance
                theme            : 'default',  // adds tablesorter-{theme} to the table for styling
                widthFixed       : false,      // adds colgroup to fix widths of columns
                showProcessing   : false,      // show an indeterminate timer icon in the header when the table is sorted or filtered.

                headerTemplate   : '{content}',// header layout template (HTML ok); {content} = innerHTML, {icon} = <i/> (class from cssIcon)
                onRenderTemplate : null,       // function(index, template){ return template; }, (template is a string)
                onRenderHeader   : null,       // function(index){}, (nothing to return)

                // *** functionality
                cancelSelection  : true,       // prevent text selection in the header
                dateFormat       : 'mmddyyyy', // other options: "ddmmyyy" or "yyyymmdd"
                sortMultiSortKey : 'shiftKey', // key used to select additional columns
                sortResetKey     : 'ctrlKey',  // key used to remove sorting on a column
               ...