JSFiddle - React, Tailwind, and code Playground

by samdelagarza

HTML

<div id="bigtable"></div>

CSS

#bigtable {
	height: 200px;
	width: 400px;
	border: solid 1px black;
}

#bigtable .bigtable-headers {
	height: 20px;
}

#bigtable .bigtable-body {
	height: 180px;
}

.bigtable-container {
	overflow: hidden;
	position: relative;
}

.bigtable-container table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 1px;
	height: 1px;
}

.bigtable-headers {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.bigtable-headers th {
	height: 20px;
	text-align: left;
}

.bigtable-body td {
	overflow: hidden;
	line-height: 20px;
	margin: 0;
	padding: 0;
}

.bigtable-body {
	width: 100%;
	overflow-y: scroll;
	overflow-x: auto;
	position: relative;
}

JavaScript

/*
  * Copyright (c) 2010 James Brantly
  * 
  * Permission is hereby granted, free of charge, to any person
  * obtaining a copy of this software and associated documentation
  * files (the "Software"), to deal in the Software without
  * restriction, including without limitation the rights to use,
  * copy, modify, merge, publish, distribute, sublicense, and/or sell
  * copies of the Software, and to permit persons to whom the
  * Software is furnished to do so, subject to the following
  * conditions:
  *
  * The above copyright notice and this permission notice shall be
  * included in all copies or substantial portions of the Software.
  *
  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  * OTHER DEALINGS IN THE SOFTWARE.
  */

$( function() {
				new bigtable(
					'bigtable', // id
					['Column 0', 'Column 1', 'Column 2', 'Column 3', 'Column 4', 'Column 5', 'Column 6', 'Column 7', 'Column 8', 'Column 9'], // column labels
					1000000 // numRows
				);
			}); 

var bigtable = function(id, columns, numRows) {
	this._containerEl = document.getElementById(id);
	this._columns = columns;
	this._numRows = numRows;
	
	this._rowHeight = 20;
	
	this.createHTML();
	this.createEventHandlers();
	
	this.initializeTable();
	this.renderVisibleRows();
};

bigtable.prototype.createHTML = function() {
	// This creates HTML with the following structure:
	
	//<div class="bigtable-container">
	//	<div class="bigtable-headers">
	//		<table cellspacing="0" cellpadding="0" border="0">
	//			<thead>
	// 				<tr>
	// 					<th style="width: 100px;">Column Label</th>
	//...