JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

CSS

html, body {
    font-family: monospace;
    color: #333;
}
* {
    box-sizing: border-box;
}
div {
    float: left;
    padding: 10px;
}
table {
    margin: 5px 0;
    border: 1px solid #ccc;
}
th {
    text-align: right;
}
th, td {
    padding: 2px 5px;
    border-right: 1px solid #ccc;
}
th:last-child, td:last-child {
    border-right: 0;
}
tr:nth-child(2n+1) {
    background-color: #eee;
}

JavaScript

/**
 * Bubble sort with advanced comparator selection
 * @param object	array	Array or object to sort
 * @param function	compare	Comparator function. Return nested value when requested
 *
 * Example usage:
 * // Sort by second value in each array
 * var toSort = {[0,1],[0,5][4,2],[0,8]};
 * var sorted = bubbleSort(toSort, function(v){ return v[1]; });
 * // Returns {[0,1],[4,2],[0,5],[0,8]}
 */
bubbleSort = function (array, compare) {
    var sorted = false;

    // Default compare function
    if (typeof compare !== 'function') {
        compare = function (val) {
            return val;
        }
    }
    
    // Single bubble swap step
    var bubbleStep = function (array) {
        for (var i = 0; i < a.length - 1; i++) {
            if (compare(array[i]) > compare(array[i + 1])) {
                var swapUp = array[i],
                    swapDown = array[i + 1];
                array[i] = swapDown;
                array[i + 1] = swapUp;
                return array;
            }
        }
        sorted = true;
        return array;
    }

    // Loop bubble steps
    var sortingLoop = function () {
        array = bubbleStep(array);
        if (!sorted) {
            sortingLoop();
        }
    };
    sortingLoop();

    return array;
}

console.clear();
// Generate a random array
var a = [], // Also works with objects {}
    n = 100; // Length of array
var string = 'abcdefghijklmnopqrstuvwxyz0123456789';
var charArray = string.split('');
for (var i = 0; i < n; i++) {
    // Stepped output
    //a[i] = [i, (i % 3) + 1];
    
    // Linear output
    //a[i] = [0, i];
    
    // Noisy linear output
    //a[i] = [i, i * Math.floor(Math.random() * 10)];
    
    // Random
    a[i] = [i, Math.floor(Math.random() * n)];
    
    // Random string
    //a[i] = [i, charArray[Math.floor(Math.random() * charArray.length)] + charArray[Math.floor(Math.random() * charArray.length)] + charArray[Math.floor(Math.random() * charArray.length)]];
}

var renderArray =...