Templating

Row Templates

---

Default Row Template:

// passed in as a string
    <div ng-repeat="col in columns" style="width: {{col.width}}px" class="ngCell {{columnClass($index)}} {{col.cellClass}}" ng-cell></div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        rowTemplate: '<div ng-repeat="col in columns" style="height:{{rowHeight}}; width: {{col.width}}px" class="ngCell {{columnClass($index)}} {{col.cellClass}}" ng-cell></div>'
 };

That way you can add some styling!

Cell Templates

---

Default Cell Template:

<div class="ngCellText colt{{$index}}">{{row.getProperty(col.field)}}</div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, cellTemplate: '<div>{{row.entity[col.field]}}</div>' },
                     { field: 'lastName', displayName: 'Last Name', width: 80 },
                     { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' }]
 };

Header Cell Templates

---

Default Header Cell Template:

<div ng-click="col.sort()" ng-class="{ ngSorted : !noSortVisible }">
    <span class="ngHeaderText">{{col.displayName}}</span>
    <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
</div>
<div ng-show="col.allowResize" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>

Example:

var myHeaderCellTemplate = '<div ng-click="col.sort()" ng-class="{ ngSorted: !noSortVisible }">'+
                               '<span class="ngHeaderText">{{col.displayName}}</span>'+
                               '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
                               '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
                             '</div>'+
                             '<div ng-show="col.allowResize" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>';
$scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: 'firstName', displayName: 'First Name', width: 90, headerCellTemplate: myHeaderCellTemplate },
                     { field: 'lastName', displayName: 'Last Name', width: 80 },
                     { field: 'age', cellClass: 'ageCell', headerClass: 'ageHeader' ]
 };