title: Header grouping of UI Grid Angular
body: <p>I want to change my header rendering of UI-Grid AngularJS. I know it is easy to implement by just make headerTemplate but i have a situation where i need to make the grouping of headers like this </p>
  
  <p><a href="https://i.stack.imgur.com/NXXKE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NXXKE.png" alt="enter image description here"></a></p>
  
  <pre><code>{
          name: 'Mapped By',
          enableColumnMenu: false,
          field: 'Mappedby',
          cellClass: 'intrighttextcell',
          width: 102,
          enableCellEdit: false,
          allowCellFocus: false
      },
  </code></pre>
  
  <p>I don't know how can i achieve this functionality in ui-grid.
  Here is the <a href="http://plnkr.co/edit/9zs8D2CK5Dz6QJWlBeZC?p=preview" rel="nofollow noreferrer">plunkr</a> of ui-grid. </p>