Grid.jsを使ってみた

　PureJSで使える。ライブラリ依存なし。vueなどのライブラリでも使える。

成果物

• DEMO
• github

コード

<div id="grid"></div>

window.addEventListener('load', (event) => {
    new gridjs.Grid({
      columns: [
        "Name", "Email", "Age", 
        {
            name:"Birth",
//            formatter: (cell) => `${cell.toISOString()}`
            formatter: (cell) => `${cell.toLocaleString()}`
        }
      ],
      sort: true,
      data: [
        ["John", "john@example.com", 30, new Date(Date.parse(`2000-01-01 00:00:00`))], 
        ["Mark", "mark@gmail.com", 20, new Date(Date.parse(`2000-01-01 00:00:01`))],
        ["Eoin", "eoin@gmail.com", 120, new Date(Date.parse(`2000-01-01 00:00:02`))],
        ["Sarah", "sarahcdd@gmail.com", 55, new Date(Date.parse(`2000-01-01 00:00:03`))],
        ["Afshin", "afshin@mail.com", 99, new Date(Date.parse(`2000-01-01 00:00:04`))]
      ]
    }).render(document.getElementById("grid"));
});

特徴

• 依存ライブラリ：なし（vueなどのライブラリにも対応しているらしい）
• データ形式：二次元配列

残念

• 複数キーでソートできる
• 項目ごとのフィルタリング機能がない
  • グローバル検索ならある
    • 単一キーワードのみ対応で複数ワードによるANDなどができない

対象環境

• 2021-02-20
• Raspbierry pi 4 Model B
• Raspberry Pi OS buster 10.0 2020-08-20 ※
• bash 5.0.3(1)-release

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux