How to change ngTable title colors programmatically? - angularjs

Question

In this plunk I have an ngTable that is created dynamically, setting progammatically the colors of the rows for each column. How to change the colors of the column titles?
HTML:
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<tr ng-repeat="row in data">
<td ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{row[col.nm]}}</td>
</tr>
</table>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [
{nm:'uid', title:'User ID', color: 'blue'},
{nm:'ugr', title: 'Group ID', color: 'red'}
];
$scope.data = [
{ uid: 'aaa',ugr: '222'},
{ uid: 'bbb', ugr: '111'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
});

Answer 1

You can use the class property on each of the objects in your cols array:
$scope.cols = [
{nm:'uid', title:'User ID', class: 'text-blue' },
{nm:'ugr', title: 'Group ID', class: 'text-red'}
];
Then set appropriate css classes in your stylesheet:
.text-blue{
color: #0000ff;
}
.text-red{
color: #ff0000;
}
Demo Plunk

Answer 2

You need to include a thead. Here is an updated Plunker
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<thead>
<tr>
<th ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{col.title}}</th>
</tr>
</thead>
<tr ng-repeat="row in data">
<td ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{row[col.nm]}}</td>
</tr>
</table>

Answer 3

The right way to do it is Matthew Cawley's answer but in case you want to do additional modifications on table headers it's useful to know that you can change template for header:
http://plnkr.co/edit/662FYVbJyz2wxqXV5nNk?p=preview
<table template-header="table-header.html" ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
after that add file table-header.html in your project containing this:
<tr>
<th title="{{$column.headerTitle(this)}}"
ng-repeat="$column in $columns"
ng-class="{
'sortable': $column.sortable(this),
'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
'sort-desc': params.sorting()[$column.sortable(this)]=='desc',
}"
ng-click="sortBy($column, $event)"
ng-if="$column.show(this)"
ng-init="template = $column.headerTemplateURL(this)"
class="header {{$column.class(this)}} {{$column.headerClass}}">
<div ng-if="!template" class="ng-table-header" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'div'}">
<span ng-bind="$column.title(this)" ng-class="{'sort-indicator': params.settings().sortingIndicator == 'span'}"></span>
</div>
<div ng-if="template" ng-include="template"></div>
</th>
</tr>
then in your code:
$scope.cols = [
{nm:'uid', title:'User ID', headerClass: 'blue'},
{nm:'ugr', title: 'Group ID', headerClass: 'red'}
];
also don't forget css classes:
.red {
color: red;
}
.blue {
color: blue;
}