JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js-data/employee-data-allDatatypes"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.scroll.css" rel="stylesheet"></link>

<div class="sampleContent">
		<div id="scrollableContent">
			<table style="height:500px;width: 800px; table-layout:fixed;" id="table-main">
				<colgroup></colgroup>
				<thead>
				</thead>
				<tbody></tbody>
			</table>
		</div>

		<fieldset id="rowNumber" class="explorer">
			<legend>Number of records: <span id="rowNum">100</span></legend>
			<div><div id="rowNumSlider" style="margin: 10px 5px 5px 10px; width: 200px;"></div></div>
		</fieldset>
		<fieldset id="colNumber" class="explorer">
			<legend>Number of columns: <span id="colNum">5</span></legend>
			<div><div id="colNumSlider" style="margin: 10px 5px 5px 10px; width: 200px;"></div></div>
		</fieldset>



		<fieldset id="behaviorOptionsMobile" class="explorer">
			<legend>Scroll behavior options - mobile</legend>
			<div><label for="inertiaDuration" style="display:inline"> Change inertia duration: </label><label class="currVal">1</label><div id="inertiaDuration" style="margin: 10px 5px 5px 10px; width: 200px;"></div> </div>
			<div><label for="inertiaStep" style="display:inline"> Change inertia step: </label><label class="currVal">1</label><div...

CSS

#scrollableContent {
			height: 400px;
			width: 100%;
			overflow: hidden;
			border: 1px solid #ccc;
		}

		#table-div {
			height: 400px;
			width: 600px;
			overflow: hidden;
		}

		#table-headers {
			height: 60px;
			width: 600px;
			overflow: hidden;
		}

		#table-main-headers {
			border: 1px solid #777777;
			height: 400px;
			width: 800px;
		}

		th {
			background-color: #888888;
			color: #ffffff;
			height: 30px;
		}

		fieldset.explorer {
			float: left;
			width: 44%;
		}

		fieldset.explorer > div {
			width:100%;
			padding-bottom:15px;

		}
		.currVal {
			display:inline !important;

		}

JavaScript

$(function () {

				//igScroll initialization
				$("#scrollableContent").igScroll({
					bigIncrementStep: 100
				});


				generateTableContent(100, 5);


				$("#rowNumSlider").slider({
					change: function (event, ui) {
						$("#rowNum").text(ui.value);
						generateTableContent(ui.value, $("#colNumSlider").slider("value"));
					},
					min: 25,
					max: 600,
					value: 100,
					step: 25
				});

				$("#colNumSlider").slider({
					change: function (event, ui) {
						$("#colNum").text(ui.value);
						generateTableContent($("#rowNumSlider").slider("value"), ui.value);
					},
					min: 1,
					max: 10,
					value: 5,
					step: 1
				})

				$("#alwaysVisible").change(function () {
					$("#scrollableContent").igScroll("option", "alwaysVisible", $(this).is(':checked'));
				});

				$("#scrollbarType").change(function () {
					$("#scrollableContent").igScroll("option", "scrollbarType", $(this).val());
				});

				$("#smoothingDuration").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "smoothingDuration", ui.value);
					},
					min: 1,
					max: 5,
					value: 1,
					step: 1
				});

				$("#smoothingStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "smoothingStep", ui.value);
					},
					min: 1,
					max: 5,
					value: 1,
					step: 1
				});

				$("#wheelStep").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "wheelStep", ui.value);
					},
					min: 50,
					max: 500,
					value: 50,
					step: 50
				});

				$("#inertiaDuration").slider({
					change: function (event, ui) {
						$(this).parent().find("label.currVal").text(ui.value);
						$("#scrollableContent").igScroll("option", "inertiaDuration",...