Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

3章<Excel>：高機能な表コンポーネント

ここまでに、独自のReactコンポーネントを作成し、汎用のDOMコンポーネントと併用してUIを組み立て描画できるようになりました。プロパティをセットし、ステートを管理し、コンポーネントのライフサイクルを知り、不必要な描画を避けてパフォーマンスを向上させることも学びました。

得られた知識をすべて使い、（Reactについてもう少し学びながら）データの表という実践的なコンポーネントを作成してみましょう。Microsoft Excelのバージョン0.1ベータ版の初期プロトタイプのように、表のコンテンツを編集でき、並べ替えや検索（フィルター）、エクスポートやダウンロードにも対応します。

3.1　まずはデータから

表とはデータを扱うためのものです。我々の高機能な表コンポーネント（Excelと呼ぶに値します）も、データの配列とヘッダーの配列を受け取って動作します。テストデータとして、Wikipediaから取得したベストセラー書籍のリスト（http://en.wikipedia.org/wiki/List_of_bestselling_books）を使います。

var headers = [ "タイトル", "著者", "言語", "出版年", "売上部数" ]; var data = [ ["The Lord of the Rings", "J. R. R. Tolkien", "English", "1954-1955", "150 million"], ["Le Petit Prince (The Little Prince)", "Antoine de Saint-Exupery", "French", "1943", "140 million"], ...