見出し画像

TWLogAIAN:データテーブルのパッケージの選択に悩む

twsnmp

今朝も４時から開発開始です。昨日は雪が降ってすごく寒いです。今朝は既に決めていたデータテーブルのパッケージの記事をnoteに書いて昨日途中だった新しいパソコンで仮想基盤を作ろうと思っていました。しかし、データテーブルのパッケージをもう少し調べていると、

というサイトを見つけました。Svelteで使えるものリストです。このサイトは便利そうです。その中にデータテーブルのパッケージのリストもありました。

今朝まで使おうと思っていたものもありますが、他にもあってもう少し試してみたくなりました。これで３時間悩みました。

 TWSNMPでデータテーブルはノードなどのリストやログの表示に使っています。復刻版のTWSNMPでは

を使いました。jQueryが必要なので今回は却下です。TWSNMP　FCでは、

を使いました。Vue環境用なので今回は使えません。
どちらも高機能なので、今回も同じくらいのものを探しています。
必要な機能は、

  • データからテーブル表示できる

  • ページ送りできる

  • ソートできる

  • フィルターできる、列単位でできるとなおよし

  • データ量が増えても大丈夫

  • ページ送りなどの表示を日本語にできる

のような感じだと思います。
最初に試したのが、

です。簡単に組み込めて動きました。

svelte-table

フィルターやソートの表示がいまいちです。ページ送りは自分で作る必要があるようです。なので却下です。
今朝まで、使おうと思っていたのが、

 です。

svelte-simple-datatables

ページ送りもできます。ソートもフィルターも可能です。組み込まれているCSSもOFFにできるので、Primerのデザインに合わせるのも可能でした。しかし、開発元のサイトがダウンしていたり、リサイズした時の表示が変だったりしてちょっと迷いがでいてきました。
そんな中今朝、もっと良さそうなパッケージを見つけました。

です。Svelteからも使えます。

https://gridjs.io/docs/integrations/svelte

Wails＋Sveleteの環境に組み込んで試してみました。

Grid.js

かなりいい感じです。機能も他に比べて格段に豊富です。問題はダークモードに対応していないことです。自分でCSSを準備する必要がありそうです。
でも、これが一番良さそうなので使うことに決めました。

Grid.jsのインストール

npmで可能です。昨日までのPrimerの環境にインストールします。

$cd frontend
$npm install gridjs gridjs-svelte

App.svelteの編集

<script>
  import Grid from "gridjs-svelte";
  import "gridjs/dist/theme/mermaid.css";
  const data = [
    { name: "John", email: "john@example.com" },
    { name: "Mark", email: "mark@gmail.com" },
  ]  
</script>
<main>
  <Grid data={rows} sort pagination search />
</main>

ぐらいで動作します。ページ送りはデータ数を増やしてください。
ダークモードに対応したCSSは自分で作ることにします。

明日に続く


いいなと思ったら応援しよう！

twsnmp
開発のための諸経費（機材、Appleの開発者、サーバー運用）に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。