Webの業務システムなど、データを一覧表示する機会は多いです。そうやって表示されたデータに対する要望として、その場で編集したいというニーズが出てきます。もちろん、そう簡単なものではありません。 そこで使ってみたいのがeditableCellです。セルごとの編集に加えて、データの集計も行うライブラリです。

editableCellの使い方

表示されている限りは通常のHTMLと変わりません。

カーソルはマウスで移動できます。

複数行の選択もできます。

そしてダブルクリックしたり、キーボードから入力して値を変更できます。

さらに値を変更した時に集計結果を変えたり、選択している値を集計できます。

editableCellは簡易的なExcelのように扱うことができます。編集後はもちろんサーバにデータを飛ばす必要がありますが、ユーザにとっては見たままに編集できて、それが即座に反映される便利な機能に感じられるでしょう。

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

‎gnab.github.io/editableCell/ gnab/editableCell: A component for turning table cells into selectable, editable cells, behaving much like cells in Microsoft Excel.