角度UI网格：将另一行中具有相同值的行分组

Question

我想自定义我的Angular ui-grid，使其看起来像下面的样子。 数据的结构是如此……

{
  name: "Kevin Johar",
  team: "Red",
  id: "2137",
  company: "BlueHerring",
  active: "true",
  date: "05-13-2018",
  team Lead: "John Deer",
  comments: ""
}

我希望显示数据，以便分配给Kevin的所有不同ID的组织方式类似于上面的网格。 因此，如果为Kevin分配了5个ID，则带有他的名字的列将是一个大块，而每个ID的其余数据将照常进行，但将保留在标有Kevin的名称列的范围内。

网格选项

$scope.gridOptions = {
  flatEntityAccess: true,
  enableGridMenu: true,
  enableFiltering: true,
  exporterMenuCsv: false,
  exporterMenuPdf: false,
  paginationPageSizes: [50, 100, 200],
  paginationPageSize: 100,
  // treeRowHeaderAlwaysVisible: false,
  // enableHorizontalScrollbar: 2,
  enableSorting: true
};

列定义

$scope.gridOptions.columnDefs = [
  {
    name: 'Name',
    field: 'Name',
    width: 140,
    //Allows user input in these columns
    enableCellEdit: false,
    enableGrouping: true
  },
  {
    name: 'Team',
    field: 'teamName',
    width: 140,
    enableCellEdit: false
  },
  {
    name: 'Id',
    field: 'id',
    width: 100,
    enableCellEdit: false
  },
  {
    name: 'Company',
    field: 'companyName',
    width: 130,
    enableCellEdit: false
  },
  {
    name: 'Active',
    field: 'activePassive',
    width: 140,
    enableCellEdit: false
  },
  {
    name: 'Date',
    field: 'date',
    width: 120,
    enableCellEdit: false
  },
  {
    name: 'Team Lead',
    field: 'teamLead',
    width: 150,
    enableCellEdit: false
  },
  {
    name: 'Comments',
    field: 'comments',
    width: 200,
    enableCellEdit: true
  },

];