title: UI-GRID Dynamic column headers and array of object data
body: <p>I have following data</p>
  
  <pre><code>vm.myData =
          {
              'Type' : 
              [
                  'A',
                  'B',
                  'C'
              ],
              'Data': [
              {
                  'Key': 'XXX',
                  'AValues':
                  {
                      'ID': '1',
                      'Val': '10'
                  },
                  'BValues':
                  {
                      'ID': '2',
                      'Val': '20'
                  },
                  'CValues':
                  {
                      'ID': '2',
                      'Val': '20'
                  }
              },
              {
                  'Key': 'TTT',
                  'AValues':
                  {
                      'ID': '2',
                      'Val': '30'
                  },
                  'BValues':
                  {
                      'ID': '4',
                      'Val': '70'
                  },
                  'CValues':
                  {
                      'ID': '2',
                      'Val': '20'
                  }
              }
              ]
          };
  </code></pre>
  
  <p>I am trying to show data as below</p>
  
  <pre><code>Key A   B   C
  XXX 10  20  20
  TTT 30  70  20
  </code></pre>
  
  <p>I tried it many ways but not able to get desired result.
  I want the name of the Columns to come from 'Type' on 'myData'.
  I am able to display first row by hardcoding.</p>
  
  <pre><code>vm.gridOptions = {
              columnDefs: [
                  { name: 'Key', field: 'Data[0].Key'},
                  { name: 'A', field: 'Data[0].AValues.Val'},
                  { name: 'B', field: 'Data[0].BValues.Val'},
                  { name: 'C', field: 'Data[0].CValues.Val'}
              ],
              data: vm.myData
          };
  </code></pre>
  
  <p>I would really appreciate any help.</p>
  
  <p><strong><em>Update</em></strong>
  After going through Naren Mulrali's suggestion, I did following which gives me desired result.
  But I have hardcoded column names(I need different display names).
  Is there a way to dynamically get column header from the 'Type' array from 'myData'</p>
  
  <pre><code>vm.gridOptions = {
              columnDefs: [
                  { displayName: 'Key', name: 'Key' },
                  { displayName: 'A', name: 'AValues.Val' },
                  { displayName: 'B', name: 'BValues.Val' },
                  { displayName: 'C', name: 'CValues.Val' }
              ],
              data: vm.myData.Data
          };
  </code></pre>