高品質なグリッドライブラリの存在は大事です。多くのWebシステムでは一覧表示機能が求められ、その表示したデータをストレスなくメンテナンスできる仕組みが求められるからです。あまり多機能すぎても使いこなせず、必要十分な機能だけが実装されている必要があります。 今回紹介するRevoGridはExcelライクにデータをメンテナンスできるグリッドライブラリです。

RevoGridの使い方

デモです。

ドラッグ&ドロップによる並び替え。

セル内での編集ももちろん可能です。

色の文字を変えると、それが実際の色として反映されます(黄色くなっているセルです)。

日付コンポーネントもあり。

絞り込み機能があります。これはA列が2からはじまるものだけにした例です。

左右に固定カラムを指定できます。

RevoGridがExcelレベルかと言われると疑問符ですが、データメンテナンスを行う上で十分な機能が備わっているのは間違いありません。特にドラッグ&ドロップによる並び替えは、担当者によってはとても便利な機能になるでしょう。さらに便利なのは、ReactやAngularといった最近のモダンなフレームワークが不要ということです。純粋なJavaScriptの中で利用できます。公式ドキュメントではVueアプリの中で使うコードも紹介されています。

RevoGridはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

RevoGrid - Excel like data grid component revolist/revogrid: Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance ?