依存関係のない HTML table ライブラリ marmooo/table を作った

依存関係のない HTML table ライブラリ @marmooo/table を作りました。



過去には記事も書いたりして色々な Grid ライブラリを探してきましたが、しっくり来る Grid ライブラリがないので自分で作りました。

ちなみに既存のライブラリで一番美しいと思うのは ka-table なのですが、 私は React を使う気がないので、使えません。仕方なく Vanilla JS で利用できるライブラリを作りました。

• JavaScript の Grid ライブラリ 2022 雑感
• JavaScriptのGridライブラリの機能比較とまとめ

基本的な思想は以下の通りです。

• 基本機能だけ提供 (ソート、列ごとのフィルタリング、ページネーション、列の表示/非表示切り替え、列のサイズ変更、セル編集)
• table タグを書き換えない
  • 応用機能は callback で自由に拡張可能
  • 既存の CSS Framework を自由に利用可能
• import で必要な機能だけロードして最適化
• ファイルサイズは非常にコンパクト
• きちんとチューニングして高速に動作

使い方のイメージはこちら。 事例ベースでわかりやすい 紹介ページ も作りました。 紹介ページ を見たほうがわかりやすいと思う。

import { Editable, Resizable, Sortable, Table } from "@marmooo/table";

const table = new Table({ data, columns });
const resizable = new Resizable(table);

table.options.plugins = [
  new Sortable(table, { resizable }), // pass `resizable` when using both, so a column-border drag isn't mistaken for a sort click
  resizable,
  new Editable(table),
];

table.render(container);

私が欲しかった機能はすべて詰め込みました。 このライブラリを使って既存のアプリを高速化していきます。