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/apiviewer.js"></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>

<div class="w100 igui-filter-section s-clearfix">

		<div class="w33 min-173 pr30 border-box igui-filter-f-left">
			<div class="igui-filter-modul">
				<div class="mb10 w100 s-clearfix">
					<label class="igui-filter-f-left">Rows Count: </label>
					<span class="igui-filter-f-right" id="rowsLbl">5000</span>
				</div>
				<div id="dataCount"></div>
			</div>

			<div class="igui-filter-modul">
				<div class="mb10 w100 s-clearfix">
					<label class="igui-filter-f-left">Columns Count: </label>
					<span class="igui-filter-f-right" id="colsLbl">10</span>
				</div>
				<div id="colCount"></div>
			</div>
		</div>

		<div class="min-173 w33 pr30 border-box igui-filter-f-left igui-filter-checkbox">
			<div class="mb10 s-clearfix">
				<input class="mr5 igui-filter-f-left" id="pagingCheck" type="checkbox"></input>
				<label class="ml5 igui-filter-f-right" for="pagingCheck">Enable Paging </label>

			</div>
			<div class="mb10 s-clearfix">
				<input class="igui-filter-f-left" id="filteringCheck" type="checkbox"></input>
				<label class="ml5 igui-filter-f-right" for="filteringCheck">Enable Filtering </label>
			</div>
			<div class="mb10">
				<label class="mb10 d-block" for="virt">Virtualization Type: </label>
				<input id="virt"...

CSS

.s-clearfix {
			content: "";
			display: table;
			clear: both;
		}

		.w100 {
			width: 100%;
		}

		.w33 {
			width: 33.3%;
		}

		.mb10 {
			margin-bottom: 10px;
		}

		.ml5 {
			margin-left: 5px;
		}

		.min-173 {
			min-width: 173px;
		}

		.pr30 {
			padding-right:30px;
		}

		.border-box {
			box-sizing: border-box;
		}

		.igui-filter-f-left {
			float: left;
		}

		.igui-filter-f-right {
			float: right;
		}

		.igui-filter-modul {
			margin: 0 0 15px 0;
			border:1px solid  #f1f1f1;
			padding: 10px;
		}

		.igui-filter-section {
			margin-bottom: 20px;
		}

		.d-block {
			display: block;
		}

		.igui-filter-checkbox label  {
			cursor: pointer;
		}

JavaScript

$(function () {
var apiViewer = new $.ig.apiViewer();

		$(function () {
			var dataBind = true,
				startRender,
				endRender,
				rowsRendering,
				rowsRendered,
				dataFetching,
				dataFetched,
				filtering,
				paging,
				virt,
				opts = {};

			function setUpOptions(virt, paging, filtering, colCount) {
				var opts = {}, columns = [], features = [], cols;

				columns.push({ headerText: "ID", key: "ID", dataType: "number", width: "200px" });
				columns.push({ headerText: "First Name", key: "FirstName", dataType: "string", width: "200px" });
				columns.push({ headerText: "Last Name", key: "LastName", dataType: "string", width: "200px" });
				columns.push({ headerText: "Company", key: "Company", dataType: "string", width: "200px" });
				columns.push({ headerText: "Email", key: "Email", dataType: "string", width: "200px" });
				columns.push({ headerText: "Position", key: "Position", dataType: "string", width: "200px" });
				columns.push({ headerText: "Age", key: "Age", dataType: "number", width: "200px" });
				columns.push({ headerText: "Address", key: "Address", dataType: "string", width: "200px" });
				columns.push({ headerText: "Phone", key: "Phone", dataType: "string", width: "200px" });
				columns.push({ headerText: "Picture", key: "Picture", dataType: "string", width: "200px" });
				columns.push({ headerText: "Is Active", key: "IsActive", dataType: "bool", width: "200px" });
				columns.push({ headerText: "Balance", key: "Balance", dataType: "string", width: "200px" });
				columns.push({ headerText: "Eye Color", key: "EyeColor", dataType: "string", width: "200px" });
				columns.push({ headerText: "Registered", key: "Registered", dataType: "bool", width: "200px" });
				columns.push({ headerText: "Latitude", key: "Latitude", dataType: "number", width: "200px" });
				columns.push({ headerText: "Longitude", key: "Longitude", dataType: "number", width: "200px" });
				columns.push({ headerText: "Tags", key: "Tags", dataType: "string",...