title: Vuetify <v-data-table> custom <th> header
body: <p>I am using Vuetify <code>&lt;v-data-table&gt;</code>.
  How to add button on table header <code>&lt;th&gt;</code>?</p>
  <p>This code is what I have tried so far.</p>
  <pre><code>&lt;v-data-table v-model=&quot;selected&quot; :headers=&quot;headers&quot; :items=&quot;desserts&quot;&gt;
    &lt;template slot=&quot;items&quot; slot-scope=&quot;row&quot;&gt;
      &lt;th&gt;&lt;button&gt;button&lt;/button&gt;&lt;/th&gt;
    &lt;/template&gt;
  &lt;/v-data-table&gt;  
  
  &lt;script&gt;
  export default {
      data:() =&gt;({
      headers: [
            {
              text: 'Dessert (100g serving)',
              align: 'start',
              sortable: true,
              value: 'name',
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
            { text: 'Carbs (g)', value: 'carbs' },
            { text: 'Protein (g)', value: 'protein' },
            { text: 'Iron (%)', value: 'iron' },
          ],
  });
  &lt;/script&gt;
  </code></pre>
  <p>Please help.</p>