Modified Widget Table to show sub-Totals & Overall Totals

[deerhunter]

I would like to add to this widget HTML code so as to show a separate line for sub-totals by dimension & totals by measures at the bottom of the table view. I am including the widget HTML: Can anyone assist in adding the HTML code needed to make that magic happen?

Just learning widget development, Thanks in advance:

####################################################################################

<div class="wrapper">

<div class="top-header" ng-if="settings.tableHeaderTitle">

  {{settings.tableHeaderTitle}}

</div>

<table>

  <thead>

  <tr>

  <th class="header" ng-repeat="head in data.headers track by $index" qva-activate="head.orderBy()">{{head.qFallbackTitle}}

  </th>

  </tr>

  </thead>

  <tbody>

  <tr ng-repeat="row in data.rows track by $index">

   <td class="selectable" ng-repeat="cell in row.cells track by $index" qva-activate="cell.select()"> {{cell.qText}} </td>

  </tr>

  </tbody>

</table>

</div>

[deerhunter]

To shoot for the stars, I would also like to add color to the Header background and text & the total table row background and text to make it stand out if possible. Would it also be possible to place the Total row to always show allowing the user to scroll through the table while keeping the Total row frozen in site..

My HTML IS SHOWN ABOVE:

My CSS Looks like this:

.wrapper {

    margin-right:20px;

  table {

  thead tr th {

  border-bottom-style:solid;

  border-bottom-color:#ccc;

  border-bottom-width:2px;

  padding-bottom:5px;

  text-align:left;

  color:#0099ff;

  font-size:14px;

  padding:10px;

   }

   tbody tr {

   line-height:25px;

   border-top-style:solid;

   border-top-color:#ccc;

   border-top-width:1px;

   }

   tbody td {

    padding-left:40px;

   }

  }

}

.center {

    text-align:center;

}