JSFiddle - React, Tailwind, and code Playground

by waxwing

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS

/*style.css*/
.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 6000px; 
    height: 1000px
}


/******** Grid Global ********/
.kglabel {
    display: block;
    float: left;
    font-weight: bold;
    padding-right: 5px;
}
.kgNoSelect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/******** Grid ********/

.koGrid{
    background-color: rgb(253, 253, 253);
}

/******** Header ********/

.kgGroupPanel{
    background-color: rgb(234, 234, 234);
    overflow: hidden;
	border-bottom: 1px solid rgb(212,212,212);
}

.kgGroupPanelDescription{
	margin-top: 5px;
	margin-left: 5px;
}

.kgGroupList {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.kgGroupItem {
	float: left; 
}

.kgGroupElement {
	float: left;
	height: 100%; 
	width: 100%;
}

.kgGroupName {
    background-color: rgb(247,247,247);
    border: 1px solid rgb(212,212,212);
    padding: 3px 10px;
    float: left;
    margin-left: 0;
    margin-top: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
}

.kgGroupItem:first-child{
	margin-left: 2px;
}

.kgRemoveGroup {
    width: 5px;
    float: right;
    -moz-opacity: 0.4;
    opacity: 0.4;
    margin-top: -1px;
    margin-left: 5px;
}
.kgRemoveGroup:hover {
    color: black;
    text-decoration: none;
    cursor: pointer;
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.kgGroupArrow {
	width: 0; 
	height: 0; 
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid black;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
	float: right;
}

.kgTopPanel {
    position: relative;
    background-color: rgb(234, 234, 234);
	border-bottom: 1px solid rgb(212,212,212);
    z-index: 5; 
}
.kgHeaderContainer {
    position: relative;
    overflow: hidden;
    font-weight: bold;
}

.kgHeaderScroller...

JavaScript

function mainVm(){
    var self = this;
    this.myData = ko.observableArray([
        {name: "Moroni", age: 50, Col0: "value", Col1: "value", Col2: "value", Col3: "value", Col4: "value", Col5: "value", Col6: "value", Col7: "value", Col8: "value", Col9: "value", Col10: "value", Col11: "value", Col12: "value", Col13: "value", Col14: "value", Col15: "value", Col16: "value", Col17: "value", Col18: "value", Col19: "value", Col20: "value", Col21: "value", Col22: "value", Col23: "value", Col24: "value", Col25: "value", Col26: "value", Col27: "value", Col28: "value", Col29: "value", Col30: "value", Col31: "value", Col32: "value", Col33: "value", Col34: "value", Col35: "value", Col36: "value", Col37: "value", Col38: "value", Col39: "value", Col40: "value", Col41: "value", Col42: "value", Col43: "value", Col44: "value", Col45: "value", Col46: "value", Col47: "value", Col48: "value", Col49: "value", Col50: "value", Col51: "value", Col52: "value", Col53: "value", Col54: "value", Col55: "value", Col56: "value", Col57: "value", Col58: "value", Col59: "value", Col60: "value", Col61: "value", Col62: "value", Col63: "value", Col64: "value", Col65: "value", Col66: "value", Col67: "value", Col68: "value", Col69: "value", Col70: "value", Col71: "value", Col72: "value", Col73: "value", Col74: "value", Col75: "value", Col76: "value", Col77: "value", Col78: "value", Col79: "value"},
        {name: "Moroni", age: 50, Col0: "value", Col1: "value", Col2: "value", Col3: "value", Col4: "value", Col5: "value", Col6: "value", Col7: "value", Col8: "value", Col9: "value", Col10: "value", Col11: "value", Col12: "value", Col13: "value", Col14: "value", Col15: "value", Col16: "value", Col17: "value", Col18: "value", Col19: "value", Col20: "value", Col21: "value", Col22: "value", Col23: "value", Col24: "value", Col25: "value", Col26: "value", Col27: "value", Col28: "value", Col29: "value", Col30: "value", Col31: "value", Col32: "value", Col33: "value", Col34: "value", Col35: "value", Col36:...