JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="top">
		<div id="messageNotification">
    		<div id="notificationContent">
   			 </div>
		</div>
		<div id="top-left-static">
			<div class="backButton">
				<a title="back" href="/cs105/livelink?func=llworkspace">
					<img src="/img/rebicons/Return Filled-50.png" style="width:30px;height:30px;"><br>Назад
				</a>
			</div>		
		</div>
		<div>
			<p>Header</p>
		</div>
		<div class="navbar">
		</div>	
	</div>	
    <div id='main' class="bordered">
    	<div class="mainHeader">
		</div>
		<div id="mainSplitter">
            <div class="splitter-panel" id="left" style="overflow-x: auto;">
				<div class="param">
					<input width="236px" id="BCinput" value="">
					<!--div id="doctype"></div-->
				</div>
				<div id="scannedGrid">
				</div>
				<div id='Menu'>
        			<ul>
            			<li>1</li>
            			<li>2</li>
        			</ul>
       			</div>	
			</div>
			<div id='right' style="overflow-x: auto;">
				<div id="stats-static">
					total: 38  
				</div>			
			</div>
		</div>
	</div>	
</body>

CSS

html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

	#top-left-static{
	    position: fixed;
	    z-index: 999;
	    top: 0;
	    left: 0;
	    margin-left: 0.5em;
	    margin-top: 0.5em;
	    background-color: white;
		}

	#stats-static{
	    position: fixed;
	    z-index: 999;
	    bottom: 0;
	    /* margin-left: 0.5em; */
	    /* margin-top: 0.5em; */
	    background-color: white;
	    text-align: center;
	    font-family: 'segoe ui', arial, sans-serif;
	    border-left: 1px solid lightgray;
	    border-top: 1px solid lightgray;
	    border-right: 1px solid lightgray;
	    padding: 5px;
		}		

	#main {
	    height: 100%;
	    width: 100%;
	    margin: 0px;
	    padding: 0px;
    }

	#top {
	    width: 50%;
	    margin: auto;
	}

	#top p {
	    line-height: 0;
	    text-align: center;
	    font: 1.6em bold Arial, Helvetica, sans-serif;
	    color: rgb(136,60,172);
	    letter-spacing: 1px;
	}



	.navButton {
		display:inline-block;
		display:-ms-inline-block;
		/*background-color:lavender;*/
		border-radius: 8px;
		padding: 5px;
		font-family:Verdana, Arial, sans-serif;
		font-size:12px;
		color: rgb(136,60,172);	
		margin-bottom:10px;	
	}

	.mainHeader {
		text-align: center;
		margin:10px 50px 10px 10px;
		font-family:Verdana, Arial, sans-serif;
		font-size:15px;
		letter-spacing: 1px;
		color: black;		
	}

	.navButton:hover {
		background-color:lavender;
		cursor: pointer;
	}

	.navbar {
		text-align: center;
		margin-bottom: 10px;
	}

	a img {
	    margin-left: 5px;
	    border: 0px;
	    /* width: 5px; */
	}

	#grid{
		width: 100%;
		height:80%;
	}

	.cleandatebtn {
		margin-left:5px;
	}

	.dateparam {
		margin-right:100px;
	}

	.processed {
	color:green;
	/*background-color:lightyellow;*/
	}	

	.navBarImg {
		width:40px;
		height:40px;
	}

	.bordered {
	    /*height:300px;*/
	    width:300px;
	    border-top:1px solid lightgray;
	    /*background: linear-gradient(to bottom, white 5%, lightgray...

JavaScript

function initNewSkedGrid() {

		var GridCounter = Object.entries(gridObj).length + 1

		var gridName = "skGrid_"+GridCounter

		var container = document.getElementById('right');

		container.innerHTML += "<div id="+gridName+"></div>";

		gridObj[GridCounter] = {'Data':undefined,'DataSource':undefined,'DataAdapter':undefined}

		gridObj[GridCounter]['Data'] = 

		[{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":2},{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":1},{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":1},{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":2},{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":1},{"barcode":"0123405987475874","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":1},{"barcode":"","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":3},{"barcode":"","doctypename":"Ppppppp pppppppppp pppppppppp ppppppppp","doctypeid":"0001","fio":"aaaaaa aaaaaa aaaaaaaa","status":3}]	

        gridObj[GridCounter]['DataSource'] =
        {
            localdata: gridObj[GridCounter]['Data'],
            datafields:
            [
                { name: 'barcode', type: 'string' },
                { name: 'doctypename', type: 'string' },
                { name: 'doctypeid', type: 'String' },
                { name: 'fio', type: 'String' },
                { name: 'status', type: 'String' }
            ],
            datatype:...