Create a simple table

The objective is to create the following table, one column with the departments and the second will be Actual values:

Tables in HTML are defined between <table> and </table> tag. Tables are divided into table rows by <tr> and </tr>. Then table rows are divided into table headings: <th>, or table data: <td>.

  <table>    <thead>           <tr>             <th>Table Header</th>            </tr>    </thead>                <tbody>            <tr>             <td> Table Rows</td>            </tr>     </tbody>  </table>

First we need to create a set of elements which will drive the row set table. tm1-ui-element-list directive will create an element for each member of a subset and save the list to the page.depts variable:

<tm1-ui-element-list tm1-instance="dev"                      tm1-dimension="Department"                      tm1-subset="Corporate1"                      ng-model="page.depts"></tm1-ui-element-list>

The table will have only 2 columns Departments and Actual:

<thead>      <tr>        <th>Departments</th>        <th>Actual</th>      </tr></thead>

ng-repeat will create one row per each element in the list populated by tm1-ui-element-list.

<tr ng-repeat=”dept in page.depts“> means that it will create one variable “dept” per each element in “depts”.

In the first column (<td>{{dept.Description}}</td>) it will show the Description attribute of the variable dept. The second column will be a dbr to get the data. In the tm1-ui-dbr we pass a parameter {{dept.Description}}, on each row the dbr will be linked to the current department.

<tbody>      <tr ng-repeat="dept in page.depts">        <td>{{dept.description}}</td>        <td><tm1-ui-dbr tm1-instance="dev"                      tm1-cube="General Ledger"                      tm1-elements="Actual,2012,Year,Local,Total Europe,{{dept.Description}},Net Income,Amount"                      tm1-data-decimal="2"                      ng-model="page.dbr[version][dept]">          </tm1-ui-dbr>        </td>      </tr>    </tbody>

Almost there, now if you see your table in Canvas, it will look like a simple table:

Now if you want to make your table look nicer, you can use one of the bootstrap table class to give your table a modern look and feel.

For example if we use :

  <table class="table table-bordered">

or if you use class=”table table-striped” it will look like: