JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>FlexGrid Test</title>

    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Third Party -->
    <script src="scripts/vendor/knockout-3.4.0.js" type="text/javascript"></script>

    <!-- Wijmo -->
    <script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.input.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/5.20151.48/controls/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/5.20151.48/interop/knockout/wijmo.knockout.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.wijmo.com/5.20151.48/styles/wijmo.min.css" />

    <!-- <script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/wijmo.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/wijmo.input.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com/wijmo/5.20183.550/controls/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com/wijmo/5.20183.550/interop/knockout/wijmo.knockout.min.js" type="text/javascript"></script>
    <link href="https://cdn.grapecity.com/wijmo/5.20183.550/styles/wijmo.min.css" rel="stylesheet"/> -->

    
    <!-- </style> -->
</head>
<body>
    <h1>Test Flexgrid</h1>
    
    <div id="flexGrid" style="height: 800px; background: gray; padding-bottom: 5px;">
        <div data-bind="wjFlexGrid: { itemsSource: data, virtualizationThreshold: [0, 10000], scrollPositionChanged: scrollPositionChanged, initialized: initializedFunction...

CSS

body {
	background-color: #f8f8f8;
	font-family: -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: -apple-system-font, 'Segoe UI Light', 'Segoe UI', 'Roboto', sans-serif;
	font-weight: 300;
}

.header {
	background-color: #80044d;
	margin-bottom: 14px;
	padding: 12px 0px;
	color: #e3bfd5;
}

	.header h1 {
		font-size: 40px;
		line-height: 1;
		margin: 8px 0 5px 0;
		color: #fff;
	}

	.header img {
		float: left;
		margin: 0 10px 5px 0;
	}

h2 {
	margin: 15px 0 30px -12px;
}

h1, h2, h3, h4, h5, h6 {
	color: #80044d;
}

.pane-content {
	background-color: white;
	padding: 0px 8px;
	border: 1px solid #dddddd;
	border-top: none;
	white-space: pre;
	overflow: auto;
	font-size: 13px;
	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
}

/* set default grid height and some shadow */
.wj-flexgrid {
	height: 300px;
	background-color: white;
	margin-bottom: 12px;
}

/* create a 'custom-flex-grid' theme for the FlexGrid */
.custom-flex-grid .wj-header.wj-cell {
	background-color: #000;
	color: #fff;
	font-weight: bold;
	border-right: solid 1px #404040;
	border-bottom: solid 1px #404040;
}
.custom-flex-grid .wj-cell {
	border: none;
	background-color: #fff;
}
.custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
	background-color: #fff;
}
.custom-flex-grid .wj-state-selected {
	background: #000;
	color: #fff;
}
.custom-flex-grid .wj-state-multi-selected {
	background: #222222;
	color: #fff;
}

/* override the glyphs used to show sorting and grouping */
.custom-flex-grid .wj-glyph-up {
	background-image:url('../resources/ascending.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	width: 1em; height: 1em;
	border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px;
	opacity: 1;
}
.custom-flex-grid .wj-glyph-down {
	background-image:url('../resources/descending.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	width: 1em;...

JavaScript

var ViewModel = function() {
        
        this.scrollPositionChanged = function (data, sender, args) {
            sender.refreshCells();
        }
        
        // generate some random data
        function getData(count) {
            var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
            for (var i = 0; i < count; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length],
                    test: [ { p: 'xxxdddd'}, { p: 'holger'} ],
                    test1: 'test1',
                    boolean: true,
                    time: new Date('2014-11-25T15:32:14Z'),
                    active: i % 4 == 0,
                    html: '<div>' + 'Test' + i + '</div>'
                });
            }
            return data;
        }

        this.initializedFunction = function (data, sender, args) {
             sender.columnHeaders.rows[0].wordWrap = true;
             sender.columnHeaders.rows[0].height = 80;
             sender.virtualizationThreshold = [150, 150];
             //As soon as I set the itemFormatter, the template cells don't work anymore...
            //  sender.itemFormatter = function(panel, r, c, cell){
            //     if(panel.cellType == 4 || panel.cellType == 3)
            //      {
            //          cell.innerHTML = '<input type=\"checkbox\" />';
            //      }               
            // };
            sender.formatItem.addHandler((s,e)=>{
                if(e.panel.cellType == 4 || e.panel.cellType == 3)
                 {  
                 		
                     let dataItem = e.panel.rows[e.row].dataItem;
                     e.cell.innerHTML = '<input type=\"checkbox\" data-bind="checked: active"/>';
                     // dataItem may not exists for TopLeft panel
                     if(dataItem){
                         ko.applyBindings(dataItem, e.cell);
                     }
                 }
  ...