title: VueJS: Material Table: How to assign a value from row as the column heading?
body: <p>Using the examples from Vue Material documentation, we are creating a table. However, we are stuck at one seemingly minor point - how to assign an item value as the column heading.</p>
  <pre><code>&lt;md-table v-model=&quot;users&quot; md-card&gt;
    &lt;md-table-toolbar&gt;
      &lt;h1 class=&quot;md-title&quot;&gt;Users&lt;/h1&gt;
    &lt;/md-table-toolbar&gt;
    &lt;md-table-row slot=&quot;md-table-row&quot; slot-scope=&quot;{ item }&quot;&gt;
      &lt;md-table-cell md-label=&quot;{{ item.id }}&quot; md-sort-by=&quot;id&quot; md-numeric&gt;{{ item.id }}&lt;/md-table-cell&gt;
      &lt;md-table-cell md-label=&quot;Name&quot; md-sort-by=&quot;name&quot;&gt;{{ item.name }}&lt;/md-table-cell&gt;
      &lt;md-table-cell md-label=&quot;Email&quot; md-sort-by=&quot;email&quot;&gt;{{ item.email }}&lt;/md-table-cell&gt;
      &lt;md-table-cell md-label=&quot;Gender&quot; md-sort-by=&quot;gender&quot;&gt;{{ item.gender }}&lt;/md-table-cell&gt;
      &lt;md-table-cell md-label=&quot;Job Title&quot; md-sort-by=&quot;title&quot;&gt;{{ item.title }}&lt;/md-table-cell&gt;
    &lt;/md-table-row&gt;
  &lt;/md-table&gt;
  </code></pre>
  <p>In this line where we tried out a variable, the output just shows the column heading as &quot;{{item.id}}&quot;</p>
  <pre><code>&lt;md-table-cell md-label=&quot;{{ item.id }}&quot; md-sort-by=&quot;id&quot; md-numeric&gt;{{ item.id }}&lt;/md-table-cell&gt;
  </code></pre>
  <p>Please let us know what we might be doing wrong. Appreciate your help.</p>