302_custom_header.ngdoc

@ngdoc overview
@name Tutorial: 302 Custom Header
@description

You can specify a custom template for your grid's header with the `headerTemplate` grid option. It will take a url, Angular element, or text string.

If you want to customize the height of the header do it by setting a height on your header cells with CSS:

```javascript
.grid .ui-grid-header-cell {
  height: 60px;
}
```

For better performance with the following example, you can choose to load the ui-grid.core.js instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
</pre>

@example
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngTouch', 'ui.grid']);

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {
        headerTemplate: 'header-template.html',
        data: [
          { name: 'Bob', title: 'CEO' },
          { name: 'Frank', title: 'Lowly Developer' }
        ]
      };

      $scope.gridOptions2 = {
        data: [
          { name: 'Bob', title: 'CEO' },
          { name: 'Frank', title: 'Lowly Developer' }
        ]
      };
    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <div class="grid" ui-grid="gridOptions"></div>
      <br>
      <div class="grid grid2" ui-grid="gridOptions2"></div>
    </div>
  </file>
  <file name="header-template.html">
    <div class="ui-grid-top-panel" style="text-align: center">I am a Custom Grid Header</div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 150px;
    }

    .grid2  .ui-grid-header-cell {
      height: 60px;
    }
  </file>
</example>