JSFiddle - React, Tailwind, and code Playground

by seong gyun jeon

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mohwa/[email protected]/dist/mohwa-ui.css">
<script src="https://cdn.jsdelivr.net/gh/mohwa/[email protected]/dist/mohwa-ui.js"></script>
<div style="margin-top:20px;margin-left: 10px">
	<table class="header-table">
		<thead>
			<tr>
				<th>Customer Name</th>
				<th>Salary</th>
				<th>Date</th>
				<th>log Name</th>
				<th>State Name</th>
				<th>Test Code</th>
			</tr>
		</thead>
	</table>
	<div class="infinity-area">
		<table class="data-table">
			<tbody></tbody>
		</table>
	</div>
</div>

CSS

html, body {
		font-family: "Courier New", Courier, monospace;
	}

	.header-table {
	  min-width: 1050px;
		border: gray 1px solid;
	}

	.header-table thead{
		background: #F5F5F5;
	}

	.header-table thead th{
		height: 50px;
	}

	.data-table {
	  /* min-width: 1050px; */
		border: gray 1px solid;
	}

	.header-table th, .data-table td{
		border: gray 1px solid;
		text-align: center;
	}

	.data-table tr:nth-child(odd){
		background: #F5F5F5;
	}

	.header-table th:nth-child(1), .data-table td:nth-child(1){
		width: 130px;
    word-break: break-all;
	}

	.header-table th:nth-child(2), .data-table td:nth-child(2){
		width: 120px;
	}

	.header-table th:nth-child(3), .data-table td:nth-child(3){
		width: 200px;
	}

	.header-table th:nth-child(4), .data-table td:nth-child(4){
		width: 200px;
	}

	.header-table th:nth-child(5){
		width: 200px;
	}
  
  .data-table td:nth-child(5){
    width: 200px;    
  }

	.header-table th:nth-child(6){
		width: 200px;
	}
  
  .data-table td:nth-child(6){
		width: 200px;      
  }

	.infinity-area{
		width: 100%;
		border-top: none;
	}

JavaScript

const list = [];

	for (var i = 0; i < 10000; i++){

	    list.push({
	        "Name": "Name" + i,
	        "logCode": "logCode" + i,
	        "logCodeName": "logCodeName" + i,
	        "date": new Date().getTime(),
	        "Salary": "Salary" + i,
	        "stateCode": "stateCode" + i,
	        "stateCodeName": "stateCodeName",
	        "testCode": "testCode" + i,
	        "testCodeName": "testCodeName" + i
	    });
	}


	new MohwaUI.InfinityScroll({
		elem: document.querySelector('.infinity-area'),
		data: list,
		cols: [
			{name: 'logCode', hidden: true},
			{name: 'stateCode', hidden: true},
			{name: 'testCode', hidden: true},
			{name: 'Name'},
			{name: 'Salary'},
			{name: 'date'},
			{name: 'logCodeName'},
			{name: 'stateCodeName'},
			{name: 'testCodeName'}
		],
		rowHeight: 40,
		pageSize: 5,
		onSelectCell: function(elem){
			console.log('cell', this, elem);
		}
	}).init();