angular ui网格分组显示分组行中的第一个元素

<div ng-controller="GridController">
  <div ui-grid="gridOptions" class="grid"></div>
</div>

<script>
  angular.module('app', ['ui.grid'])
    .controller('GridController', ['$scope', function($scope) {
      $scope.gridOptions = {
        data: 'data',
        enableGridMenu: true,
        enableSorting: true,
        enableFiltering: true,
        groupField: 'groupProperty',
        rowTemplate: '<div ng-class="{\'ui-grid-row-header-cell\': row.groupHeader}" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>',
        columnDefs: [
          { name: 'groupProperty', displayName: 'Group' },
          { name: 'otherProperty', displayName: 'Other' }
        ]
      };

      $scope.data = [
        { groupProperty: 'Group 1', otherProperty: 'Item 1' },
        { groupProperty: 'Group 1', otherProperty: 'Item 2' },
        { groupProperty: 'Group 2', otherProperty: 'Item 3' },
        { groupProperty: 'Group 2', otherProperty: 'Item 4' }
      ];
    }]);
</script>