JSFiddle - React, Tailwind, and code Playground

by qeremy

HTML

<div id="container"></div>

<script>
window.onload = function() {
    var cols = rows = [],
         months = ["","January","February","March","April","May","June","July","August","September","October","November","December"],
         names = ["Ali Varlı","Kerem Güneş","Mustafa Bozok","Tayfur Evcimen","Fırat Başaran","Zeki Tuğrul","Zeki Tunç"]
    
    cols = [
        {key: "id", label: "ID", sortable:true},
        {key: "months", label: "Months", sortable:true},
        {key: "name", label: "Name", sortable:true},
        {key: "revenue", label: "Revenue", sortable:true}
    ]
    // rows = [
        // [{key: "id", value:1},
         // {key: "months", value:"January"},
         // {key: "name", value:"Kerem Güneş"},
         // {key: "revenue", value:55}],
        // [{key: "id", value:2},
         // {key: "months", value:"January"},
         // {key: "name", value:"Ali Kara"},
         // {key: "revenue", value:12}],
        // [{key: "id", value:3},
         // {key: "months", value:"January"},
         // {key: "name", value:"Celal Candan"},
         // {key: "revenue", value:63}],
    // ]
    for (var i = 1; i <= 12; i++) {
        rows.push([
            {key: "id", value: i},
            {key: "months", value: "2012 "+ months[i]},
            {key: "name", value: names[~~(Math.random() * names.length)]},
            {key: "revenue", value: "% "+ ~~(Math.random() * 100 * i)}
        ])
    }

    var g = new Grid("container", cols, rows)
    g.render()
    // log(g)
}
</script>

CSS

* {font:13px/1.5em trebuchet ms}

JavaScript

function log() { console.log.apply(console, arguments); }
function $(id) { return document.getElementById(id); }
function isArray(x) { return Object.prototype.toString.call(x) === "[object Array]"; }
function extend(target, source) { for (var i in source) if (source.hasOwnProperty(i)) target[i] = source[i]; return target; }
function forEach(object, callback) {
    if (isArray(object)) {
        for (var i = 0, len = object.length; i < len;) {
            callback(object[i++], i, object);
        }
    } else if (typeof object === "object") {
        for (var key in object) {
            callback(object[key], key, object);
        }
    } else {
        throw "forEach acceps only Array's or Object";
    }
}

function isDigit(value) {
    return /^[\d]+$/i.test(value);
}

(function(window, undefined) {

    var document = window.document;

    var sortFunctions = {
        asc: function(a, b) {
            return isDigit(a.sortValue)
                ? a.sortValue - b.sortValue
                : a.sortValue > b.sortValue;
        },
        desc: function(a, b) {
            return isDigit(a.sortValue)
                ? b.sortValue - a.sortValue
                : b.sortValue > a.sortValue;
        },
    };

    var sort = function(array, sortKey, cmd) {
        var result = {}, sortArray = [], dataValue, sortValue;
        forEach(array, function(object) {
            forEach(object, function(data) {
                if (data.key == sortKey) {
                    dataValue = ""+ data.value;
                    sortValue = dataValue.substring(dataValue.search(/\w/), dataValue.length);
                    sortArray.push({"sortValue": sortValue, "_stack": object});
                }
            });
        });
        forEach(sortArray.sort(sortFunctions[cmd || "asc"]), function(data, i) {
            result[i] = data._stack;
        });
        return result;
    };

    var createElement = (function() {
        var _el = document.createElement("div");
        return...