title: VueJS / Vuetify - Possible to dynamically load a data table without having to hard-code the columns?
body: <p>Good day,</p>
  
  <p>In trying to learn VueJS I wanted to make a generic <a href="https://vuetifyjs.com/en/components/data-tables#api" rel="nofollow noreferrer">Vuetify Data Table</a> that could receive an array of objects with <code>n</code> properties, where <code>n</code> is unknown.</p>
  
  <p>Every example and article I've found about using these tables hard-codes the object properties into their <code>headers</code> and <code>items</code> slots, something like this:</p>
  
  <pre><code>&lt;template slot="items" slot-scope="props"&gt;
    &lt;td&gt;{{ props.item.name }}&lt;/td&gt;
    &lt;td class="text-xs-right"&gt;{{ props.item.calories }}&lt;/td&gt;
    &lt;td class="text-xs-right"&gt;{{ props.item.fat }}&lt;/td&gt;
    &lt;td class="text-xs-right"&gt;{{ props.item.carbs }}&lt;/td&gt;
    &lt;td class="text-xs-right"&gt;{{ props.item.protein }}&lt;/td&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Which is fine if I have 1 or 2 datasets. But what if I want to load one of 100 different datasets into my data-table? Do I really need 100 different "foo-table" components with hard-coded values?</p>
  
  <p>How do I handle the template interpolation that would allow me to reuse a single data-table component that could handle data like:</p>
  
  <pre><code>items: [{ name: 'foo', age: 100, occupation: 'retired' }, ...]
  </code></pre>
  
  <p><em>and</em></p>
  
  <pre><code>items: [{ seq: '1234', data: 'XYZ', flag: 'N', operator: 'someone',  }, ...]
  </code></pre>
  
  <p>and correctly <code>v-for</code> each <code>&lt;tr&gt;</code> by the item and the <code>&lt;td&gt;</code> by each item parameter as dictated by the <code>headers</code> (where <code>item[n][header[i].value]</code>)?</p>
  
  <hr>
  
  <p><strong>What I've done so far.</strong></p>
  
  <p>I've spent a fair amount of time on this and the best I came up with is something like the following:</p>
  
  <pre><code>&lt;template slot='items' slot-scope='props'&gt;
    &lt;tr v-for='(item, i_index) in items' :key='i_index'&gt;
      &lt;td v-for='(header, h_index) in headers' :key='h_index'&gt;
        {{ items[i_index][header.value] }}
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>But it doesn't work because it's producing items.length-times as many rows because I think the <code>items slot</code> is already implicitly doing a v-for inside of it, making my <code>&lt;tr v-for ...&gt;</code> redundant.</p>
  
  <hr>
  
  <p>Does anyone have any better ideas on how I can accomplish a generic data-table?</p>