JSFiddle - React, Tailwind, and code Playground

HTML

<div id="listHolder"></div>

CSS

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0
}
body {
    overflow:hidden;
}
.listItem {
    border : 1px solid gray;
    margin : 1px 0px;
    display : inline-block;
}
#listHolder {
    position:relative;
    height:100%;
    width:100%;
    background-color:#CCC;
    box-sizing:border-box;
    overflow:auto;
}
#view {
    position: absolute;
}
#view, #view * {
    overflow : hidden;
    white-space : nowrap;
}
#view > div {
    width : 100%;
}
#col-fixed {
    position: fixed;
    left:0px;
    top:0px;
    z-index:1;
    background-color:white !important;
    display:inline-block;
}
#head-fixed {
    position: fixed;
    left:0px;
    top:0px;
    z-index:2;
    background-color:#F2F2F2 !important;
    width:100%;
}

JavaScript

function matrix(data, holder, config) {
    'use strict';
    var idConfig = {
        listId: "listHolder",
        viewID: "view",
        heightForcer: "heightForcer",
        colFixed: "colFixed",
        headFixed: "headFixed",
        dataCell: "dataCell",
        rowHeader: "headRow"
    }
    var lastR, lastC;
    var getById = function (a) {
        return document.getElementById(a);
    }
    holder = idConfig.parent = (typeof holder == "string" ? getById(holder) : holder);
    //copy the config, substituting defaults
    config = {
        cellWidth: (config && config.cellWidth) || 150,
        headWidth: (config && config.cellWidth) || 150,
        rowHeight: (config && config.rowHeight) || 22,
    };

    var temp = "<div id='" + (idConfig.parent.id + "_" + idConfig.listId) + "'>";

    // Set up the data Holder


    if (!data) {
        //create 50000x26 array for data
        data = (function (length, depth) {
            var output = new Array(length);
            var startAt;
            var head = [],
                cols = [];
            for (var index = 0; index < length; ++index) {
                //var startAt = Math.random().toString(36).substring(5);
                var startAt = index + ':';
                output[index] = new Array(depth);
                var temp = [];
                for (var index2 = 0; index2 < depth; ++index2) {
                    if (index2 <= 2) {
                        temp.push(startAt + "h" + index2);
                    }
                    output[index][index2] = startAt + index2;
                }
                cols.push(temp);
            }
            var head = output.slice(0, 3);

            return {
                output: output,
                head: head,
                cols: cols
            }
        })(50000, 26);
    }
    console.log(data);

    var colFixed = data.cols;
    var hFixed = data.head;
    data = data.output;
    //guard against 0 length arrays
    if (data.length < 1 ||...