title: Getting key for table-head and value for table-cell vue.js
body: <p>I have response from backend like this:</p>
  <pre><code>{
    &quot;responseData&quot;: [
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 12:25&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 12:26&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      },
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 13:50&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 13:51&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      },
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 14:05&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 14:06&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      },
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 14:35&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 14:36&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      },
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 14:45&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 14:46&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      },
      {
        &quot;count&quot;: 1,
        &quot;startTime&quot;: &quot;11.01.2017 15:35&quot;,
        &quot;endTime&quot;: &quot;11.01.2017 15:36&quot;,
        &quot;code&quot;: &quot;ABC&quot;
      }
    ]
  }
  </code></pre>
  <p>I will have more data in array. This table depends on user's input.
  I want my table like</p>
  <pre><code>&lt;md-table&gt;
     &lt;md-table-header&gt;
         &lt;md-table-row id=&quot;header&quot; v-for=&quot;value in responseData&quot;&gt;
             &lt;md-table-cell&gt;{{ value.key }}&lt;/md-table-cell&gt; // for each key in response one table cell
          &lt;/md-table-row&gt;
      &lt;/md-table-header&gt;
  
      &lt;md-table-body&gt;
        &lt;md-table-row  v-for=&quot;(row, index) in responseData&quot; :key=&quot;index&quot;&gt;
           &lt;md-table-cell&gt;{{response.value}}&lt;/md-table-cell&gt; //for each key table cell value
        &lt;/md-table-row&gt;
      &lt;/md-table-body&gt;
  &lt;/md-table&gt;
  </code></pre>
  <p>Something like this but I want it dynamic. <a href="http://codepen.io/zupa10/pen/OpJJEM" rel="nofollow noreferrer">http://codepen.io/zupa10/pen/OpJJEM</a>
  As I said one time i will have 4 things in array like count, startTime, endTIme and code, and other times i'll have this and 5 more things, maybe totally new things in response.
  Any suggestion how can I do that?</p>
  <p>UPDATE:</p>
  <p>I did this with vue.js grid component and it works just fine for me. Here's the link <a href="https://v2.vuejs.org/v2/examples/grid-component.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/examples/grid-component.html</a>.</p>