JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.2/handsontable.full.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/6.2.2/handsontable.full.min.js"></script>
<div id="hot"></div>

JavaScript

$(function() {
	var data = [{
  	id : 1,
    name : 'リンゴ',
    price : 400,
    cost : 300
  }, {
  	id : 2,
    name : 'みかん',
    price : 300,
    cost : 200
  }, {
  	id : 3,
    name : 'ぶどう',
    price : 500,
    cost : 400
  }];
  
  var hot = new Handsontable($("#hot")[0], {
  	data : data,
    colHeaders : ["ID", "商品名", "価格"],
    colWidths : [60, 100, 100],
    columns : [{
    	data : 'id',
      type : 'numeric',
      readOnly : true
    }, {
    	data : 'name',
      type : 'text',
      readOnly : true
    }, {
    	data : 'price',
      type : 'numeric',
      readOnly : true
    }],
    minSpareRows : 0,
    manualColumnResize : true,
    manualRowResize : false,
    wordWrap : false
  });
});