表計算ソフトウェアは様々な場面で使われています。日本においてはExcel職人と呼ばれる人たちによって、あらゆるドキュメントやアプリケーションがExcel上で展開されたりします。ちょっとしたデータベースとして使ったり、BIツールのUIになったりと大活躍していることでしょう。 そんな表計算インタフェースを自分のアプリケーションでも追加したいと考えたならば、Gridを使ってみましょう。

Gridの使い方

単純に一覧表示する例です。大量のデータでも高速に表示されます。

セルの結合も。

複数セルの選択。

セルは幅、高さは自由に変えられます。

セルのコピー、ペーストも可能です。

グラフを描画する例。

珍しいページネーションもサポートしています。

スプレッドシート風。

計算式もサポートしています。

ダークモードももちろん使えます。

ツリービュー。

GridはReactコンポーネントで作られています。システムの中でデータを一覧表示する利用はもちろん、作り込んで表計算風のUIにすることもできます。Reactアプリケーションに限定はされますが、セル同士の連動などは仮想DOMが使いやすいポイントになるかと思います。ぜひお試しを。

GridはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

Home | Rows n' Columns rowsncolumns/grid: Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets and more