Create a simple table

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

HTML Table definition

HTML tag for a table:

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 Structure in HTML:

             <th>Table Header</th>
             <td> Table Rows</td>

Create a TABLE

1. Create a row set List

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" 

2. Create the Table header

The table will have only 2 columns Departments and Actual:


3. Create the Table Body

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.

      <tr ng-repeat="dept in page.depts">
        <td><tm1-ui-dbr tm1-instance="dev"
                      tm1-cube="General Ledger"
                      tm1-elements="Actual,2012,Year,Local,Total Europe,{{dept.Description}},Net Income,Amount"

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

4. Add a bootstrap class

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: