ここではひとまず自動的に挿入されたHTMLタグをそのまま利用しますが、実際にHTMLを自分で記述してデザインする場合には「これらの中にデータはどのような形式で格納されているか?」、「実際にどの様なデータが入っているか?」を確認する必要が出てくる場合があります。その方法についてはこの後の「データの確認によるデバッグ」の項でご説明させて頂きます。画面右下のプロパティパネルの「Edit」ボタンをクリックします。「Data」セクションをドラッグし、右側の「Appearance」セクションの上にドロップします。「Data」セクションのプロパティを開き、追加可能な軸とメジャーの最小数・最大数を以下の形で設定して「Done」をクリックします。「Sort」セクションをドラッグし、右側の「Data」セクションの下にドロップします。画面右下のプロパティパネルの「Edit」ボタンをクリックしてプロパティの編集を完了します。プロパティに軸とメジャーを設定すると、プレビューにテーブルが表示されることを確認します。データの確認によるデバッグここまででテーブル形式でのデータの表示方法をご紹介しました。先ほど触れた通り、HTMLを自分で実際に記述してデザインする場合には、デバッグを行うためにさきほど扱ったdata.headersやdata.rowsなどのデータ構造や中身を確認する必要がでてきます。そのような確認を行うためにはqw-consoleとChoromeブラウザのDevToolsを利用します。(同様の機能が他のブラウザでも提供されていますが、ここではChromeブラウザを前提にご説明させて頂きます。)では、ここでは例として「data」(プロパティで設定した軸とメジャーによって構成されるHyperCubeの情報などを含むデータ)の中身を確認してみたいと思います。以下をHTMLの先頭に追加します。log="data">「F12」ボタンを押してDevToolsを立ち上げてConsoleタグを開くと、以下の形で「data」に含まれるデータ構造やデータの中身を確認することが出来ます。先ほどデータ参照方法の説明の際に「data.rows」や「data.headers」などについて触れましたが、それらをここで確認することができます。同様の手順でqw-consoleにsettingsを指定すると、プロパティとして渡されている値を確認することができます。テーブルのデザイン変更では、次のステップとして先ほど作成したテーブルのデザインを変更してみたいと思います。フォントサイズと色の変更まず、テーブルのフォントサイズとヘッダーや罫線などの色を変えてみたいと思います。そのためにCSSに以下を追加します。white;}}}プレビューを確認すると以下の形でフォントサイズや、罫線・背景色が変更されたことを確認します。次にテーブルの偶数行・基数行に異なる背景色を適用して、テーブルをストライプのデザインとしたいと思います。それを行うためにng-class-even/ng-class-oddのAngular.jsディレクティブを利用します。これらはng-repeatと組み合わせて利用し、以下を行います。数行のみに指定したclassを追加します。奇数行のみに指定したclassを追加します。HTMLエディタ上で以下の赤字の部分を追加します。このng-class-evenにより、偶数行のみに「row-even」というclassが追加されます。measures.</div></div>そして、以下の赤字部分をCSSエディタに追加します。このCSSにより、row-evenのclassを持ったHTML要素に薄い灰色の背景色を設定します。#EDEDED;}}}その結果、以下の形でテーブルにストライプのデザインが適用されます。テーブルへのアクション追加では、最後にテーブルに幾つかのアクションを追加したいと思います。ここでは、列のソート、項目の選択、追加のデータ表示を行うアクションを追加します。列のソートAPIではorderBy()やreverseOrder()が提供されており、これらを利用すると特定の列でソートを行って表示することができます。ここではorderByを利用して列のソートを行う処理を組み込みます。HTMLエディタ上で以下の赤字の部分を追加して保存します。measures.</div></div>以下の形で列のヘッダーをクリックすることで、その列でソートされることを確認します。軸名をクリックするとこで選択が実行される処理を追加します。選択処理はselect()のAPIを利用します。選択されている項目の色を変化させる処理も加えるために、HTML要素にclassを追加するng-classのAngular.jsディレクティブも利用します。HTMLエディタ上で以下の赤字の部分を追加します。measures.</div></div>CSSエディタ上で以下の赤字部分を追加して保存します。#6CB33F;}}}アプリ上にウィジェットを配置して軸・メジャーの設定を行い、軸の項目の選択を行うと以下の形で選択が実行され、色が緑に変わることを確認します。Sensesでは一度のフェッチ処理で取得するデータページのサイズがデータページ(DataPage)によって制御されており、ウィジェットの既定の設定では50行のデータを一度のフェッチ処理で取得する設定となっています。従って、一度に50行以上のデータが存在する場合には51行以降が最初は表示されませんので、それらを表示するには以下のdata.getMoreData()を実行して次のフェッチ処理を実行する必要があります。HyperCubeから追加のデータ取得を行うここではボタンをクリックすることでさらにデータを表示する処理を組み込みます。HTMLエディタ上で以下の赤字の部分を追加します。class="more-data">さらにデータを表示</lui-button></div>ボタンの位置を調整するために、CSSに以下の赤字の部分を追加します。{float:right;}}アプリ上にウィジェットを配置して軸・メジャーの設定を行い、行数の多い軸を設定して「さらにデータを表示」をクリックすると、表示データが追加されることを確認します。まとめ以上、このエントリではカスタムのデザインを施したテーブルの作成方法をご説明しました。