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:absolute;
			left:0px;
			top:0px;
			z-index:1;
			background-color:white !important;
			display:inline-block;
		}
		#head-fixed{
			position:absolute;
			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 || data[0].length < 1)
				return;
		
			var areaForcer = holder.appendChild(holder.ownerDocument.createElement('div'));
		
			var view = null, _v = null;
			function refreshWindow() {
				if (view == null){
					view =...