JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/demo/demo.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<body>
    
    <div style="margin-bottom:10px">
        <a href="javascript:void(0)" id="loadLink" class="easyui-linkbutton" iconCls="icon-reload">Load datagrid</a>       
    </div>
    
    <div class="tableContainer">        
      <table id="tt"></table>
    </div>
</body>

CSS

html, body {
  height:100%;
}

.tableContainer {
  min-height:150px;
  max-height:300px;
}

JavaScript

$(function(){
  $('#tt').datagrid({
 		data: myData,
    fit:false,
    autoRowHeight: true,    
		columns: [{ field: 'inv', title:'', width: 1, hidden: true, notRemove: true },
    { field: 'date', title:'date', width: 120 ,  align: 'left', sortable: true, hidden:  false },
    { field: 'note', title:'note', width:  80, align: 'left', sortable: true, hidden: false },
    { field: 'price', title:'price', width: 60 , align: 'left', sortable: true, hidden:  false },
    { field: 'cost', title:'cost', width:  80 ,  align: 'left', sortable: true, hidden: false },
    { field: 'amount', title:'amount', width:  100, align: 'left', sortable: true, hidden: false }]
  });
});


// bind 'load' button
$('#loadLink').on('click', loaddata);

// populate datagrid
function loaddata() {
   $('#tt').datagrid('updateRow', {index:'0', row:{ 				    
   						"inv":"NULL",
               "date":"NULL",
               "name":"NULL",
               "note":"NULL",
               "amount":"NULL",
               "price":"NULL",
               "cost":"NULL"
   }}); 
}


myData = [{"inv":"INV0001","date":"2017-08-17","name":"Name1","note":"Note1","amount":86,"price":"122.88","cost":"10567.68"},{"inv":"INV0002","date":"2017-08-18","name":"Name2","note":"Note2","amount":73,"price":"168.78","cost":"12320.94"},{"inv":"INV0003","date":"2017-08-19","name":"Name3","note":"Note3","amount":77,"price":"102.36","cost":"7881.72"}];