angular ui grid multi-column header example

<!DOCTYPE html>
<html ng-app="temp2" ng-controller="Temp2Controller as temp2">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css">
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
    <script src="script.js"></script>
    <script src="super-col-with-update.js"></script>
  </head>

  <body>
    <div id="grid" ui-grid="temp2.gridOptions" class="grid"></div>
  </body>

</html>

// Code goes here

angular.module("temp2", ["ui.grid"]).controller("Temp2Controller", [ "uiGridConstants", Temp2Controller ]);

function Temp2Controller(uiGridConstants) {
  "use strict";
  var $scope = this;
  
  $scope.gridOptions = {
      headerTemplate: 'header-template.html',
      superColDefs: [{
          name: 'group1',
          displayName: 'Group 1'
      }, {
          name: 'group2',
          displayName: 'Group 2'
      }],
      columnDefs: [{
          name: 'name',
          displayName: 'Name',
          superCol: 'group1'
      }, {
          name: 'title',
          displayName: 'Title',
          superCol: 'group1'
      }, {
          name: 'age',
          displayName: 'Age',
          superCol: 'group2'
      }],
      data: [{
          name: 'Bob',
          title: 'CEO',
          age: '31'
      }, {
          name: 'Frank',
          title: 'Lowly Developer',
          age: '33'
      }]
  };  


}

/* Styles go here */

.grid {
  width: 500px;
}

<div class="ui-grid-header custom-ui-grid-header">
    <div class="ui-grid-top-panel">
        <div class="ui-grid-header-viewport">
            <div class="ui-grid-header-canvas" style="width: 100%">
                <div class="ui-grid-header-cell-wrapper" style="display: block;" ng-style="colContainer.headerCellWrapperStyle()">
                    <div class="ui-grid-header-cell-row" style="display: block; border-bottom: 1px solid;border-bottom-color: #d4d4d4;">
                        <div  class="ui-grid-header-cell" ng-repeat="superCol in grid.options.superColDefs track by $index" col-name="{{superCol.name}}">
                            <div class="ui-grid-cell-contents" data-ng-bind="superCol.displayName">
                            </div>
                        </div>
                    </div>
                    <div class="ui-grid-header-cell-row">
                        <div class="ui-grid-header-cell ui-grid-clearfix" 
                        			ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" 
                        			ui-grid-header-cell col="col" super-col-width-update render-index="$index">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

(function() {
  "use strict";
  angular.module("temp2").directive('superColWidthUpdate', ['$timeout', function ($timeout) {
    return {
      'restrict': 'A',
          'link': function (scope, element) {
          var _colId = scope.col.colDef.superCol,
              _el = jQuery(element);
          _el.on('resize', function () {
              _updateSuperColWidth();
          });
          var _updateSuperColWidth = function () {
              $timeout(function () {
                  var _parentCol = jQuery('.ui-grid-header-cell[col-name="' + _colId + '"]');
                  var _parentWidth = _parentCol.outerWidth(),
                      _width = _el.outerWidth();
                  
                  if (_parentWidth + 1 >= _width) {
                    _parentWidth = _parentWidth + _width;
                  } else {
                    _parentWidth = _width;
                  }
                  
                  _parentCol.css({
                      'min-width': _parentWidth + 'px',
                      'max-width': _parentWidth + 'px',
                      'text-align': "center"
                  });
              }, 0);
          };
          _updateSuperColWidth();
      }
    };
  }]);
  
  
  
  
  
})();