Templating

Row Templates

---

Default Row Template:

// passed in as a string
    <div ng-style="{'cursor': row.cursor, 'z-index': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div> {{col.cellClass}}" ng-cell></div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        rowTemplate: '<div ng-style="{'cursor': row.cursor, 'z-index': col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>'
 };

That way you can add some styling!

Default header template:

<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell" ng-header-cell></div>

Cell Templates

---

Default Cell Template:

<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field)}}</span></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 class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{'cursor': col.cursor}" ng-class="{ 'ngSorted': !noSortVisible }">
    <div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>
    <div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>
    <div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>
    <div class="ngSortPriority">{{col.sortPriority}}</div>
    <div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div>
</div>
<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>

Example:

var myHeaderCellTemplate = '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{cursor: col.cursor}" ng-class="{ ngSorted: !noSortVisible }">'+
                               '<div ng-click="col.sort($event)" ng-class="'colt' + col.index" class="ngHeaderText">{{col.displayName}}</div>'+
                               '<div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div>'+
                               '<div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div>'+
                               '<div class="ngSortPriority">{{col.sortPriority}}</div>'+
                             '</div>'+
                             '<div ng-show="col.resizable" 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' ]
 };