Eu tentei alcançar o agrupamento de várias colunas no nível do cabeçalho da coluna para UI-Grid com a abordagem abaixo.

Etapas que segui:

Inclua o modelo de célula de cabeçalho abaixo, da grade da interface do usuário, com outra "linha da grade da interface do usuário":

<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">
                <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
                    <div class="ui-grid-header-cell-row">
                        <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 super-col-width-update col="col" render-index="$index">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div ui-grid-menu></div>
    </div>
</div>

Adicione referências ao seu objeto de definição de coluna da grade com dados da Super Coluna:

$scope.gridOptions = {
    headerTemplate: 'views/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'
    }]
};

Calcule a largura de cada coluna de cabeçalho e adicione-a à largura da sua Super Coluna, para fazer com que cada Super célula relevante se espalhe pelas células filho. Isso pode ser alcançado com uma diretiva que será colocada em todas as células de cabeçalho filho.

Directiva:

.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();
                    _parentWidth = ((_parentWidth === 1) ? 0 : _parentWidth) + _width + 'px';
                    _parentCol.css({
                        'min-width': _parentWidth,
                        'max-width': _parentWidth
                    });
                }, 0);
            };
            _updateSuperColWidth();
        }
    };
}]);

Na abordagem acima, a solução foi alcançada manipulando o DOM para renderizar uma nova linha de cabeçalho e novas células de cabeçalho, que ficam na parte superior da linha de cabeçalho usual, mas na janela de exibição Cabeçalho.

No entanto, estou procurando uma abordagem melhor, pode estar usando os serviços ou diretivas internas da UI-Grid. Qualquer ajuda aqui é muito apreciada!