title: Angular UI-Grid Pivot
body: <p>I have a collection of these Javascript objects: (Displayed as a DTO)</p>
  
  <pre><code>public class ParameterValueDTO : DataTransferObject
  {
    public int Id { get; set; }
    public String Comments { get; set; }
    public String Description { get; set; }
  }
  </code></pre>
  
  <p>By default, AngularJS UI-Grid will create a row for each ParameterValue object with 3 columns: Id, Comments, Description which works fine.</p>
  
  <p><a href="http://i.stack.imgur.com/lom5x.png" rel="nofollow">IMAGE: Standard objects mapping to table</a></p>
  
  <p>What I would like to do however is create a column for each object's "Comments" value and bind it to the corresponding "Description" value.  Essentially pivoting the table so it only has 1 row (forget the ID column for now).</p>
  
  <p>The javascript I've tried:</p>
  
  <pre><code>var cols = [];
  var row = obj.data.ProductAttributes[0].Specifications[0].ParameterValues
  var length = row.length;
  
  
  for (var i = 0; i &lt; length; i++) {
      cols.push({
          field: "Description",
          displayName: row[i].Comments
      });
  }
  
  $scope.gridOptions = {
      columnDefs: cols,
      data: row
  };
  </code></pre>
  
  <p>The above results in the following which is obviously wrong:</p>
  
  <p><a href="http://i.stack.imgur.com/IZ4eM.png" rel="nofollow">IMAGE: One column, new row for each Description</a></p>
  
  <p>Is it possible to accomplish this with the current data structure or what exactly is the correct approach I should be taking?</p>