Zenn
🌟

【Jspreadsheet】基本的な使い方

2024/08/10に公開
jspreadsheet
tech

Javascriptの表ライブラリではgridjsを使うことが多いのですが、gridjsは表の上で値を編集できないという欠点があります。

これまでhandsontableを使ってきましたが、少々使いづらいと感じていました（会社でGASに組み込んで使っていますが、これって商用利用にあたらないのか?）

色々ライブラリを探したところ、Jspreadsheetが便利そうだと思いました

公式ドキュメント
https://bossanova.uk/jspreadsheet/v4/docs

Jspreadsheetの種類とインストール

無償版のJspreadsheet CE（MITライセンス）と、有償版のJspreadsheet Pro、クラウド版のJspreadsheet Cloudが提供されています。

また、VueやReact用のライブラリも提供されていますが、個人的にVue用よりJS版のほうが使いやすいと思います。

% npm install jspreadsheet-ce

vueコンポーネントでの使い方

TailwindCssを導入している場合、何点か注意点があります

枠線はcssで書く必要がある

td {
  @apply border
}

何も設定しないと、dropdownがテーブルの枠を重なってしまいます。
.jdropdown-containerにabsoluteを設定することで、テーブルの枠と重ならないようにできます。

また、dropdownにマウスが当たった時に背景色が変わるようにすると見やすいです

.jdropdown-container {
  @apply bg-base-300 shadow-lg mx-5 absolute
}

.jdropdown-close:hover {
  @apply bg-orange-50
}

.jdropdown-item:hover {
  @apply bg-orange-50
}

列の設定方法

以下のような感じで列を設定できます。

ちょっと不便な点として、例えばDB上ではフィールド名が'fetch_date'となっているフィールドを、列名としては'記事取得日'として表示させたいとします。

gridjsではid名とlabel名を設定できましたが、jspreadsheetでは指定はできません。
（以下の例では、DBでのフィールド名をkeyとして指定していますが、Columnにはkeyというプロパティはありません）

const columns:Column[] = [
  {title:'記事取得日',key:'fetch_date'},
  {title:'タイトル',key:'title',width:500},
  {title:'AI推測関心点',key:'ai_guess_interest_level',width:100},
  {title:'ユーザー評価関心点',key:'user_scored_interest_level',width:100, type:'dropdown',source:[1,2,3,4,5]},
]

Jspreadsheetでは単に並び順で列が指定されるため、以下のような形でcolumnsからarticleから必要な値を順番に取り出してやると良いです。

      data:articles.map(article=>{
        return columns.map(col=>article[col.key])
      })

サンプルコード

作成中のため、随時更新します

サンプルコード
<script setup lang="ts">
import jspreadsheet from 'jspreadsheet-ce';
import { Column, CustomEditor, JspreadsheetInstance } from 'jspreadsheet-ce';

const {data:articles} = await useFetch(`http://127.0.0.1:8000/articles`)

const columns:Column[] = [
  {title:'id',name:'article_id', visible:false},
  {title:'記事取得日',name:'publish_date',format:'YYYY/MM/DD', width:100},
  {title:'タイトル',name:'title',width:500},
  {title:'AI推測関心点',name:'ai_score',width:100},
  {title:'ユーザー評点',name:'user_score',width:100, type:'dropdown',source:[1,2,3,4,5]},
]

var jsp:JspreadsheetInstance;

onMounted(()=>{

  jsp = jspreadsheet(document.getElementById('my-spreadsheet') as HTMLDivElement, {
      columns:Object.assign(columns,{
        filters:true,
        allowComments:true,
        rowResize: true,
        columnDrag: true,
      }),
      data:articles.map(article=>{
        return columns.map(col=>article[col.key])
      })
  });  
})

Discussion