title: Vuetify 2 grouped data table with customized group header and item rows
body: <p>My goal is to create a Vuetify 2 data table from a list of car models. Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be customized. Below is a very reduced example to show my main problem which is that <strong>Vuetify fully ignores my template for the item-slot and uses the default behaviour instead</strong>.</p>
  <p>How can I make Vuetify use that template as well with avoiding to use a single template for each item column? ... because in my real world example there are a lot of columns which needs to be customized.</p>
  <p><strong>Vue code:</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;app&quot;&gt;
    &lt;v-app&gt;
      &lt;v-data-table
        dense
        disable-sort
        :headers=&quot;headers&quot;
        hide-default-footer
        :items=&quot;cars&quot;
        item-key=&quot;id&quot;
        group-by=&quot;vendor&quot;
      &gt;
        &lt;template v-slot:group.header=&quot;{items, isOpen, toggle}&quot;&gt;
          &lt;th colspan=&quot;2&quot;&gt;
            &lt;v-icon @click=&quot;toggle&quot;
              &gt;{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
            &lt;/v-icon&gt;
            {{ items[0].vendor }}
          &lt;/th&gt;
        &lt;/template&gt;
        &lt;template v-slot:item=&quot;{ item }&quot;&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;strong&gt;{{ item.name }}&lt;/strong&gt;&lt;/td&gt;
            &lt;td&gt;{{ item.power }} HP&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/template&gt;
      &lt;/v-data-table&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>Javascript code:</strong></p>
  <pre class="lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data () {
      return {
        headers: [
          { text: 'Model name', value: 'name' },
          { text: 'Power', value: 'power' }
        ],
        cars: [
          {
            id: 1,
            name: '320i',
            vendor: 'BMW',
            power: 170
          },
          {
            id: 2,
            name: 'M5',
            vendor: 'BMW',
            power: 350
          },
          {
            id: 3,
            name: 'Golf GTD',
            vendor: 'Volkswagen',
            power: 184
          },
          {
            id: 4,
            name: 'Polo GTI',
            vendor: 'Volkswagen',
            power: 190
          }
        ]
      }
    }
  })
  </code></pre>
  <p>Codepen demo can be found <a href="https://codepen.io/cosmoworx/pen/abzgoKe" rel="noreferrer">here</a>.</p>