react-bootstrap-tableでcolumnが動的の場合のテーブル生成
React
のテーブルコンポーネントはどれがデファクトなのでしょうか。よくわからなかったので、目についたreact-bootstrap-table
を使ってみました。
ライブラリの取り込み
<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"} ] }
ライブラリ自体に動的にカラムを生成する機能はありませんが、下記にある通り、少しコードを書けば実現できます。
ただし、ここでの、やり取りでは述べられていませんが、React
の仮想DOMの管理上1つのカラムのデータはユニークである必要があり、そのカラムに対してisKey
属性で指定する必要があります。
下記がfetch
でAPI
アクセスして、テーブル反映までのコードになります。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); }); }