業務システムでは常に一覧表示が求められます。一覧化されたデータは一気に内容を確認できるので便利ですが、次にはデータのソートや絞り込みが必要になるでしょう。さらにインラインで編集したいと要望されるかも知れません。 今回紹介するEditable React TableはReactの中で使える編集可能なテーブルコンポーネントです。

Editable React Tableの使い方

デモです。データが一覧表示されています。

直接入力の他、選択肢からの入力もできます。

新しいカラムを追加する際には、型を決めます。

Editable React Tableはデータの一覧に加えて、新しい行の追加やインラインでの編集ができます。カラムごとに型を決められるので、数字や文字列などの制御が可能です。並び替えもできますので、実用的なテーブルコンポーネントではないでしょうか。

Editable React TableはReact用、JavaScript製のオープンソース・ソフトウェア（MIT License）です。

archit-p/editable-react-table: React table built to resemble a database.