読者です 読者をやめる 読者になる 読者になる

IT練習ノート

IT関連で調べたこと(実際は嵌ったこと)を書いています。

react-bootstrap-tableでcolumnが動的の場合のテーブル生成

Reactのテーブルコンポーネントはどれがデファクトなのでしょうか。よくわからなかったので、目についたreact-bootstrap-tableを使ってみました。

allenfang.github.io

ライブラリの取り込み

    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

要素の作成

    <div id="result"></div>

以下のようなデータをAPIで取得できるとします。

{ 
  colomuns : ["col_a", "col_b", "col_c"]
 .resultSet : [
    {"id" : 1, "col_a" : "val_foo_a", "col_b" : "val_foo_b", "col_c" : "val_foo_c"}
   ,{"id" : 2, "col_a" : "val_bar_a", "col_b" : "val_bar_b", "col_c" : "val_bar_c"}
   ,{"id" : 3, "col_a" : "val_bazz_a", "col_b" : "val_bazz_b", "col_c" : "val_bazz_c"}
  ]
}

ライブラリ自体に動的にカラムを生成する機能はありませんが、下記にある通り、少しコードを書けば実現できます。

github.com

ただし、ここでの、やり取りでは述べられていませんが、Reactの仮想DOMの管理上1つのカラムのデータはユニークである必要があり、そのカラムに対してisKey属性で指定する必要があります。

下記がfetchAPIアクセスして、テーブル反映までのコードになります。id列をユニークキーとしています。

function query() {
  fetch('http://127.0.0.1:8081/query', {
    method : 'POST',
    mode   : 'cors',
    headers: new Headers({"Content-Type" : "application/x-www-form-urlencoded"}),
    body   : 'foo=bar'
  }).then(function(response) {
    response.json().then(
      (json) => {
        ReactDOM.render(
          <BootstrapTable data={json.resultSet} striped hover>
             {json.columns.map(
                (name) => <TableHeaderColumn 
                                 dataField = { name } 
                                 isKey     = { name === "id" } >
                              { name }
                          </TableHeaderColumn>
             )}
          </BootstrapTable>,
          document.getElementById('result')
        ); // render
      }); // then
  }).catch(function(err) {
    console.log(err);
  });
}