ショコラ
JavaScript スプレッドシートを使うには？
無料なのでjexcelV4を使ってみる。
もっさん先輩
HTML の head に JavaScript と css を含める。
<script src="https://bossanova.uk/jspreadsheet/v4/jexcel.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css">
<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v4/jexcel.css" type="text/css">スプレッドシートを配置することろを決める。私の場合は livewire で使用するので wire:ignore をつけました。
<div id="spreadsheet" wire:ignore></div>JavaScript部分は↓これです。
var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
data:[
['もっさんの剣','1000',2000,1,'切れ味ヤバイ'],
],
columns: [
{ type: 'text', title:'商品名', width:200 },
{ type: 'numeric', title:'買取金額（税込み）', width:100 },
{ type: 'numeric', title:'販売金額（税抜き）', width:100 },
{ type: 'numeric', title:'数量', width:100 },
{ type: 'text', title:'販売コメント', width:300 },
],
tableOverflow: true, // スクロールバー表示
tableHeight: '300px', // 縦
tableWidth: '800px', // 横
allowInsertColumn: false, // 列の追加
allowDeleteColumn: false, // 列の削除
minDimensions: [5,100], // 列、行
defaultRowHeight: 20, // 行の高さ
})Livewireでボタンをクリックしたときにデータを送るなら、↓これです。
<button type="button" class="ui button" wire:click="soushin_btn(spreadsheet.getData())">
送信
</button>以上